Theme Elements Overview - Vanilla Success
<main> <article class="userContent"> <p>Every theme is comprised of several <em>customizable elements</em>. You can configure the theme elements individually in order to design and manage the appearance of your <strong>Higher Logic Vanilla</strong> (<strong>Vanilla</strong>) community pages. The theme elements are:</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/CYHDTAMEWSQO/elements.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/CYHDTAMEWSQO/elements.png" alt="Elements.png" height="785" width="1080" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>The theme elements are customized in the <a href="https://success.vanillaforums.com/kb/articles/279-theme-editor-overview" rel="nofollow noreferrer ugc">Theme Editor</a>, which is accessible in the Dashboard.</p><ul><li><strong>Legacy themes</strong>: navigate to <strong>Settings > Themes</strong>, then click <strong>Copy</strong> for the theme you want to customize</li><li><strong>Foundation theme</strong>: navigate to <strong>Appearance > Style Guides</strong>, then click <strong>Copy</strong> for the theme you want to customize</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/8DLPD4A2ACUW/copy-buttons.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/8DLPD4A2ACUW/copy-buttons.png" alt="Copy buttons.png" height="678" width="968" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>The sections that follow describe each of the theme elements.</p><h2 data-id="header">Header</h2><p>The Header is at the top of the site. It should match your brand and is a great place for your brand links, such as <em>Contact Us</em> and <em>About</em> information; keeping this information distinct from your community navigation.</p><p>The Header isn't necessary for all community sites, but the element is available if you want to use it.</p><p>✔️ <strong>TIP</strong>: Click the <strong>Header</strong> and <strong>CSS</strong> tabs to customize the Header with your own HTML/CSS code.</p><h2 data-id="title-bar">Title Bar</h2><p>The Title Bar is below the header; it displays on all of your Vanilla community pages. Use it for your Vanilla community navigation and common application components.</p><p>📝 <strong>NOTE</strong>: Some community sites find that just a Title Bar (without a header) is ideal.</p><p>Learn how to add branding and navigation to your Title Bar in:</p><div class="js-embed embedResponsive" data-embedjson="{"body":"Overview The Title Bar is an element of the Theme Editor: It stays pinned to the top as users navigate down the page. During QA you should test the title bar in a variety of states. Theming the Title Bar The easiest way to customize the title bar is in the theme editor UI in the Styles Tab. You can get to this tab by…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/397-customizing-the-title-bar","embedType":"link","name":"Customizing the Title Bar - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/397-customizing-the-title-bar" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/397-customizing-the-title-bar </a> </div><h2 data-id="banner">Banner</h2><p>The Banner displays on many of your Vanilla community pages. It has a customizable Search bar and accommodates a large image to really showcase your brand. You can set a default background color and enable Responsive Breakpoints to ensure the best rendering on various devices (desktops, tablets, smartphones).</p><p>Learn how to customize your Banner in:</p><div class="js-embed embedResponsive" data-embedjson="{"body":"Banner Overview The Banner is a component of Foundation Custom Themes: It typically includes a banner image or coloured background, the site title, description and a search bar. The banner added in your theme editor will show on all of the following pages: Recent Discussions Categories Sub level categories My Bookmarks My…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/402-customizing-the-banner","embedType":"link","name":"Customizing the Banner - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/402-customizing-the-banner" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/402-customizing-the-banner </a> </div><h2 data-id="main-content">Main Content</h2><p>The Main Content displays on all of your Vanilla community pages. It is where the bulk of user interaction with your Vanilla community will occur. The content in this section changes depending on the current page.</p><p>You can customize the Main Content by:</p><ul><li><a href="https://success.vanillaforums.com/kb/articles/280-configuring-global-styles" rel="nofollow noreferrer ugc">Configuring global styles</a></li><li>Using the <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference" rel="nofollow noreferrer ugc">theming variables</a> that are in <strong>Advanced Settings</strong></li></ul><h2 data-id="footer">Footer</h2><p>The Footer displays at the bottom of all your Vanilla community site pages. It could be used for nothing more than your copyright notice -- or have topic-specific columns of links to important documentation, online resources, and social media sites.</p><p>✔️ <strong>TIP</strong>: Click the <strong>Footer</strong> and <strong>CSS</strong> tabs to customize the Footer with your own HTML/CSS code.</p> </article> </main>