The Banner is a component of Foundation themes. It typically includes a banner image or coloured background, a title, description, and search bar.
An example is shown below:
Where does the banner display?
The Banner displays on the following pages:
- Recent Discussions
- Categories
- Sub level categories
- My Bookmarks
- My Discussions
- My Drafts
- Unanswered (if using Q&A feature)
- Knowledge Base main page (if using the KB feature)
📝 NOTE: Refer to the Within Category pages section below to learn how to set different banners for specific child Category pages.
Customize Banner aesthetics
You can customize the Banner's visual aesthetics in the Dashboard.
- Navigate to and edit your community theme to access the Theme Editor.
- Click the Banner in the preview or select BANNER from the dropdown in the right panel.
Let's look at each of the available customization options.
Banner Title
Use the Text Color and Alignment options to control the text color and alignment of the Banner Title across your community.
📝 NOTE: The Banner Title field is simply used as an example for the theme preview to the left so you can better customize it. Typically, a Banner's title is based on the page a user is viewing.
📝 NOTE: For accessibility reasons, the Banner background color will automatically lighten or darken based on your chosen text color.
Where does the banner title and description populate from?
Above, we mentioned that the Banner Title field is simply for preview purposes. So, where does the Banner Title populate from? What appears in the banner will depend on:
- what page the user is on,
- what is populated in the Branding & SEO settings,
- and whether you're using Subcommunities.
Branding & SEO
The Homepage Title field is used for default Banners and is picked up by search engines.
On the Appearance > Branding & Assets > Branding & SEO page:
- If the Homepage Title field is blank (and Subcommunity settings, if applicable), the Banner's title will change depending on the page a user views. For example, the Discussions page title is 'Recent Discussions" and the Categories page title is "All Categories."
- However, if you enter text in the Homepage Title field, it will override the text above.
Category pages
When users navigate to a Category page, the Banner displays the Category's title and description.
You can edit a Category's title and description in the Dashboard, on the Settings > Forum > Categories page. From there, select Edit from a Category's dropdown.
Subcommunities
If your community uses subcommunities, the branding settings will be ignored and the title and description will come from the active subcommunity’s associate Category settings.
To edit the title and description of a subcommunity, you will need to edit the associated subcommunity's title and description.
Additional theme variables options
If you have technical resources, you can also use Theme Variables to optionally update the Banner Title’s font and spacing. You can also use Theme Variables to hide the description, or title entirely.
Background
- You can set a background color which will update the out-of-the-box patterned background.
- You can also upload an image to display as the background.
- You can enable a color overlay to help with accessibility and readability.
🛑 IMPORTANT: The Background color will be overridden if you've set a Banner image in the Branding & SEO settings, or if you have a Banner set for a particular subcommunity or Category.
Color Overlay
You can choose to apply a cover overlay by checking the box.
This option is particularly useful if you have an image with a lot of color variation that can make it difficult to read the text. For example:
No overlay
With overlay
Additional theme variables options
If you have a technical resource, you can also use Theme Variables to specify the background overlay color (black is default).
Category Banners
To add Banner images to specific Categories:
- Navigate to the Settings > Forum > Categories page.
- Select Edit from a Category's dropdown.
- In the Banner Image field, click Browse and follow the prompts to add your image.
✔️ TIP: Use the Icon option to add small icon images to display beside the Category name on the main Categories page and as the icon on a Category Tile when featured.
✔️ TIP: The recommended size for Category Banner images 1000x400 (2.5:1).
Knowledge Base Banners
Similarly, you can add banner images (and icon images) for each Knowledge Base you create in the Knowledge Bases section of your Dashboard:
When creating or editing a Knowledge Base, add an image in the Banner Background Image and/or Icon fields.
Group Banners
Group Banners are managed on the "front end" of the community, not in the Dashboard.
When creating or editing a Group, you will see the option to add a Banner (as well as an icon). The recommended image size for Group Banners is 1164x200px (5.82:1)
Additional theme variables options
If you have a technical resource, you can use Theme Variables to further customize the Banner background image, such as setting a position, repeat or setting the size.
You can also find settings to ignore the default background if you do not want the category banner image to override the default one.
Responsive Breakpoints
Desktops, tablets, and mobile devices have different screen sizes, so it's important that your images adapt to look as good as possible on each type of device. To ensure a clean look, you can upload different-sized images for when your Banners display on desktops, tablets, and mobile devices.
Check out the article below to learn more:
Search
The Banner includes a search field, making it easy for your users to find content. It's customizable in the BANNER section of the Theme Editor.
Preset (Search border)
You can set the search bar to have:
- no border
- regular border
- unified border
Button Type
You can set the button type to:
Background
Sets the background color of the search button.
Text
You can set the default color for the search text here.
Border Radius
You can set the border radius (how rounded the corners should be) for the Search Component (0 will be square while higher numbers will be more rounded).
Border Radius of 0
Border Radius of 10
Border Radius of 25
Advanced Theming Options
If you have a technical resource, you can use theme variables to further customize the Banner component of your Foundation theme.
You will find options to customize:
Banner Title
- Font & other font options
- Alignment
- Spacing
- Set a custom URL for the title
Banner Description
- Font & other font options
- Spacing
Banner Options
- Enable/disable banner entirely
- Hide the Banner description, search bar, or title
- Customize banner spacing
Banner Background
SearchBar Options
- Change search bar alignment
- Sizing options
If you set "banner.options.searchPlacement" : "bottom" in the theme variables, you will notice a new component that inherits the Global Styles Brand Color:
If this option is selected, you can customize this component further by editing the theme variables for the “Search Strip “.
