About the Aurora Theme editor
The Theme editor in Aurora Designer enables you to customize the appearance of your community site to match the look and feel of your brand. With Theme, you can configure the page layout, set the size and style of your fonts, manage colors, manage icons, configure buttons and text links, manage avatars, and manage UI elements for your community site content (Blogs, Forums, Knowledge Bases, Ideas, Events, and Groups). After you have customized your community theme, click Publish to make them live on your site instantly. The Theme editor is separated into the following categories: Basics Fonts Colors Buttons and Text Links Avatars UI Elements Refer to the Build Khoros Communities course for training on site design.Aurora: Set the font style and size for your community
You can set the font style and size for the headings and the body text from the Theme editor's Fonts area. To customize your site's fonts, open theAccount menu and go to Designer > Theme > Fonts. Heading styles and sizes Set the style and size for different heading levels. Font Picker: The font picker enables you to set the font family for headings in your community. You can choose from Local Fonts that are installed on your computer, Sans Serif font families, or Serif font families, or youcan add a custom font family from Google Fonts. Add Custom Font: ClickAdd Custom Fontto add a custom font family from Google. See Add a custom font. Font Weight: The font weight menu enables you to choose a style for the font family used in headings. Choose from amongLight,Regular,Medium,Bold, andItalic. Headings 1 through Headings 6: You can set the size from 14 to 56 pixels for the different headings using their respective sliders. Defaults are shown in the screenshot below. Line height: Set the distance between the two lines in the headings of your community content (default 1.3). Top spacing: Set the amount of space above heading text (maximum 60 pixels). Bottom spacing: Set the amount of space below heading text (maximum 40 pixels). Body text styles and sizes Set the body text style and size: Font Picker: The font picker enables you to set the font family for headings in your community. You can choose from Local Fonts that are installed on your computer, Sans Serif font families, or Serif font families, or youcan add a custom font family from Google Fonts. Add Custom Font: ClickAdd Custom Fontto add a custom font family from Google. See Add a custom font. Font Weight: The font weight menu enables you to choose a style for the font family used in body text. Choose from amongLight,Regular,Medium,Bold, andItalic. Paragraph text: Set the text size used in your community content (default 16 pixels). Small: Set the text size used for supportive text blocks and text within widgets in your community (default 14 pixels). Extra Small: Set the text size used for supportive text blocks in a community, such as within the breadcrumb trail (default 12 pixels). Subheading: Set the subheadings that appear at the top of any content in your community (default 11 pixels). Line height: Set the distance between the two lines in the body text of your community content (default 1.5). Bottom spacing: Set the amount of space below body text (maximum 40 pixels). Add a custom font You can add a custom font family from Google Fonts or your local machine. To add a custom Google Fonts family via pasted code: In the Fonts panel, click to open the font picker in the Headings or Body text section depending on which type of text should use the Google font family. Click Add Custom Font. In Google Fonts, copy the code provided for the font family you want to use. Paste the code into the Insert in <head> code field. Note: Variable fonts containing variable axes (axises) or weights are not supported in Aurora. Example of a font with variable weights: https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,800;1,800&display=swap If you want to add more weights, you must specify the exact values in the <head> embed code. Click Add Font. To add a custom font family via file upload: In the Fonts panel, click to open the font picker in the Headings or Body text section depending on which type of text should use the new font family. Click Add Custom Font. Click Upload File. In the Font file field, click Browse to locate the font file on your local machine. (Optional) Edit the pre-populated Font family name field. In the Style drop-down menu, select the desired style for the font. Click Add Font. (Optional) Continue adding fonts as needed. After you’ve added your custom font, it is automatically selected to be used in the community and appears in the Choose a Font panel under Custom Fonts. From the Options menu (ellipsis icon), you can change or remove the font. Note: Before clicking Save and Publish to push your Theme changes to the community, verify you have the correct fonts selected. Reset fonts to default values To reset the font back to the system defaults, click Reset Fonts to Defaults in the Fonts panel. Important: Resettings fonts reverts all the settings to their system defaults, not the settings you saved previously.Aurora: Manage site colors
You can manage all the colors used on your site from the Theme editor's color settings page. Open your Account menu and go to Designer > Theme > Colors. You can define the colors for the following: Primary community colors Additional colors Content type icons Alert messages Primary community colors You can configure Primary community colors by hovering your cursor over the color you want to change and clickingEdit(pencil icon). Primary accent: Set the accent color used across the community. It is used in areas of the content editor, tags, Inbox (unread message indicator), various form elements, icons, and buttons, etc. Primary text: Set the color used for most of the text in your community (posts, replies, comments). Page background: Set the color used as the background for your community pages. Note: Aurora Theme editor also provides a grayscale color range. Additional colors You can add your own colors to your theme’s color palette. When you add new colors, they are selectable from color pickers in Theme and on page templates. To add a new color, clickAdd color,enter the color's hex code, and clickSave. Content type icons Each community content type (Forum, Blog, Knowledge Base, Idea, Event, and Group) has a distinct color for its icon. You can edit these colors to match your brand colors. To select a new icon color, hover your cursor over the one you want to change and click Edit(pencil icon). Default values for content type icon colors are provided. Alert Messages Each community alert message type (Information, Success, Warning, Danger) uses a different color to indicate its purpose and importance. To select a new alert message color, hover your cursor over the one you want to change and click Edit(pencil icon). Default values for different alert message colors are provided. Reset colors to default values To reset the colors to the system defaults, click Reset Colors to Defaults in the side panel. Important: Resetting colors reverts all the settings to their system defaults, not the settings you saved previously.Aurora: Configure buttons and text links
You can configure and customize the buttons and text links in your community's theme. Open theAccount menu and go to Designer > Theme > Buttons and Text Links. You can style your call-to-action buttons to provide attention or match your community brand style in your community content. While you're configuring your buttons, you'll notice references to standard buttons, large buttons, and hero buttons: Standard buttons are the primary ones located all throughout the community, such as comment and reply buttons. Large buttons are used on modal windows. Hero buttons are used on the header of the page template as calls to action. You can customize the following: Button style Button shape Primary button and text Secondary button and Text Tertiary button and text Destructive button and text Text Links in community content Button style You can style your button with the following button style options: Filled:(Default) Use this option to fill buttons. Outlined:Use this option to outline buttons with no color fill. Button shape and text style You can configure the shape of the buttons in your community. Select a shape from the following: Square:Buttons appear as squares/rectangles. Rounded:Buttons appear as squares/rectangles with rounded corners. Pill:Buttons appear pill-shaped. Select an option from theButton text styledrop-down menu: Light Regular Medium Bold Italic If you selected Square orRounded, set the corner radius for both the standard button (default is 3 px) and the large button (default is 5 px) using the sliders. Set the Side Padding for the following button sizes: Standard Button: 8px-30px (default 12px) Large Button: 12px-40px (default 16px) Hero Button: 12px-120px (default 60px) Buttons and Text You can select a button color and text color based on your brand or design pattern for the following: Primary button and Primary text Secondary button and Secondary text Tertiary button and Tertiary text Destructive button and Destructive text When you hover your cursor over a color choice in the color picker, the hex code is displayed. This enables you to distinguish between similar colors before making your selection. You can customize the text links in the member-created content by selecting the text link color. You can also select an option from thedrop-down menu. Reset buttons and text links to defaults To reset buttons and text links to their defaults, click Reset Buttons to Defaults. Important: Resetting buttons and text links reverts all the settings to their system defaults, not the settings you saved previously.Aurora: Manage avatars for your community
You can manage the avatars for your community from the Theme editor's avatar settings. Open theAccount menu and go to Designer > Theme > Avatars. You can set the avatar and its visual style in your community. You can also turn on the option for default avatars that are set automatically and randomly whenever a new member joins the community. We provide 12 out of the box, but you can also add custom ones to this set. Set the visual style Add custom avatars Default avatar set Set the visual style You can set the visual style of the avatar using the following options: Circle:(Default)Member avatars appear as circles. Sq rounded:Member avatars appear as squares with rounded corners. Use the slider to set the Corner radius(default is 3 px). Square:Member avatars appear as squares. Add custom avatars You can add custom avatars to the default avatar set available to your community members. When members go to update their avatars from their personal settings, they can choose between the out-of-the-box avatars or any of the custom ones you’ve added. To add custom avatars: Click Add custom avatars. In the Add Custom Avatars window, upload as many images as you want in SVG, JPG, or PNG formats. A square image is required with a minimum of 300px by 300px recommended. Click Add Avatars. Click Save and Publish. Members can now select the newly added custom avatars when they choose their profile avatar. Default avatar set To include the default avatars for your community, turn on the Include default avatar set option. The default avatar set includes 12 default avatars for your community. Related topics: Manage avatar permission settingsAurora: Manage UI elements
Using the Aurora Theme editor, you can manage the user interface elements of your community. To adjust them, open theAccount menu and go to Designer > Theme > UI Elements. You can set the shape of the UI elements such as form inputs and modal overlays (a way to display important information to an admin without navigating away from the current page) to match the brand patterns for your community. You can set the following UI elements: Border corner radius Borders – main content Borders – side content Shadows Form inputs Modal overlays Border corner radius You can set one of the following border corner radius options for your UI elements: None: The border of UI elements is squared off. Small:(Default)The border of UI elements is slightly rounded (small radius). Large:The border of UI elements is very rounded (large radius). Borders – main content You can set one of the following border options for the main content UI elements (for example, posts and comments): None:UI elements appear without a border. Light:(Default)UI elements have a light outline. Dark:UI element have a dark outline. Borders – side content You can set one of the following border options for the side content UI elements (for example, blocks of content in narrow columns): None:UI elements appear without a border. Light:(Default)UI elements have a light outline. Dark:UI elements have a dark outline. Shadows You can set one of the following shadow options for the UI elements: None:UI elements appear without a shadow. Light:(Default)UI elements have a light drop shadow. Dark:UI elements have a dark drop shadow. Form input shape You can set the shape for form inputs to one of the following options: Square:Form input fields appear as squares/rectangles. Rounded:(Default)Form input fields appear as squares/rectangles with rounded corners. Pill:Form input fields appear pill-shaped. Modal overlays You can set the background for the modal overlays to one of the following options: Light:Backgrounds behind windows are light. Dark:Backgrounds behind windows are dark. Reset UI elements to default values To reset the UI elements back to the system defaults, click Reset UI Elements to Defaults in the side panel. Important: Resetting UI elements reverts all settings to their system defaults, not the settings you saved previously.Aurora: Configure the page layout and logos for your community site
You can configure the logos and general page layout in your community from the Theme editor's Basics area. Open theAccount menu and go to Designer > Theme > Basics. In the Basicspanel, you can set the width of the page content, background extension, your brand logo, and browser icon. Configure your site basics using the following options: Maximum width of page content:Using the slider, set the maximum width of page content from 1000 pixels to 1600 pixels (default 1400 px). Background extends to:You can choose the background extension to either the width of the browser or the width of page content (the default is Width of page content). Your logo:Click Add(plus sign icon)orEdit(pencil icon)to upload an image file inSVG or PNG format as the logo that appears in the header of any page in your community. Browser icon: ClickAdd(plus sign icon)orEdit(pencil icon)to upload a PNG image file with a minimum 512 px square dimensions for the icon that appears on your browser tab.
