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:
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 the URL 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 the URL 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:
