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 WidgetsAbout Aurora Page Templates
Designer provides many page templates you can use and customize to fit the needs of your community. Many of these fall into similar categories and therefore have similar widgets and out-of-the-box designs. Some are a bit more complex and apply to the community globally. Below is an index and description of these categories and individual page templates. While there are many page templates and widgets to choose from, much of the functionality is repeated throughout Designer. For more information on this functionality, see the following articles: Using Page Templates Create and arrange sections in a Page Template Getting Started with Widgets Community Home template The Community Home page template applies only to the homepage of your community. On this template, you can add any widgets you want members to see on the very first page they land on in the community. Commonly added widgets are: Recent Content Places Top Contributors Top Content Header & Footer template The global Header & Footer template is unique in that it applies across your entire community. It contains the site header—composed of the navigation bar, the breadcrumb trail, and the banner—and the site footer. For more information, see Header & Footer Configuration. Container Dashboard templates Container dashboard templates define how higher-level place landing pages appear to members of the community. The following dashboard templates fall into this category: Category Dashboard Group Dashboard These templates enable you to provide a look into what’s available to members of that container to read, follow, and comment on. Commonly added widgets are: Recent Content Category Information or Group Information Members Top Contributors Top Content Content Type Dashboard templates Content type dashboard templates define how content type landing pages appear to members of the community. The following dashboard templates fall into this category: Forum Dashboard Blog Dashboard Knowledge Base Dashboard Ideas Dashboard Event Dashboard These templates enable you to provide a look at what’s going on in a board (forum, blog, knowledge base, events board, ideas board). Commonly added widgets are: Recent Discussions or Recent Content Forum Information, Blog Information, Knowledge Base Information, Event Board Information, or Ideas Board Information Top Content Top Contributors Content type-specific widgets are not available on a different content type’s dashboard template. For instance, you cannot add a Recent Discussions widget to a Knowledge Base Dashboard or an Ideas widget to a Blog Dashboard. Content post templates Content post templates define how a particular piece of content looks to members. The following templates fall into this category: Forum Discussion Blog Post Knowledge Base Article Idea Event These page templates come out of the box with widgets that cannot be deleted because they contain the body of a top-level discussion, post, article, or idea or because they contain a space for commenting on a discussion, post, article, or idea. However, you can add other widgets to these templates. Commonly added widgets are: Featured Content Related Content Recent Discussions Content type-specific widgets are not available on a different content type’s post template. For instance, you cannot add a Recent Discussions widget to a Knowledge Base Article template. Member Profile template The Member Profile page template applies only to the Member Profile, which is what members see when they click another member’s username in the community. On this template, you can add any widgets you want that give information about the member being highlighted. This template comes out of the box with a member information widget that cannot be deleted. This widget contains the member’s username, rank, email address, join date, number of contributions, and number of likes. You can add other widgets to this template. Commonly added widgets are: Contributions Top Contributions Groups Featured Content Related topics: About Community site structure About Categories About Groups About Blogs About Forums About Knowledge Bases About Ideas About Events Refer to the Build Khoros Communities course for training on site design.Aurora: Header and Footer configuration
The global Header & Footer page template is a bit different from some of the other page templates because it’s applied across the entire community. It enables you to style the top and bottom portions of your community site pages for a cohesive experience. As with other page templates, you can reorder widgets within both the Header and Footer sections. See Create and arrange sections in a Page Template. Header You can adjust settings for the entire Header section and/or for the widgets that make up the Header. Header settings For the overall Header page template, you can adjust these settings: The Background color selector applies your selected background color to the entire Header page template (behind the widgets). The colors available here have been set in your community's theme. 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. The Background image feature enables you to upload a background image for the entire Header page template (behind the widgets) and configure how it is aligned and displayed. The Background image appearance enables you to adjust 3 different settings for the image selected for the Header page template: Size: Choose from among Auto, Contain, and Cover. Position: Choose an option with a combined alignment of center, left, or right and bottom, center, or top. Repeat: Choose from among No repeat, Repeat, Repeat X, and Repeat Y. Note: Background color and image are visible through transparent widgets. For example, in the screenshot below, an image was chosen for the overall Header, and the gray background color chosen for the Banner widget was set to 51% opacity. Therefore, the Header image is showing through the selected Banner color. Out of the box, the page header is made up of three customizable widgets: Navigation widget Breadcrumb widget Banner widget Designer enables you to add more widgets to the Header if desired—click Add widget (plus icon) and select a widget. Customize as desired. Refer to Getting Started with Widgets to see a list of the widgets you can use. Navigation widget configuration The Navigation widget is the portion of the Header page template that contains links to navigate your community. Use the following settings to adjust this widget to your specifications. Note: The Navigation widget cannot be adjusted on any other page templates. Navigation links Navigation links in the Aurora Navigation widget are entirely customizable. You can add and arrange links next to the logo in the header or in the side menu. Create a text link Text links are the links that appear in the body of the navigation bar to the right of your logo. Note: If you want to add any community pages that are outside of your community structure (such as the Groups home page) to the navigation, you can follow the procedure for adding an external link. Enter the URL for the page in theURL field. Create a side menu link Side menu links appear when a community member opens the side menu. This enables you to maintain a clean navigation bar in cases where you have too many menu options to display at once. Note: If you want to add any community pages that are outside of your community structure (such as the Groups home page) to the side menu navigation, you can follow the procedure for adding an external link. Enter the URL for the page in theURL field. Change link highlight style You can adjust the highlight styling, color, font, and alignment of links in your navigation bar using these tools available in the editor. The Link highlight style area of the menu focuses on the method by which links are highlighted as you move your cursor over them. The 3 available options are: Color: When you hover your cursor over a link, the color of the link changes. The specific color is defined in the area below the Link highlight style and depends on whether you have visited the link previously. Underline: When you hover your cursor over a link, the link is also underlined in a color defined below the Link highlight style. Background: When you hover your cursor over a link, the background of the link changes to a color defined below the Link highlight style. Link and icon colors There are 4 color options for the navigation bar you can adjust. These include: Link color: The color of the link label when it is not highlighted. Link highlight: The color of the link label when it is highlighted. Icon color: The color of any icons that appear in the navigation bar. Unread highlight: The color used to highlight a link that has not yet been visited by the member. The color drop-down menu doesn't just display the currently configured color for the item—it also indicates whether or not a selected color meets accessibility rules for the community. If you adjust the highlight style or color setting in a way that doesn't meet the rules, a caution icon appears over the color indicator. Additionally, 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. Link style and alignment In this area, you can adjust the size, style, and alignment of the text links in your navigation bar. Font size: Use the slider to adjust the size of the font of the links. Font weight/style: Use the Style drop-down menu to adjust the style of the font of the links: Light, Regular, Medium, Bold, Italic. Alignment: Select from left, center, or right alignment for link placement on the navigation bar. Logo height The Logo height slider changes the amount of vertical space (in pixels) that the logo is given in the navigation bar. Mobile devices and other small viewports may display a smaller value than the one set here when space is limited. Other elements The following settings enable you to show or hide additional elements on the navigation widget: Language picker: (for Localized Communities only) The drop-down menu that enables community members to switch between your enabled languages. With the Style drop-down menu, you can also indicate whether you want to show the Icon, the Label, or the Icon and Label. Search icon: The magnifying glass icon that gives members access to the community's search functionality. Register link: If an unauthenticated or unregistered user is on the site, they can access the registration link to create an account. Username: Username of the currently authenticated member next to their avatar in the navigation bar. Background color and image You can set a background color or add a background image to your navigation bar using these options. The Background color selector applies your selected background color to the navigation bar and any drop-down menus that appear from it. The colors available here have been set in your community's theme. 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. The Background image feature enables you to upload a background image for the navigation bar and configure how it is aligned and displayed. The Background image appearance enables you to adjust 3 different settings: Size: Choose from among Auto, Contain, and Cover. Position: Choose an option with a combined alignment of center, left, or right and bottom, center, or top. Repeat: Choose from among No repeat, Repeat, Repeat X, and Repeat Y. The Background opacity option lets you set the percentage of opacity in the image you’ve uploaded. Visual effects The Visual effects settings enable you to turn on or off visual elements for the navigation widget: Fixed position on page scroll: Fix the navigation bar into position at the top of the page as you scroll down. Show bottom border: Show a small border at the bottom of the navigation bar to separate it from other page elements. Show bottom shadow: Add a drop-shadow effect to the bottom of the navigation bar. Boundary padding The Boundary padding settings add padding to the top and/or bottom of the navigation bar. The first number field enables you to set the amount of vertical padding (in pixels) above the logo. The second field enables you to set the vertical padding (in pixels) below the logo. Breadcrumb widget configuration The Breadcrumb widget is the portion of the Header page template that shows the member where they are in the community, especially within the hierarchy of parent and child places. Note: The Breadcrumb widget cannot be adjusted on any other page templates. Link color and highlight You can adjust the color of the breadcrumb links and icons: Link and icon color: The color of the links and icons when they are not highlighted. Link highlight: The color of the link label when it is highlighted. Background color You can set a background color for your Breadcrumb widget using these options. The Background color selector applies your selected background color to the breadcrumbs. The colors available here have been set in your community's theme. 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. The Background opacity option lets you set the percentage of opacity in the image you’ve uploaded. Visual effects The Visual effects settings enable you to turn on or off visual elements for the navigation widget. For the breadcrumb bar, the only visual effect option is Show bottom border, which adds a small border to the bottom of the breadcrumb bar to separate it from other page elements. Banner widget configuration The Banner portion of the Header page template contains the title of the page as well as any descriptive text you’ve included for a particular page. Note: You can override the settings of the banner in the page header on individual page templates outside of the Header & Footer template. If you make changes to the banner on another page template and you want to revert it to the default Header & Footer banner, you must reset the page template for that individual template. At that point, the global Header & Footer page template banner will appear on that page template. If you don’t reset the page layout after making changes to the banner, the banner will operate independently of the one on the Header & Footer template. Text colors Use the Text color drop-down menu to set the color for any text that may appear in the banner. The color drop-down menu doesn't just display the currently configured color for the item—it also indicates whether or not a selected color meets accessibility rules for the community. If you adjust the highlight style or color setting in a way that doesn't meet the rules, a caution icon appears over the color indicator. Additionally, 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. Background color and image You can set a background color or add a background image to your navigation bar using these options. The Background color selector applies your selected background color to the navigation bar and any drop-down menus that appear from it. The colors available here have been set in your community's theme. 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. The Background image feature enables you to upload a background image for the navigation bar and configure how it is aligned and displayed. The Background image appearance enables you to adjust 3 different settings: Size: Choose from among Auto, Contain, and Cover. Position: Choose an option with a combined alignment of center, left, or right and bottom, center, or top. Repeat: Choose from among No repeat, Repeat, Repeat X, and Repeat Y. The Background opacity option enables you to set the percentage of opacity in the image you’ve uploaded. Visual effects The Visual effects settings enable you to turn on or off visual elements for the navigation widget. For the banner, the only visual effect option is Show bottom border, which adds a small border to the bottom of the banner to separate it from other page elements. Footer You can adjust settings for the Footer section and/or for the widgets that make up the Footer. Out of the box, the Footer contains an uneditable widget with basic footer content (for example, some links to important areas in the community, Powered by Khoros information, etc). This widget is intended as a placeholder that you can delete and replace with your own footer content. You can adjust settings for the entire Footer section and/or for the widgets that make up the Footer. You can adjust the following settings for the overall Footer page template: The Background color selector applies your selected background color to the entire Footer page template (behind the widgets). The colors available here have been set in your community's theme. 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. The Background image feature enables you to upload a background image for the entire Footer page template (behind the widgets) and configure how it is aligned and displayed. The Background image appearance enables you to adjust 3 different settings for the image selected for the Footer page template: Size: Choose from among Auto, Contain, and Cover. Position: Choose an option with a combined alignment of center, left, or right and bottom, center, or top. Repeat: Choose from among No repeat, Repeat, Repeat X, and Repeat Y. Other widgets You can also add custom or Text/HTML widgets to the Header & Footer. In these cases, several options are available. All options described in Custom widget configuration and Text/HTML widget configuration are available with the addition of two more options under More options: Use width of page content: Sets the widget as wide as the page content only rather than as wide as the browser window. Remove widget wrapper: Removes the default padding around the widget. Related topics: About Page Templates Using Page Templates Create and arrange sections in a Page Template Getting Started with Widgets Override the global banner on page templatesAbout 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: Text/HTML widget configuration
The Text/HTML widget enables you to create custom content blocks on most page templates. These widgets can be filled with formatted text or HTML. Not only can you use this widget for the currently selectedpage template, but each Text/HTML widget is saved in a library so that you can assign it to any other page template you edit. Add a Text/HTML widget: Configure the Text/HTML widget Add a Text/HTML widget: Click Add widget (plus icon)where you want to add the widget. In the Add Widget panel, click Text/HTML. ClickAdd Widget. Add your custom text using the content editor or add HTML source code by clicking More...(... icon)and then the Source code (< > icon) in the editor's toolbar. Enter a Widget name that will be used to identify the widget from the Widget Library (Optional) Enter a Widget description to add more information for the widget in the Widget Library. Click Save. Configure the Text/HTML widget as described in the section below. Configure the Text/HTML widget You can configure the following options: Widget Title: The title that appears at the top of the widget. Visible only to screen readers: When this option is active, the title will remain hidden from most visitors; however, the title information is still relayed to visitors using screen readers. Remove widget background: When this option is active, the background of the widget is hidden so that the section background shows through. Visible To: Use the drop-down menu to indicate whether the widget should be displayed to All Users, Signed-in users, or Non-signed-in users. Optimize page-load time: When this option is active,images load as the member scrolls down the page. Edit Widget Content: Click this to return to the content editor for the widget. Related topics: Custom widget configuration Developer Docs: Introduction to Handlebars ComponentsGetting Started with Aurora Widgets
Widgets enable you to add specific components, such as a list of top contributors or featured content, to the sections you add to a page template. Aurora provides many out-of-the-box widgets that you can use when designing your site. Widgets are typically sorted into Content, People, and Placescategories, with the exception of the Text/HTML widget. Not all widgets can be added to all page templates; some may be available only on the Group Dashboard page template, like the Members widget, for example. For details about each widget and what it supports, refer to the article for that widget. Many of the widgets have similar layout and configuration options. For instance, all widgets enable you to rename them to fit the needs of your community. Read each widget’s article to learn more about specific options. Content People Places Other Content Content widgets enable you to display links to content (blog posts, knowledge base articles, forum discussions, and ideas) on the page template. Recent Content Top Content Related Content Featured Content Tags Top Contributions Ideas Featured Idea Statuses Suggest an Idea Contributions Events People People widgets enable you to display lists of community members on the page template. Top Contributors Members Places Place widgets enable you to display links to specific places (groups, blogs, knowledge bases, forums, idea boards, and event boards) in the community on the page template. Places Featured Places Category Information Forum Information Blog Information KB Information Ideas Board Information Event Board Information Group Information Boards Groups Other Text/HTML CustomAurora: 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: 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: 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.Aurora: Override the global banner on page templates
Thepage banner sits at the top of each page template under the navigation bar and breadcrumb trail. It provides visitors with introductory content for each page in your community. You can configure a site-wide page banner as described in Header and Footer Configuration, but you can also override the banner image on other page templates. Note: The navigation bar and breadcrumb trail can be edited only in the Header & Footer page template and cannot be customized per template. The page bannerhas several options but has a fixed location on the page.These options include visual style, content width, content alignment, the search field, statistical data, background configuration, visual effects, and even boundary padding. Visual style Content width Content alignment Title and Description Banner elements Background color Background image and appearance Visual effects Boundary padding Reset banner to Header & Footer template banner Visual style Not every page template needs to include a large header. For some page templates, a small, simple text header is sufficient. The Visual style area gives you a choice amongLarge, Medium, and Small layouts. The Large visual style gives your content and search field the most room to shine. It features a bold layout putting your title on top, followed by the description and search field. The Medium visual style is a bit more compact, separating the header's content and search field horizontally. The Small visual style optimizes the page's horizontal space. It loses the search field but keeps the title and description. Content width The Content width options give you control over the width of the content displayed in the header. The Wide content width setting lines your content up with the header, taking full advantage of the horizontal space. The Medium and Narrow options give your content a stylistic boundary, giving additional vertical body to your paragraphs and providing a visual appeal to the page to suit your needs. Content alignment The Content alignment option gives you control over the alignment of the text that appears in the header. Adjusting this setting will bring the text to the right, left, or center of the header. Title and Description With theTitle and Description, you can choose toShow both, show theTitle only,or showNone. If you choose to show the title, the text appears in the color selected in the Color Picker tool. When the text color and background color fail to meet accessibility standards, a red exclamation icon appears to let you know. Banner elements Toggle on or off the following options: Search field:Shows or hides the search field in the header (excluding the visual style of Small, which can never contain the search field). Member stats: Shows or hides the total number of members in the community and the total number of members that are currently online. Action button: Shows or hides the call-to-action button (on applicable page templates). When this option is turned on, you can also enter text in theButton labelfield. Background color You can choose a Background color using this tool. The colors available in the palette are determined by your community's Theme settings. You can add or customize the color palette in Theme. 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. Background image and appearance To have a background image appear instead of a solid background color, you can use the Background image tool. To add a new background image: Click Edit(pencil icon), and then click Upload image. Choose a PNG, JPEG, or SVG file from your local drive to upload. Instead, you can also search for an image from your existing image library using the Search for an image option. Set theBackground image appearance: Size 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. Position Center Center Center Top Center Bottom Left Center Left Top Left Bottom Right Center Right Top Right Bottom Repeat No Repeat Repeat (tile) Repeat X (horizontally) Repeat Y (vertically) Background opacity Visual effects Show bottom border, when toggled on, shows a horizontal border between the page banner and the next section on the page. Boundary padding The two Boundary padding fields set the boundary padding (in pixels) for the top and bottom of the header. Reset banner to Header & Footer template banner If you decide you no longer want to have a separate banner for your page template, you can reset it to the global banner. At the very bottom of theEdit Bannerpanel for any banner that has been changed from the global one, clickReset banner to Inherited Styles.
