Theme Elements Overview - Vanilla Success
<main> <article class="userContent"> <p>A theme comprises several <em>customizable elements</em>. You can configure these theme elements <em>individually </em>in order to design and manage the appearance of your <strong>Higher Logic Vanilla</strong> (<strong>Vanilla</strong>) community pages.</p><h2 data-id="manage-a-theme">Manage a theme</h2><p>You can edit a theme's elements 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/XXULCV2TK7JV/copy-buttons.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/XXULCV2TK7JV/copy-buttons.png" alt="Copy buttons.png" height="678" width="968" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="theme-elements-example">Theme elements example</h2><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 sections that follow describe each of these elements.</p><h2 data-id="header">Header</h2><p>The <strong>Header</strong> 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 it's available if needed.</p><p>✔️ <strong>TIP</strong>: In the Theme Editor, 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 <strong>Title Bar</strong> 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 <strong>Banner </strong>displays on many of your pages. It has a customizable Search bar and accommodates a large image to 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 <strong>Main Content</strong> element displays on all of your pages. It's where the bulk of user interaction with your Vanilla community occurs. The content in this section changes depending on the current page.</p><p>You can customize the Main Content element 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> in <strong>Advanced Settings</strong></li></ul><h2 data-id="footer">Footer</h2><p>The <strong>Footer </strong>displays at the bottom of every page. 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>: In the Theme Editor, click the <strong>Footer</strong> and <strong>CSS</strong> tabs to customize the Footer with your own HTML/CSS code.</p> </article> </main>