Content Banner - HL Vanilla Community
<main> <article class="userContent"> <p>The <strong>Content Banner</strong> is an optional component of the <strong>Foundation theme</strong>. Once enabled, it will display on<strong> pages that contain content</strong>, such as <em>community posts</em> (including discussions, ideas, questions, polls, and events) and <em>knowledge base articles</em>. </p><p><strong>📝 NOTE</strong>: To learn more about the main "site" banner that appears on the Home page and Category pages, check out the <a href="https://success.vanillaforums.com/kb/articles/402-theme-editor-banner" rel="nofollow noreferrer ugc">Banner</a> article.</p><h2 data-id="enable-edit-the-content-banner">Enable & edit the Content Banner</h2><p>1. Access the Theme Editor.</p><p>2. Select <strong>Content Banner</strong> from the Styles menu.</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/63NZEA6IAR15/enable-content-banner.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/63NZEA6IAR15/enable-content-banner.png" alt="enable_content_banner.png" height="389" width="450" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <p>3. Click the <strong>Content Banner</strong> toggle to enable it. You'll notice a banner displays in the preview area to the left.</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/BWUFJWNO5JMT/enable-content-banner-2.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/BWUFJWNO5JMT/enable-content-banner-2.png" alt="enable_content_banner-2.png" height="319" width="1234" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>4. Use the remaining options (explained below) to configure the Content Banner. Be sure to click <strong>Save </strong>at the top right of the page when you're finished.</p><h2 data-id="content-banner-options">Content Banner options</h2><p>Let's learn about each of the options you can use to customize your Content Banner.</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/YE7VGNXJX7Y5/content-banner-options.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/YE7VGNXJX7Y5/content-banner-options.png" alt="content_banner_options.png" height="784" width="1002" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="height">Height</h3><p>You can set the height of the Content Banner for desktop and mobile individually. </p><h3 data-id="background">Background</h3><p>For the Content Banner’s background, you can set a <strong>color </strong>or an <strong>image</strong>. </p><p><strong>📝 NOTE</strong>: 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. </p><p><strong>📝 NOTE</strong>: 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.</p><h3 data-id="cover-overlay">Cover overlay</h3><p>You can choose to apply a cover overlay by checking the box. </p><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.</p><h3 data-id="responsive-breakpoints">Responsive breakpoints</h3><p>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. </p><h3 data-id="logo">Logo </h3><p>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.</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/AO3GZUNU49I0/content-banner-with-logo.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/AO3GZUNU49I0/content-banner-with-logo.png" alt="content_banner_with_logo.png" height="246" width="1086" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p> </article> </main>