Customize the Banner - HL Vanilla Community
<main> <article class="userContent"> <p>The <strong>Banner </strong>is a component of <strong>Foundation </strong>themes. It typically includes a banner image or coloured background, a title, description, and search bar.</p><p> An example is shown below:</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/KXR1I7H3E12A/banner-example.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/KXR1I7H3E12A/banner-example.png" alt="banner_example.png" height="594" width="1242" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="where-does-the-banner-display">Where does the banner display?</h2><p>The Banner displays on the following pages:</p><ul><li>Recent Discussions</li><li>Categories</li><li>Sub level categories</li><li>My Bookmarks</li><li>My Discussions</li><li>My Drafts</li><li>Unanswered (if using Q&A feature)</li><li>Knowledge Base main page (if using the KB feature)</li></ul><p><strong>📝 NOTE</strong>: Refer to the <strong>Within Category pages</strong> section below to learn how to set different banners for specific child Category pages.</p><h2 data-id="customize-banner-aesthetics">Customize Banner aesthetics </h2><p>You can customize the Banner's visual aesthetics in the Dashboard.</p><ol><li>Navigate to and edit your community theme to access the Theme Editor.</li><li>Click the Banner in the preview or select <strong>BANNER </strong>from the dropdown in the right panel.</li></ol><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/9084DFJYOY9D/themeeditor-banner-options.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/9084DFJYOY9D/themeeditor-banner-options.png" alt="ThemeEditor_banner_options.png" height="724" width="1117" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>Let's look at each of the available customization options.</p><h2 data-id="banner-title">Banner Title </h2><p>Use the <strong>Text Color</strong> and <strong>Alignment</strong> options to control the text color and alignment of the Banner Title across your community.</p><p><strong>📝 NOTE</strong>: The <strong>Banner Title</strong> 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.</p><p><strong>📝 NOTE</strong>: For accessibility reasons, the Banner background color will automatically <em>lighten </em>or <em>darken </em>based on your chosen text color.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/HC1NVTDBDV9E/banner-title.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/HC1NVTDBDV9E/banner-title.png" alt="banner_title.png" height="375" width="1116" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="where-does-the-banner-title-and-description-populate-from">Where does the banner title and description populate from?</h3><p>Above, we mentioned that the <strong>Banner Title</strong> field is simply for preview purposes. So, where <em>does </em>the Banner Title populate from? What appears in the banner will depend on:</p><ul><li>what page the user is on, </li><li>what is populated in the Branding & SEO settings,</li><li>and whether you're using Subcommunities. </li></ul><h4 data-id="branding-seo">Branding & SEO</h4><p>The <strong>Homepage Title</strong> field is used for default Banners and is picked up by search engines.</p><p>On the <strong>Appearance > Branding & Assets > Branding & SEO</strong> page:</p><ul><li>If the Homepage Title field is <strong>blank</strong> (and Subcommunity settings, if applicable), the Banner's title will change <em>depending on the page a user views</em>. For example, the Discussions page title is 'Recent Discussions" and the Categories page title is "All Categories."</li><li>However, if you enter text in the <strong>Homepage Title</strong> field, it will override the text above. </li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/91WR4DDLAGHE/b-26a-banner-title.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/91WR4DDLAGHE/b-26a-banner-title.png" alt="B&A-banner_title.png" height="414" width="1020" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h4 data-id="category-pages">Category pages</h4><p>When users navigate to a Category page, the Banner displays the Category's <strong>title </strong>and <strong>description</strong>.</p><p>You can edit a Category's title and description in the Dashboard, on the <strong>Settings > Forum > Categories</strong> page. From there, select <strong>Edit </strong>from a Category's dropdown. </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/C70JTHPPGEXV/edit-category-title.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/C70JTHPPGEXV/edit-category-title.png" alt="edit_category_title.png" height="466" width="1054" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/6X0W4XYDK7FW/category-title-example.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/6X0W4XYDK7FW/category-title-example.png" alt="category_title_example.png" height="398" width="1048" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h4 data-id="subcommunities">Subcommunities</h4><p>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. </p><p>To edit the title and description of a subcommunity, you will need to edit the associated subcommunity's title and description. </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/Z4MH8PAS9RF6/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/Z4MH8PAS9RF6/image.png" alt="image.png" height="254" width="885" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/U9PIYZ8IPK0J/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/U9PIYZ8IPK0J/image.png" alt="image.png" height="206" width="848" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h4 data-id="additional-theme-variables-options">Additional theme variables options</h4><p>If you have technical resources, you can also use <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#banner" rel="nofollow noreferrer ugc">Theme Variables</a> to optionally update the Banner Title’s font and spacing. You can also use Theme Variables to hide the description, or title entirely.</p><h2 data-id="background">Background</h2><ul><li>You can set a <strong>background color</strong> which will update the out-of-the-box patterned background.</li><li>You can also upload an image to display as the background.</li><li>You can enable a color overlay to help with accessibility and readability.</li></ul><p><strong>🛑 IMPORTANT</strong>: 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.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/FT86WRCLLJ6A/banner-background-options.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/FT86WRCLLJ6A/banner-background-options.png" alt="banner_background_options.png" height="422" width="1252" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="color-overlay">Color Overlay</h3><p>You can choose to apply a cover overlay by checking the box. </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/MLYPO5UTAUIP/overlay-toggle.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/MLYPO5UTAUIP/overlay-toggle.gif" alt="User: "overlay-toggle.gif"" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>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: </p><h4 data-id="no-overlay">No overlay</h4><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/FONDEOZOVMQJ/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/FONDEOZOVMQJ/image.png" alt="User: "image.png"" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h4 data-id="with-overlay">With overlay </h4><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/6R01I6YLPRB1/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/6R01I6YLPRB1/image.png" alt="User: "image.png"" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="additional-theme-variables-options-1">Additional theme variables options</h3><p>If you have a technical resource, you can also use <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#banner" rel="nofollow noreferrer ugc">Theme Variables</a> to specify the background overlay color (black is default). </p><h2 data-id="category-banners">Category Banners</h2><p>To add Banner images to specific Categories:</p><ol><li>Navigate to the <strong>Settings > Forum > Categories</strong> page. </li><li>Select <strong>Edit </strong>from a Category's dropdown. </li><li>In the <strong>Banner Image</strong> field, click Browse and follow the prompts to add your image.</li></ol><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/MTLGBBIUYN48/add-category-image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/MTLGBBIUYN48/add-category-image.png" alt="add_category_image.png" height="467" width="748" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <p><strong>✔️ TIP</strong>: Use the <strong>Icon</strong> 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.</p><p><strong>✔️ TIP</strong>: The recommended size for Category Banner images <strong>1000x400 (2.5:1)</strong>.</p><h2 data-id="knowledge-base-banners">Knowledge Base Banners</h2><p>Similarly, you can add banner images (and icon images) for each Knowledge Base you create in the Knowledge Bases section of your Dashboard:</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/YUZS4AV2ZYWV/screen-shot-2020-11-24-at-3-06-04-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/YUZS4AV2ZYWV/screen-shot-2020-11-24-at-3-06-04-pm.png" alt="Screen Shot 2020-11-24 at 3.06.04 PM.png" height="744" width="1600" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>When creating or editing a Knowledge Base, add an image in the <strong>Banner Background Image</strong> and/or <strong>Icon</strong> fields.</p><h2 data-id="group-banners">Group Banners</h2><p>Group Banners are managed on the "front end" of the community, not in the Dashboard.</p><p>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 <strong>1164x200px (5.82:1)</strong></p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/K9X9CFXXUFH7/add-banner-to-group.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/K9X9CFXXUFH7/add-banner-to-group.png" alt="add_banner_to_group.png" height="629" width="896" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="additional-theme-variables-options-2">Additional theme variables options</h2><p>If you have a technical resource, you can use <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#banner" rel="nofollow noreferrer ugc">Theme Variables</a> to further customize the Banner background image, such as setting a position, repeat or setting the size. </p><p>You can also find settings to ignore the default background if you do not want the category banner image to override the default one. </p><h2 data-id="responsive-breakpoints">Responsive Breakpoints</h2><p>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.</p><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/QNTAVH8Q6BTD/responsive-breakpoints-toggle.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/QNTAVH8Q6BTD/responsive-breakpoints-toggle.png" alt="responsive_breakpoints_toggle.png" height="584" width="567" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <p>Check out the article below to learn more:</p><div class="js-embed embedResponsive" data-embedjson="{"body":"Within the new Foundation theming system, the theme banner and content banner can have different responsive breakpoints. It means that you can upload different size images for your mobile, tablet and desktop banner. There is a toggle on the new Theming System that can be turn on. Turning on, you can upload images for…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/213-responsive-breakpoints","embedType":"link","name":"Responsive breakpoints - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/213-responsive-breakpoints" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/213-responsive-breakpoints </a> </div><h2 data-id="search">Search </h2><p>The Banner includes a <strong>search field</strong>, making it easy for your users to find content. It's customizable in the <strong>BANNER </strong>section of the Theme Editor.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/I5Q4Z2UQLA3W/search-field.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/I5Q4Z2UQLA3W/search-field.png" alt="search_field.png" height="752" width="1164" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="preset-(search-border)">Preset (Search border)</h3><p>You can set the search bar to have:</p><ul><li>no border</li><li>regular border</li><li>unified border</li></ul><h3 data-id="button-type">Button Type</h3><p>You can set the button type to:</p><ul><li>Solid</li><li>Transparent </li><li>Hidden</li></ul><h3 data-id="background-1">Background</h3><p>Sets the background color of the <strong>search button</strong>.</p><h3 data-id="text">Text</h3><p>You can set the default color for the <strong>search text</strong> here. </p><h3 data-id="border-radius">Border Radius </h3><p>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). </p><p><strong>Border Radius of 0</strong></p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/9S6Z6KHWCTSV/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/9S6Z6KHWCTSV/image.png" alt="image.png" height="107" width="534" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><strong>Border Radius of 10</strong></p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/W9J4XMCGAFLP/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/W9J4XMCGAFLP/image.png" alt="image.png" height="122" width="515" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><strong>Border Radius of 25</strong></p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/DKOZKCUVF2M5/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/DKOZKCUVF2M5/image.png" alt="image.png" height="106" width="535" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="advanced-theming-options">Advanced Theming Options </h2><p>If you have a technical resource, you can use <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#banner" rel="nofollow noreferrer ugc">theme variables</a> to further customize the Banner component of your Foundation theme. </p><p>You will find options to customize: </p><p><strong>Banner Title </strong></p><ul><li>Font & other font options</li><li>Alignment </li><li>Spacing</li><li>Set a custom URL for the title </li></ul><p><strong>Banner Description</strong></p><ul><li>Font & other font options</li><li>Spacing</li></ul><p><strong>Banner Options </strong></p><ul><li>Enable/disable banner entirely</li><li>Hide the Banner description, search bar, or title</li><li>Customize banner spacing</li></ul><p><strong>Banner Background</strong></p><ul><li>Overlay color</li></ul><p><strong>SearchBar Options </strong></p><ul><li>Change search bar alignment </li><li>Sizing options</li></ul><p>If you set "banner.options.searchPlacement" : "bottom" in the theme variables, you will notice a new component that inherits the Global Styles Brand Color: </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/BJLOAL2SRUFD/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/BJLOAL2SRUFD/image.png" alt="image.png" height="183" width="822" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>If this option is selected, you can customize this component further by editing the theme variables for the “Search Strip “.</p> </article> </main>