Moving my theme over to the new theming system - Vanilla Success
<main> <article class="userContent"> <p>The Foundation theming system is <strong>Higher Logic Vanilla's</strong> (<strong>Vanilla's</strong>) best and most flexible way of theming of your community. There are many benefits to switching over to Foundation.</p><ul><li>Customizing your community is easier than ever because Foundation provides an easy-to-use user interface where you immediately see the results of your theming.</li><li>You have access to Vanilla's latest features as we create and add them. New Vanilla features are built to be compatible with Foundation.</li><li>Foundation has an improved mobile experience and better mobile responsiveness which result in better SEO performance.</li></ul><p>All in all, a better experience for you in building and maintaining your community that leads to a better experience for your end-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><p><a href="https://success.vanillaforums.com/kb/theme-guide" rel="nofollow noreferrer ugc">Read more about Foundation in our Theming Overview article</a></p><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-06-06T16:03:53+00:00","banned":0,"punished":0,"private":false},"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>Clone Foundation in the dashboard by navigating to your Dashboard, then Settings, then click on <strong>Themes</strong> on the left. In that menu, scroll down to Foundation, and hover over the tile to select the Copy option.</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/Z4XOZ0LKP18S/pasted-image-0-2833-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/Z4XOZ0LKP18S/pasted-image-0-2833-29.png" alt="pasted image 0 (33).png" height="835" width="1208" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>Don’t worry your original theme will be saved and you can always switch back!</p><p>From here you can begin to amend the base foundation theme to match your branding. You may have some of these set in your existing CSS files, though many communities will use this as an opportunity to reconsider and modernize their theme.</p><p>You can find information on amending the Styles Tab and setting up your Styles in the Editor article:</p><div class="js-embed embedResponsive" data-embedjson="{"body":"Overview Foundation is Vanilla’s newest theme and our recommendation as the best option when creating your new theme, or for updating an existing theme. Our 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. Legacy Clients New…","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":"Style Guide 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>If there is a particular element you were able to theme 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 in our documentation</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="copying-the-header">Copying the Header</h2><p>Of note, the Foundation theme editor has a great title bar feature that may suit your needs out of the box and render copying over an old header unnecessary. You may want to test out Foundation on its own and try out the <a href="https://success.vanillaforums.com/kb/articles/397-customizing-the-title-bar" rel="nofollow noreferrer ugc">title bar </a>before proceeding.</p><p>If your community has a custom header, you can add this to your foundation theme by copying and pasting the header code into the Header tab of Foundation.</p><p>For example, let’s say I have this basic link based header (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><br></p><p>First, your technical resource should locate the header HTML and CSS code and copy it over:</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><br></p><p>If your custom header has corresponding CSS, it will be important to make sure that it is also copied over to the CSS tab of the Foundation editor (NB: 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><br></p><p>Sometimes this is well labelled and ready to go, in other situations it may be mixed in with other CSS code. If you are 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="copying-the-footer">Copying the Footer</h2><p>Unlike the header tab, the footer tab will have some code to begin with.</p><p>Out of the box, it looks like this in foundation:</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 can choose to add your footer in addition to this, keep some of it or replace this code completely.</p><p>Similarly to the header, simply copy your footer HTML code to the Footer tab, and add any relevant CSS to the CSS tab of Foundation.</p><h3 data-id="testing-the-header-and-footer-changes">Testing the Header and Footer changes</h3><p>To test this out, hit ‘Save’ -- this will save the foundation file but does not apply it immediately.</p><p>You can now choose to apply or preview the theme by going to the themes tab and hovering over your newly saved file:</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/HHLD69BZF0C5/pasted-image-0-2837-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/HHLD69BZF0C5/pasted-image-0-2837-29.png" alt="pasted image 0 (37).png" height="628" width="1083" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>Once applied, this should look just like it did on the old theme:</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/8T9NMZ3WJHY2/pasted-image-0-2838-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/8T9NMZ3WJHY2/pasted-image-0-2838-29.png" alt="pasted image 0 (38).png" height="105" width="1248" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>If there are visual tweaks needed, you may be missing some additional CSS and may require a technical resource to be sure you have all necessary CSS.</p><h2 data-id="javascript">JavaScript</h2><p>If you have important javascript code (Google Analytics, etc), you will want to add this to the JS section of the foundation editor. Typically this will once again just be cutting and pasting code, but if you are unsure consult with your technical resource.</p><p>Of note, 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="replicating-legacy-features-in-foundation">Replicating 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>Here is a legacy deflector version of a 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><br></p><p>Here is a preview of a foundation version:</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><br></p><p>To see additional options review the docs on the Title Bar and the Banner</p><p><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></p><p><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><strong> </strong> </p><h3 data-id="modules">Modules</h3><p>Modules are now Widgets </p><p><a href="https://success.vanillaforums.com/kb/articles/366-using-pockets-widgets-to-enhance-your-theme" rel="nofollow noreferrer ugc">https://success.vanillaforums.com/kb/articles/366-using-pockets-widgets-to-enhance-your-theme</a></p><p>Missing Widget? Submit an idea here!</p><p><a href="https://success.vanillaforums.com/categories/product-ideas" rel="nofollow noreferrer ugc">https://success.vanillaforums.com/categories/product-ideas</a></p><h2 data-id="additional-considerations-caveats">Additional Considerations & Caveats</h2><h2 data-id="custom-work">Custom Work</h2><p>If you have had custom work, a similar feature may have been implemented in Vanilla Core and you may be able to switch over and use this feature with Foundation out of the box. For custom work that has not been added to core, speak with your CSM about your options.</p><h2 data-id="pockets">Pockets</h2><p>Most pockets should work out of the box, but it is 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><h2 data-id="mobile-experience">Mobile Experience</h2><p>Foundation has an excellent mobile experience out of the box, and for most clients this represents a significant upgrade from older themes.</p><p>When moving your header and footer over to Foundation it will be important to consider if their associated CSS is mobile responsive, as many clients 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>