How to Move a Legacy Theme to Foundation - Vanilla Success
<main> <article class="userContent"> <p>The Foundation theming system is <strong>Higher Logic Vanilla's</strong> (<strong>Vanilla</strong>) best and most flexible way of theming your community. Here are a few benefits to switching to Foundation:</p><ul><li>With Foundation's intuitive Theme Editor, customizing your community is easier than ever.</li><li>You have access to Vanilla's latest features as we implement them. New Vanilla features are built to be compatible with Foundation.</li><li>Foundation has an improved mobile experience and better mobile responsiveness, resulting in better SEO performance.</li></ul><p>Ultimately, Foundation makes it easier for you to build and maintain your community, which leads to a better experience for your users.</p><p>✔️ <strong>TIP</strong>: Test the new theme and any changes in your <a href="https://success.vanillaforums.com/kb/articles/65-staging-site" rel="nofollow noreferrer ugc">Staging</a> site before committing them to your Production site.</p><h3 data-id="read">Read</h3><div class="js-embed embedResponsive" data-embedjson="{"body":"Introduction Foundation and the Theme Editor were introduced with the goal of allowing you and your teams to easily customize your site to give your community and knowledge bases a look and feel that showcases your brand. Foundation has been built to ensure that your theme remains accessible, mobile friendly and compatible…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/170","embedType":"link","name":"Theming Overview - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/170" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/170 </a> </div><h3 data-id="watch">Watch</h3><p>Check out this webinar on moving to Foundation:</p><div class="js-embed embedResponsive" data-embedjson="{"recordID":886,"recordType":"discussion","body":"<p>Hi All! <\/p><p>If you missed our workshop session yesterday on theming your community with Foundation, the link to the recording is below. Thanks for tuning in and feel free to add any questions you may have about using Foundation in the discussion thread.<\/p><p><a href=\"https:\/\/vimeo.com\/588959608\/0b097d48fa\" rel=\"nofollow noreferrer ugc\">https:\/\/vimeo.com\/588959608\/0b097d48fa<\/a><\/p>","bodyRaw":"[{\"insert\":\"Hi All! \\nIf you missed our workshop session yesterday on theming your community with Foundation, the link to the recording is below. Thanks for tuning in and feel free to add any questions you may have about using Foundation in the discussion thread.\\n\"},{\"insert\":\"https:\\\/\\\/vimeo.com\\\/588959608\\\/0b097d48fa\",\"attributes\":{\"link\":\"https:\\\/\\\/vimeo.com\\\/588959608\\\/0b097d48fa\"}},{\"insert\":\"\\n\"},{\"insert\":\"\\n\"}]","format":"rich","dateInserted":"2021-08-19T17:47:11+00:00","insertUser":{"userID":951,"name":"Victoria Burt","title":"Product Marketing Manager","url":"https:\/\/success.vanillaforums.com\/profile\/Victoria%20Burt","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/userpics\/G9TGVR68WVYF\/nISQJJJ5VBNDG.jpg","dateLastActive":"2022-08-30T21:40:10+00:00","banned":0,"punished":0,"private":false,"label":"SuccessTeam"},"displayOptions":{"showUserLabel":false,"showCompactUserInfo":true,"showDiscussionLink":true,"showPostLink":true,"showCategoryLink":false,"renderFullContent":false,"expandByDefault":false},"url":"https:\/\/success.vanillaforums.com\/discussion\/886\/icymi-theming-workshop-recording","embedType":"quote","name":"ICYMI: Theming Workshop Recording"}"> <a href="https://success.vanillaforums.com/discussion/886/icymi-theming-workshop-recording"> https://success.vanillaforums.com/discussion/886/icymi-theming-workshop-recording </a> </div> <h2 data-id="how-to-move-to-foundation">How to move to Foundation</h2><p>1. Access the Dashboard.</p><p>2. Navigate to <strong>Appearance > Branding & Assets > Style Guides</strong>.</p><p>3. In the <strong>Templates</strong> section, hover over <strong>Foundation </strong>and click <strong>Copy</strong>.</p><p><strong>📝 NOTE</strong>: Completing this process will not affect your legacy theme, and you can switch back to it at any time.</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/MG8UI6PUHL0Q/copy-foundation-theme.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/MG8UI6PUHL0Q/copy-foundation-theme.png" alt="copy_foundation_theme.png" height="888" width="1165" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>4. You're now editing the Foundation theme copy in the <strong>Theme Editor</strong>. Use the Theme Editor to customize the theme as needed.</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/VV9I2HZFBXPX/edit-theme-1.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/VV9I2HZFBXPX/edit-theme-1.png" alt="edit_theme-1.png" height="720" width="1174" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>Learn more about the Theme Editor in the article below:</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#theme-editor-overview","embedType":"link","name":"Theme Editor Overview - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/279#theme-editor-overview" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/279#theme-editor-overview </a> </div><h2 data-id="cant-find-an-option">Can’t find an option?</h2><p>Is there a specific element you were able to customize in your legacy theme but cannot find a corresponding setting or <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference" rel="nofollow noreferrer ugc">theme variable in Foundation</a>? Talk to your CSM so we can see if we can find an option for you, or we may need to submit<a href="https://success.vanillaforums.com/categories/product-ideas" rel="nofollow noreferrer ugc"> a feature request</a>.</p><h2 data-id="copy-the-header">Copy the header</h2><p><strong>✔️ TIP</strong>: The Foundation Theme Editor includes a <strong>Title Bar</strong> that may render the need to copy your existing header unnecessary. We recommend testing the <a href="https://success.vanillaforums.com/kb/articles/397-customizing-the-title-bar" rel="nofollow noreferrer ugc">Title Bar </a>before proceeding. An example Title Bar is shown below; as you can see, it provides access to some of the community's most important options, and is "sticky" to ensure they're always accessible to users.</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/0NKCP9PBATPL/titlebar-sticky.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/0NKCP9PBATPL/titlebar-sticky.gif" alt="TitleBar_sticky.gif" height="476" width="988" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="copy-your-legacy-header-into-foundation">Copy your legacy header into Foundation</h3><p>If want to copy your custom header into your Foundation theme, you can do so by copying and pasting the header code into the Theme Editor's <strong>Header </strong>and <strong>CSS </strong>tabs.</p><p>For example, let’s say you have a basic link-based header (like the one in blue 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/IRDZBW34LKZD/pasted-image-0-2834-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/IRDZBW34LKZD/pasted-image-0-2834-29.png" alt="pasted image 0 (34).png" height="330" width="1115" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>First, your technical resource should locate and copy the header's <strong>HTML</strong> code and paste it into the Theme Editor's <strong>Header </strong>tab:</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/YV6EASIY9LH5/pasted-image-0-2835-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/YV6EASIY9LH5/pasted-image-0-2835-29.png" alt="pasted image 0 (35).png" height="405" width="1362" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>If your custom header has corresponding CSS, it's important to also copy it over to the Theme Editor's <strong>CSS</strong> tab (this only applies to header and footer elements).</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/4H5GTCU3I1CL/pasted-image-0-2836-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/4H5GTCU3I1CL/pasted-image-0-2836-29.png" alt="pasted image 0 (36).png" height="727" width="1219" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><strong>📝 NOTE</strong>: Sometimes, this code is well-labelled and easy to copy over; in other cases, it may be mixed in with other CSS code. If you're unsure, contact the technical resource who created the original theme or another resource experienced in HTML and CSS to isolate the appropriate code.</p><h2 data-id="copy-the-footer">Copy the footer</h2><p>Unlike the Header tab, the <strong>Footer </strong>tab includes some default code, and looks like this:</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh4.googleusercontent.com/kGuMOUI5XyTkC1xEAWMYTl_AvoQgSnkqset1fXUBYqdQsortBTav4iHoQF5BI0MhXmEDEUv7HLp1Y1h8_W2V_cPLhsBABYVSnxhpvg_v5O5IUuAe8zWvgbe61dko8lC6MxSDvLw-" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh4.googleusercontent.com/kGuMOUI5XyTkC1xEAWMYTl_AvoQgSnkqset1fXUBYqdQsortBTav4iHoQF5BI0MhXmEDEUv7HLp1Y1h8_W2V_cPLhsBABYVSnxhpvg_v5O5IUuAe8zWvgbe61dko8lC6MxSDvLw-" alt="kGuMOUI5XyTkC1xEAWMYTl_AvoQgSnkqset1fXUBYqdQsortBTav4iHoQF5BI0MhXmEDEUv7HLp1Y1h8_W2V_cPLhsBABYVSnxhpvg_v5O5IUuAe8zWvgbe61dko8lC6MxSDvLw-" height="24" width="624" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>You have a few options when working with this default code: </p><ul><li>add your footer code in addition to it, </li><li>keep some of it, </li><li>or replace this code completely.</li></ul><p>Just like with the header, simply copy your footer HTML code to the <strong>Footer </strong>tab, and add any relevant CSS to the <strong>CSS </strong>tab.</p><h2 data-id="test-your-header-and-footer">Test your header and footer</h2><p>To test your header/footer, save your theme by clicking <strong>Save</strong> at the top right of the editor. The theme is saved but is not yet applied.</p><p>On the <strong>Appearance > Branding & Assets > Style Guides </strong>page, in the <strong>Custom Themes </strong>section, hover over your theme and click <strong>Apply </strong>or <strong>Preview</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/FQ9D611XFWIU/apply-preview-theme.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/FQ9D611XFWIU/apply-preview-theme.png" alt="apply_preview_theme.png" height="820" width="1214" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>Once applied, these elements should look just like they did in your legacy theme. If something looks off, you may be missing some CSS and may require a technical resource to be sure you have all necessary CSS in place.</p><h2 data-id="javascript">JavaScript</h2><p>If you have important JavaScript code (Google Analytics, etc.), you'll want to add this to the <strong>JavaScript</strong> tab in the Theme Editor. Typically, just like the header and footer, this should be as simple as copying and pasting code, but if you're unsure, consult with your technical resource.</p><p><strong>📝 NOTE</strong>: You can also use JavaScript with <a href="https://success.vanillaforums.com/kb/articles/19-pockets" rel="nofollow noreferrer ugc">Pockets</a>.</p><h2 data-id="replicate-legacy-features-in-foundation">Replicate legacy features in Foundation</h2><p>Many of the features and modules that you may have in your legacy themes are available in Foundation. Most legacy modules are available as <a href="https://success.vanillaforums.com/kb/articles/366-using-pockets-widgets-to-enhance-your-theme" rel="nofollow noreferrer ugc">Widgets</a>.</p><h3 data-id="hero-banner">Hero Banner</h3><p>The Hero Banner has been replaced by <a href="https://success.vanillaforums.com/kb/articles/402-customizing-the-banner" rel="nofollow noreferrer ugc">the Banner</a>, which is highly configurable in Foundation and comes with a similar but modernized generic background.</p><p>For example, here is a legacy Hero 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/77VGPZFHZ718/pasted-image-0-2839-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/77VGPZFHZ718/pasted-image-0-2839-29.png" alt="pasted image 0 (39).png" height="454" width="1117" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>Here's an example of a Foundation 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/KHHWHIUWBAPG/pasted-image-0-2840-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/KHHWHIUWBAPG/pasted-image-0-2840-29.png" alt="pasted image 0 (40).png" height="570" width="1261" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>Check out the article below to learn more about the Banner.</p><div class="js-embed embedResponsive" data-embedjson="{"body":"The Banner is a component of Foundation themes. It typically includes a banner image or coloured background, a title, description, and search bar. An example is shown below: Where does the banner display? The Banner displays on 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","embedType":"link","name":"Customize the Banner - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/402" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/402 </a> </div><h3 data-id="modules">Modules</h3><p>Modules are now <strong>Widgets</strong>. Learn more below:</p><div class="js-embed embedResponsive" data-embedjson="{"body":"Widgets (formerly known as “Modules”) allow you to easily add pre-built features to different parts of your Higher Logic Vanilla (Vanilla) site. Widgets are great for: customizing your layouts and pulling dynamic content into a page. This article provides an overview of all Vanilla widgets so that you can quickly determine…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/366","embedType":"link","name":"Using Pockets & Widgets to Enhance your Theme - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/366" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/366 </a> </div><h2 data-id="additional-considerations">Additional considerations</h2><h3 data-id="custom-work">Custom work</h3><p>If you have had custom work, a similar default feature may have been implemented in Vanilla Core and you may be able to switch over and use this feature with Foundation. For custom work that has not been added to core, speak with your CSM about your options.</p><h3 data-id="pockets">Pockets</h3><p>Most Pockets should work by default, but it's still recommended to test them out to ensure compatibility with location and CSS code.</p><p>Most non-themed Pockets, such as Google Analytics and Google Tag Manager, work seamlessly.</p><h3 data-id="mobile-experience">Mobile experience</h3><p>Foundation provides an excellent mobile experience by default, and for most customers this represents a significant upgrade from older themes.</p><p>When moving your header and/or footer to Foundation, it's important to consider whether their associated CSS is mobile responsive. Many customers with older themes historically may have used one theme for desktop and a standard theme for mobile. It will be important to ensure you test your theme on a variety of screen sizes and devices before launching.</p> </article> </main>