Foundation Theme Header & Footer - Vanilla Success
<main> <article class="userContent"> <p><strong>📝 NOTE</strong>: Many communities use the out-of-the-box <a href="https://success.vanillaforums.com/kb/articles/397" rel="nofollow noreferrer ugc">Title Bar</a> <em>as</em> their header, and don't need to use Vanilla's optional Theme header element.</p><p>However, if you'd like to use a custom header and footer to match your organization's main website, you can add the same HTML and CSS that you use there to your community, or get creative and have a developer create something unique from scratch. </p><h2 data-id="copy-from-a-legacy-theme">Copy from a legacy theme</h2><p>Check out the article below to learn how to update your Foundation header and footer to match your legacy theme:</p><div class="js-embed embedResponsive" data-embedjson="{"body":"The Foundation theming system is Higher Logic Vanilla's (Vanilla's) best and most flexible way of theming of your community. There are many benefits to switching over to Foundation. Customizing your community is easier than ever because Foundation provides an easy-to-use user interface where you immediately see the results…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/277","embedType":"link","name":"Moving my theme over to the new theming system - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/277" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/277 </a> </div><h2 data-id="update-header-and-footer-styles">Update header and footer styles</h2><p><strong>📝 NOTE</strong>: If you don't yet have a Foundation theme, begin here: </p><div class="js-embed embedResponsive" data-embedjson="{"body":"Foundation is the latest theme in Higher Logic Vanilla (Vanilla), and our recommendation as the best option when creating a new theme or for updating an existing theme. The new Theme Editor makes it easy to create and modify custom theme templates so that your community and knowledge base can match your unique brand.…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/279","embedType":"link","name":"Theme Editor Overview - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/279" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/279 </a> </div><p>In the Dashboard, navigate to the <strong>Appearance > Branding & Assets > Style Guides</strong> page. From there, create or edit a Foundation theme. </p><p>At the top, you'll notice the <strong>Header</strong>, <strong>Footer</strong>, and <strong>CSS </strong>tabs: </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/JAB4SKMR6WAY/theme-editor-tabs.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/JAB4SKMR6WAY/theme-editor-tabs.png" alt="theme_Editor_tabs.png" height="422" width="1253" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="header">Header</h3><p>By default, this is blank. You may optionally add HTML code to this section. If CSS is needed to style it, add it to the <strong>CSS </strong>tab (more on this tab below).</p><h3 data-id="footer">Footer</h3><p>By default, the footer has code for our basic Footer: </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/XDQ4LYZSD8QK/pasted-image-0-2827-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/XDQ4LYZSD8QK/pasted-image-0-2827-29.png" alt="pasted image 0 (27).png" height="96" width="2048" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>You can update the wording on the left by editing this (underlined in red) part of the footer code: </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/XGFRCF2YIS47/pasted-image-0-2828-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/XGFRCF2YIS47/pasted-image-0-2828-29.png" alt="pasted image 0 (28).png" height="461" width="1084" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><strong>📝 NOTE</strong>: If you're unfamiliar with HTML code, you may need to contact a technical resource in your organization for assistance. </p><h2 data-id="css">CSS</h2><p>The CSS tab ONLY applies to header and footer assets. </p><p>If you are unfamiliar with CSS code, you may need to contact a technical resource in your organization for assistance. </p><p>By default, the code in the CSS tab styles the out-of-the-box footer, but you can add code that pertains to the header as well. </p><h2 data-id="set-a-custom-font">Set a custom font</h2><p>You can read more about this here: </p><div class="js-embed embedResponsive" data-embedjson="{"body":"Currently, Vanilla's theming system does not have a specific way to add a custom font to your header or footer if it is different from the custom font used in your theme. If you try to add an @import statement to your custom CSS file you'll notice it doesn't work. That's because we use a technology called the shadow DOM to…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/312-adding-a-custom-font-to-your-foundation-based-header-footer","embedType":"link","name":"Adding A Custom Font To Your Foundation-Based Header\/Footer - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/312-adding-a-custom-font-to-your-foundation-based-header-footer" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/312-adding-a-custom-font-to-your-foundation-based-header-footer </a> </div><h2 data-id="examples">Examples</h2><h3 data-id="header-1">Header</h3><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/ZOUGNTBIP9YJ/pasted-image-0-2829-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/ZOUGNTBIP9YJ/pasted-image-0-2829-29.png" alt="pasted image 0 (29).png" height="499" width="1340" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="footer-1">Footer</h3><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/E9IN6KNGOGA7/pasted-image-0-2830-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/E9IN6KNGOGA7/pasted-image-0-2830-29.png" alt="pasted image 0 (30).png" height="668" width="1336" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p> </article> </main>