The Content Banner is an optional component of the Foundation theme. Once enabled, it will display on pages that contain content, such as community posts (including discussions, ideas, questions, polls, and events) and knowledge base articles.
📝 NOTE: To learn more about the main "site" banner that appears on the Home page and Category pages, check out the Banner article.
Enable & edit the Content Banner
1. Access the Theme Editor.
2. Select Content Banner from the Styles menu.
3. Click the Content Banner toggle to enable it. You'll notice a banner displays in the preview area to the left.
4. Use the remaining options (explained below) to configure the Content Banner. Be sure to click Save at the top right of the page when you're finished.
Content Banner options
Let's learn about each of the options you can use to customize your Content Banner.
- Height: Use these two options to set the height of the Content Banner for desktop and mobile individually.
- Background: For the Content Banner’s background, you can set a color or an image.
📝 NOTE: If using an image, be mindful of how it will work with your height settings, as well as how it will look on a variety of screen sizes.
📝 NOTE: Even if you set a color in the Theme Editor, it will be overridden by any Banner image you have set in the Branding & SEO settings, or if you have a banner set for a particular Subcommunity or Category.
- Cover 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. 📝 NOTE: Refer to the Color Overlay example below to see this option in action.
- Responsive breakpoints: If using an image that may not be suitable for all screen sizes, you can upload specific images for desktop, tablet, and mobile to ensure an excellent experience across devices. See Responsive Breakpoints for learn more.
- Logo: You can also choose to add a logo to the Content Banner, and decide if it should be center- or left-aligned. This logo is fairly small, so as not to overwhelm the Content Banner itself.
Color Overlay example
No overlay
With overlay
