Using Aurora Page Templates
The Page Templates area of the Designer empowers you to create customized experiences for your community visitors across several different page types. With page templates, you can add or remove sections and widgets, customize individual page components, and build out a unique experience for each type of page featured on your site—all from a simple, intuitive user interface. Page Templates vs. Themes Access the Page Templates tool Access a template's edit page Basic functionality For a list and description of available page templates, see About Page Templates. Page Templates vs. Themes The Page Templates tool gives you control over page templates as well as the sections and widgets included within. The Theme, controlled through the Theme editor, applies across all of your page templates. Access the Page Templates tool Authenticated members with roles that grant them permission to use page templates can access the tool by opening the Account menu and clicking Designer. On theDesignerpage,you can choose between the Theme and Page Templates options. The Themeeditoris where you can modify the look and feel of the community. This includes the color scheme, fonts, and other visual elements. The Page Templates editor is where you can select from available page templates to customize the layout and configuration of your community pages. Access a template's edit page Hovering your cursor over one of the items in the Page Templates listreveals Edit and Settings buttons. Opening theSettingsmenu gives you the option to reset the template's layout to its default settings. Click Editto go to the template's edit page where you can change its layout, add and remove widgets, preview changes for multiple device types, and publish them to your community. Access another page template within the editor While using the page template editor, you can switch to another page template by selecting it from the page template picker. You can also return to the full page template list by clicking View All Page Templatesin the drop-down menu. Basic functionality The page templates feature has tools that make it easy to create, organize, and customize the user experience across your community. Everything you need to create and arrange sections, add and customize widgets, and preview changes for various device types are readily accessible from the main Page Templates interface. Preview and Zoom Page Overview Section and Widget controls Publish changes Preview and Zoom Prior to publishing any changes to your live site, you can not only zoom in on page content, but you can also preview your page templates as they would appear on several common device types. Click theDesktop, Tablet, or Phone icons to see how the page template appears to visitors on the target device type. After you have finished previewing your changes, click the active icon again to return to the editable page templates view. Page Overview The Page Overview presents a list of current sections as they appear on the page template. You can rearrange sections by clicking the dotted lines to the left of each section title and dragging them into a new position. You can add new sections by clicking Add Section.To edit and configure sections, click a section name to go to theEdit Section panel. Section and Widget controls Controls for sections and widgets are located across the page templates tool. 1 – Add section 2 – Section controls 3 – Widget controls For sections, you have many of the same options found on the Page Overview, including section creation, arrangement, and removal. Using the editor, you can arrange, configure, and remove widgets using the widget controls. Clicking the Settings icon opens the widget's options panel, enabling you to configure the widget's settings. With some sections and widgets, you may be prevented from adding, editing, removing, and/or moving content to prevent issues with the page template. For more information, see Create and arrange sections in a Page Template. Publish changes After you have made all of your desired changes, click Publish to make them live in your community, or click Cancel to revert to the original state. When you clickSave andPublish, the changes you make are published immediately on any pages using the page template you edited. Related topics: About Page Templates Create and arrange sections in a page template Getting Started with WidgetsAurora: Featured Idea Statuses widget configuration
The Featured Idea Statuses widget displays the idea statuses you choose to feature and is available on the Ideas Dashboard page template. If you reset the layout of a page with a populated Featured widget or delete a section containing a populated Featured widget, that Featured widget is deleted from all other page templates on which it appears. If you attempt to reset or delete, you will receive a warning that also indicates all other places where the widget is located. When members access the widget in the community, they can click the status name to view the All ideas page scoped to that status. Layout The Featured Idea Statuses widget includes the List and Card layouts. From the Edit Widget panel, select one of these options to change the layout. List The List layout gives you a simple view of the statuses featured in the widget along with the number of ideas (if chosen to be included) associated with each status. Card The Card layout showcases the idea’s status name in the center of the card with, if chosen to be included, the idea count of each status displayed above the status name. Configuration options List style The options in the List style section for List layouts are the following: Space: Uses whitespace to create space between items. Divide: Adds a horizontal line to divide items. Border: Creates a border that separates items into individual boxes. Widget title Enter a title to appear at the top of the widget. If the Visible only to screen readers toggle is on, the title is relayed only through screen readers. Edit Sample Featured Idea Statuses Click Edit Sample Content to open a window where you can select sample idea statuses to preview how the widget will look in the community. Click Add Status to add statuses you want to feature one by one. You can then reorder the content by grabbing it with your cursor and dragging it to the desired location. Note: The sample statuses you select here are not saved or published to the community. You must add the actual idea statuses you want to feature on the desired page in the community. There is no global source for adding places that would apply it to every instance of the widget. See Feature content, places, and idea statuses on a page. Click Preview to return to editing the widget. List item/Card elements List item elements and Card elements determine what information is included for each item in the widget. Turning off or on the toggles hides or shows the elements. In this case, you can turn on or off the indicator for the number of ideas with the Show idea count toggle. Number of items The Number of items slider enables you to indicate how many idea statuses can be displayed on the widget. More options Additional options are available at the bottom of the Edit Widget panel: Include "Show More" link adds a link to the bottom of the widget to enable visitors to display additional items once the Number of items has been reached. Optimize page-load time uses lazy loading to load images as the member scrolls down the page. Related topics: Feature content, places, and idea statuses on a pageAurora: Enable languages in your community
From Designer, you can define which languages are used in your community. You can also set which language to use by default. English is set as the default language for all new communities. Note: At this time, the available languages are English, Spanish, French, and Japanese. More languages will be added in a future release. To enable additional languages in your community: Open the Account menu and go to Designer > Community Text. In the row of Enabled languages, click Edit. Use the Add language drop-down menu to select languages you want to be available in your community. Enabled languages list above the Add language menu. Click Remove beside a language in that list to remove languages you no longer need. (Optional) If you want to set a language other than English as the default, in the row of that language in the Enabled languages list, click Set as Default. Click Save.Aurora: Create and arrange sections in a page template
The Page Templates builder enables you to create and arrange sections within your page templates, which provide a location for widgets to be assigned within the page. Sections can be static or dynamic, giving you the power to create, organize, and reorganize them as needed. Sections are essentially display shelves for widgets that you want to appear on pages assigned to the page template. Create a new page section Change the display order of sections Remove sections from a page template Configure page sections Configure section options Layout Title and Description Background Color Background Image Background Image Appearance Some page templates include widgets that provide the core content needed for that template to function as intended. To prevent these sections from being mistakenly edited or deleted, Aurora Designer automatically locks sections that contain the following content widgets: Blog Post content Knowledge Base Article content Forum Discussion content Idea content Event content This means that for Blog content and Event content: The section cannot be edited or deleted. The main content widget cannot be deleted. Widgets cannot be added, edited, or removed from the section. The widget type cannot be changed. Widgets cannot be moved in or out of the section. And for Forum, Knowledge Base, and Idea content: The section cannot be deleted. The main content widget cannot be deleted. Widgets cannot be moved in or out of the section. (However, the widgets can be moved within the section.) For example, here we see that there are no configuration options for the Blog post section (bottom right in image) but we still have partial control over the Knowledge Base article widget (top left in image) and complete control over the Related Content widget. Create a new page section On any page template, you can add a new section to a page in two ways: Click Add sectionin thePage Overview panel on the left. Click Add section(plus icon) within the preview of the page template content. Change the display order of sections You can reorder sections of the page template from the Page Overview. Just drag and drop the listed sections using the dotted, vertical lines to the left of each section. You can also move an item up or down one level by clickingUpand Down(arrow icons)located in the toolbar to the left of each section. Remove sections from a page template You can remove sections from the page by clickingDelete (trash can icon) located in the toolbar to the left of each section. Note: Deleting a section removes the section and any widget(s) contained within. Any widgets that were in that section need to be recreated elsewhere. Configure page sections Each section comes with its own set of options that you can configure using the Edit Section panel. You can access the configuration panel in two ways: Click the section in the Page Overviewpanel. ClickSettings(gear icon) beside the desired section in the page preview. Configure section options Each section has a series of configuration options available. After changes are made in the Edit Section panel, you can save them by clicking Save and Publish button in the upper-right corner of the page template. You can configure the layout, title and description, background colors, and background images. Layout The Layout options enable you to add columns to your section so you can place widgets in 1-, 2-, or 3-column layouts. In addition to an equal-width 2-column layout, you can also instead select one with a wider right or left column. Title and Description The Title and Description of the section is optional.If theVisible only to screen readersis not turned on, the title and description appear in the community. If thetoggle is active, the title remains hidden from most visitors; however, it is still relayed to visitors using screen readers. When the Visible only to screen readers option is not turned on, the color picker andtext alignmentoptions can be designated for the Title and Description. Background Color Each section can have its own background color. The colors available are determined in the community's theme. A transparent background uses the page's background color. 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. Changing the background color of a section can change the way widgets inside the section look. It can add a colorful pop to your content or provide a subtle difference in shades that make it easier to tell sections apart. Background Image You can add aBackground Imageto the background of the section. It is displayed over the background color. To upload a new background image: Click Add(plus icon). Click Upload Image and choose a PNG, JPEG, or SVG file from your local drive to upload. Alternatively, clickSearch for an Image. After you have selected an image file, you are presented with a series of options. Background Image Appearance After you have selected a background image, you can refine how it appears using the Background Image Appearance options. The Size of the image display can be set to Cover, Auto, or Contain. Cover: Fit the image to the section vertically. Auto: Automatically adjusts the image to fit in the background. Contain: Fit the image to the header section horizontally. The Position setting sets the general position of the background image as it relates to the header. Options include: Center Center Center Top Center Bottom Left Center Left Top Left Bottom Right Center Right Top Right Bottom If your background image is meant to tile (continuously repeat), you can use the Repeat options to configure the behavior you want. Options include: No Repeat Repeat (tile) Repeat X (horizontally) Repeat Y (vertically) To edit or remove a background image: ClickEdit(pencil icon). ClickUpload ImageorSearch for an Imageto select a new image. ClickRemove Imageto delete the image from the background.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: Feature content, places, and idea statuses on a page
In many Aurora communities, people who are not admins and therefore have no access to Designer may need to edit featured content and featured places on a particular page. With the Edit items in list widgets permission enabled for their associated role, a member can go right to the page where they want to add featured items and add content, places, or idea statuses using the Edit Featured Content, Edit Featured Places, Edit Featured Idea Statuses, or Edit Featured Guidesbutton. By default, community members with the Group Owner or Group Curator role are granted the Edit items in list widgets permission. An admin must have first added the widget from Designer on a particular page template. From then on, members with the appropriate permissions can edit the featured items as desired at any time on the pages tied to that template. When admins add the widget in Designer, they can preview how it will look within the community using sample content. Because some pages in your community may benefit from different featured content, places, or idea statuses, the sample content added in Designer is not published to the community.You must go to the page in the community where you want to feature content, places, idea statuses, or guides and add them there. Featured content is decided on each individual instance of the widget. Note:Currently, there is no way to draw featured content, places, or idea statuses from a global source. Be sure to update the featured widget on every page where you place it. If you reset the layout of a page with a populated Featured widget or delete a section containing a populated Featured widget, that Featured widget is deleted from all other page templates on which it appears. If you attempt to reset or delete, you will receive a warning that also indicates all other places where the widget is located. Feature content Go to the page in the community where you want to feature content. Locate the Edit Featured Content area and select the button. In the Content field, search for content to add. You can then reorder the content by grabbing it with your cursor and dragging it to the desired location. Select Save to commit your changes and return to the page. Feature places Go to the page in the community where you want to feature places. Locate the Edit Featured Places area and select the button. In the Places field, search for places to add. You can then reorder a place by grabbing it with your cursor and dragging it to the desired location. Select Save to commit your changes and return to the page. Feature idea statuses Go to the Ideas Dashboard page in the community where you want to feature idea statuses. Locate the Edit Featured Idea Statuses area and select the button. Select Add Statusas many times as necessary to add the idea statuses you want to feature. (Optional) Reorder the statuses by grabbing them with your cursor and dragging them to the desired location. Select Save to commit your changes and return to the page. Feature Guides Go to the page in the community where you want to feature guides. Locate the Edit Featured Guides Contentarea and select the button. In the Edit Featured Guides window, search and select the guides you want to feature. Select Save to commit your changes and return to the page. The widget is added to the selected guide. Note: To edit any existing widgets on your community pages, select the pencil icon next to them. For example, see the Featured Guides widget below: Related topics: Configure the Featured Content widget Configure the Featured Places widget Configure the Featured Idea Statuses widget Using Featured Guides widget Permission descriptions About roles and permissionsAurora: Featured Places widget configuration
The Featured Places widget displays a list of places (KBs, forums, blogs, ideas boards, and/or event boards) in the community that you choose to feature. You can configure it to focus on top-level boards only or to present sub-places within those communities as nested items. If you reset the layout of a page with a populated Featured widget or delete a section containing a populated Featured widget, that Featured widget is deleted from all other page templates on which it appears. If you attempt to reset or delete, you will receive a warning that also indicates all other places where the widget is located. Layout There are 2 layouts available for the Featured Places widget: List and Card. List style The List layout creates a vertical list of places, enabling members to identify and navigate to parts of your community quickly. Line items can include avatar images as well as descriptions, post totals, and more. There are 3 list styles available in the List layout: The Space list style divides items in the list using a blank space rather than a solid visual divider. The Divide list style adds a solid horizontal line between line items. The Border list style separates items in the list into separate sections. Card The Card layout showcases each place in a card and includes an expansion feature that opens an additional panel with any sub-places under each item. Cards can be configured by their Card Size and Card text alignment: The Card Size setting changes the overall size of the avatar and text so that it takes up more horizontal room in the card. You can choose between Medium and Large content sizes. The Card text alignment setting aligns text within each card. Aligning text to either the Left or Right places the text so that it hugs the side of the card; however, the avatar image (if selected) will center itself above the text. Configuration options Title You can enter a title for the widget to display at the top of the widget. If the Visible only to screen readers toggle is on, the title is relayed only through screen readers. Edit Sample Featured Places Click Edit Sample Content to open a window where you can select sample places to preview how the widget will look in the community. In the Places field, search for a place to add. You can then reorder a place by grabbing it with your cursor and dragging it to the desired location. Note: The sample places you select here will not be saved and published to the community. You must add the actual place you want to feature on the desired page in the community. There is no global source for adding places that would apply it to every instance of the widget. See Feature content, places, and idea statuses on a page. Click Previewto return to editing the widget. List item/Card elements List item elementsand Card elementsdetermine what information is included for each item in the widget. Turning off or on the toggles hides or shows the elements. List item/card element options include: Avatar (Card only): The place’s image. Description: The place’s description. Post count: The total number of posts in the place. Unread post count: The number of unread posts in the place. Most recent activity timestamp: The timestamp of the latest activity (in days) in the place. Lock Icon (Closed, hidden, and read only) (List only) Expand category children (Card only): An expandable section at the bottom of the card so you can view the category children. The Lead with drop-down menu in the List layout sets which element appears first in the widget for each item. The Max lines of description text slider available for both List and Card layouts sets the number of lines of description text to display for each item in the widget. Number of places The Number of places slider sets the number of places that appear in the widget before the Show More link appears. The List layout includes a slider for the Number of category children. If the value of this slider is greater than 0, child places are displayed as nested objects under the parent. More options Additional options are available in the More options section: The Include "Show More" Links toggle turns on the Show More feature if the number of places exceeds the value of the Number of places slider. The Optimize page-load time toggle turns on the lazy loader, which loads images as the member scrolls down the page, shortening the initial page load time. Related topics: Feature content, places, and idea statuses on a pageAurora: Featured Content widget configuration
The Featured Content widget displays posts from blogs, knowledge bases, forums, and/or ideas boards within your community that you choose to feature. If you reset the layout of a page with a populated Featured widget or delete a section containing a populated Featured widget, that Featured widget is deleted from all other page templates on which it appears. If you attempt to reset or delete, you will receive a warning that also indicates all other places where the widget is located. Layout The Featured Content widget includes three layout styles: Detailed List, List, and Card. From the Edit Widget panel, select any of these three options to change the layout. Each layout has its own set of unique options, which are explained in List Item/Card Elements. Detailed List The Detailed List layout features a smaller thumbnail accompanied by the item's title, various elements, and a preview of its content. List The List layout gives you a simple, minimalistic view of the items featured in the widget. You can see the title as well as any elements toggled on in the List Item Elements area of the Edit Widget panel. Card The Card layout showcases the item's image, providing a visually appealing summary of your featured content. Configuration Options List Style There are 3 available options in the List style section for the Detailed List and List layouts: Space: Uses whitespace to create space between items. Divide: Adds a horizontal line to divide items. Border: Creates a border that separates items into individual boxes. Title Enter a title to appear at the top of the widget. If the Visible only to screen readers toggle is on, the title is relayed only through screen readers. Edit Sample Featured Content Click Edit Sample Content to open a window where you can select sample content to preview how the widget will look in the community. In the Content field, search for sample content to add to the preview. You can then reorder the content by grabbing it with your cursor and dragging it to the desired location. Note: The sample content you select here will not be saved and published to the community. You must add the actual content you want to feature on the desired page in the community. There is no global source for adding content that would apply it to every instance of the widget. See Feature content, places, and idea statuses on a page. Click Previewto return to editing the widget. Number of Items The Number of Items slider gives you control over the number of items displayed on the initial page load before the Show More option appears. List Item/Card Elements List item elementsandCard elementsdetermine what information is included for each item in the widget. Turning off or on the toggles hides or shows the elements. These elements include: Author: The author's name. Author Rank: The rank of the author. Body preview/teaser: Preview text for the content. Media Preview: A preview of any media included in the content. Like/Vote Count: A total number of likes or votes the content has received. Reply Count: The number of replies to the content. Tags: Any tag(s) associated with the content. Timestamp: The time and date the content was published. Place:The category or board of the content. View count: The total number of views the content has received. Solved Badge (Discussions only): A badge indicating whether the content has been marked solved. Time to Read (Blogs only): An indicator of the length of time the average person will take to read the content. Unread Messages Indicator: (DetailedList) The total number of unread posts or comments on the content (for example, "1 unread"). Centered Card Content: (Card) Center text on the card. The Lead with drop-down menu lets you display the item author's Avatar, discussion style Icon, or None, along with the item in the widget. More options Additional options are available at the bottom of the Edit Widget panel: Include "Show More" Link adds a link to the bottom of the widget to enable visitors to display additional items once the Number of items has been reached. Optimize page-load time uses lazy loading to load images as the member scrolls down the page. Related topics: Feature content, places, and idea statuses on a pageAurora: 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: 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.
