Theme Editor Overview - Vanilla Success
<main> <article class="userContent"> <p>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.</p><h2 data-id="legacy-clients">Legacy Clients</h2><p>New Vanilla customers will be using our Foundation theme template by default.</p><p>If you've been with us for a while you may already be using one of our legacy themes such as Bootstrap3, Deflector or TripleA, or you may have a completely custom theme.</p><p>We recommend that legacy customers test out Foundation on their staging sites and strongly consider making the switch. Legacy customers with an existing theme should review this documentation:</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><p>If you would like to keep your legacy theme, but use some foundation based components (such as KB, quick links, user cards, the new search page, and more), you can continue to manage and modify your theme in the same way you did before. However, if you would like to start integrating our new pages, widgets and components you will have to create a new copy of your custom theme to be able to modify the styles and settings.</p><p>To learn more, see:</p><div class="js-embed embedResponsive" data-embedjson="{"body":"Our new theme editor is designed to allow you to easily configure and customize the look and feel of our Foundation themes, pages and components. If you are not using Foundation, and are using a legacy theme, such as Keystone, Bootstrap3, or perhaps a custom theme, you have the option to start integrating Foundation-based…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/403","embedType":"link","name":"Integrate Foundation pages into your Legacy Theme - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/403" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/403 </a> </div><h2 data-id="getting-started">Getting Started</h2><p>To get started, navigate to your Dashboard, then Settings, and go to Themes on the left-hand side. From there, click on “Copy” Next to Foundation:</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/CU0KIGH8DGLV/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/CU0KIGH8DGLV/image.png" alt="image.png" height="589" width="1451" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>Make any customizations (see below for details on each section of the theme editor)</p><p>Rename the theme copy</p><p>Save your changes</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/RKNB4UY06FWZ/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/RKNB4UY06FWZ/image.png" alt="image.png" height="1524" width="2858" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>Scroll down to the bottom of your Theme page to see your saved theme.</p><p>Use the buttons to Preview and/or Apply this new 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/3QK2TGWTG8XF/sep-30-2021-15-43-05.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/3QK2TGWTG8XF/sep-30-2021-15-43-05.gif" alt="Sep-30-2021 15-43-05.gif" height="348" width="706" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>To continue editing an existing theme copy, click on the three dots in the top right and select Edit.</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/HI1H649RYSEO/sep-30-2021-15-44-43.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/HI1H649RYSEO/sep-30-2021-15-44-43.gif" alt="Sep-30-2021 15-44-43.gif" height="348" width="706" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="navigating-the-theme-editor">Navigating the Theme Editor</h2><p>Once you’ve opened the Theme Editor, you will see many options to update different sections of your site. The Theme Editor has five sections.</p><h2 data-id="styles">Styles</h2><p>Here you can update your global styles with the click of a button, and customize things like:</p><ul><li><a href="https://success.vanillaforums.com/kb/articles/280-configuring-global-styles" rel="nofollow noreferrer ugc">Global Styles</a> </li><li><a href="https://success.vanillaforums.com/kb/articles/397-customizing-the-title-bar" rel="nofollow noreferrer ugc">Title Bar</a> </li><li><a href="https://success.vanillaforums.com/kb/articles/402-customizing-the-banner" rel="nofollow noreferrer ugc">Banner</a> </li><li><a href="https://success.vanillaforums.com/kb/articles/366-using-pockets-widgets-to-enhance-your-theme" rel="nofollow noreferrer ugc">Widgets</a> </li><li><a href="https://success.vanillaforums.com/kb/articles/415-content-banner" rel="nofollow noreferrer ugc">Content Banner</a> </li><li><a href="https://success.vanillaforums.com/kb/articles/365-quick-links-menu" rel="nofollow noreferrer ugc">Quick Links</a> </li><li><a href="https://success.vanillaforums.com/kb/articles/411-theme-editor-discussion-list" rel="nofollow noreferrer ugc">Discussion List</a> </li></ul><p>Use the navigation menu on the right and/or theme preview to configure settings for different sections and components.</p><p>You are able to see a preview of your updates as you choose your various options, so do not be shy to try things!</p><h2 data-id="header-and-footer">Header and Footer</h2><p>Easily insert the HTML for your Header and Footer in these sections.</p><h2 data-id="css">CSS</h2><p>Compliment your custom HTML Header and Footers with CSS.</p><h2 data-id="javascript">JavaScript</h2><p>Easily add JavaScript like Google Analytics tracking codes, or something more custom using the JavaScript tab. Unlike Pockets, which are not applied to all pages, this will apply to all Foundation-based pages. A best practice for adding JavaScript to your Foundation Theme is to wrap your functionality in this Vanilla Foundation custom event listener:</p><pre class="code codeBlock" spellcheck="false" tabindex="0">onVanillaReady((event) => { // Your code goes here, for example: console.log('onVanillaReady event', event); }); </pre><p>This code will be executed before the page loads, similar to the event <code class="code codeInline" spellcheck="false" tabindex="0">DOMConetentLoaded</code> .</p><h2 data-id="pockets-widgets">Pockets & Widgets</h2><p>Foundation offers a more modern look and feel (great features like banner images and widgets) with a user-friendly theme editor tool that makes updating your site easy.</p><p>In addition to the Theme Editor, we have improved our <a href="https://success.vanillaforums.com/kb/articles/19" rel="nofollow noreferrer ugc">Pockets</a> feature to allow you to easily add <a href="https://success.vanillaforums.com/kb/articles/366" rel="nofollow noreferrer ugc">Widgets</a> to your site. We will be adding to this catalogue in the future as well.</p><p>Pocket Types have been introduced to allow you to use the power of Pockets to add and configure <a href="https://success.vanillaforums.com/kb/articles/366" rel="nofollow noreferrer ugc">Vanilla Widgets</a> to your community pages. The Pockets you know and love can still be built and configured by choosing the "Custom HTML" type.</p><h2 data-id="applying-different-themes-to-different-subcommunities">Applying different themes to different subcommunities</h2><p>With Foundation, you can easily apply different themes to different <a href="https://success.vanillaforums.com/discussion/323/subcommunities" rel="nofollow noreferrer ugc">subcommunities</a>.</p><p>To learn how to apply different themes to different subcommunities, see:</p><div class="js-embed embedResponsive" data-embedjson="{"body":"Overview If you use subcommunities on your forum but would like for each one to have its’ own look and feel, you can choose to build an individual theme for each one. Most communities will start by creating a theme for their default community which will become the base theme for other subcommunities. For more information…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/424","embedType":"link","name":"Setting Different Themes per Subcommunity - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/424" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/424 </a> </div><h2 data-id="advanced-settings%3A-theme-variables">Advanced Settings: Theme Variables</h2><p>Theme variables are the stable way to update your theme:</p><div class="js-embed embedResponsive" data-embedjson="{"body":"Overview The \"Advanced Settings\" section of the theme editor brings a JSON variable editor and inline documentation for hundreds of variables that are not currently included in the visual user interface. Using theme variables requires a fairly technical resource and an understanding of basic CSS and JSON formatting. You…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/414","embedType":"link","name":"Advanced Settings: Getting Started with Theme Variables - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/414" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/414 </a> </div><p><br></p><div class="js-embed embedResponsive" data-embedjson="{"body":"This article documents the variables that can be used to customize your theme. Specify these variables in the Advanced Settings panel of the Theme Editor. To access the panel, click Advanced Settings, as shown below. (The button always displays, irrespective of which section is being customized.) The Advanced Settings…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/370","embedType":"link","name":"Theme Variable Reference - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/370" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/370 </a> </div><p><br></p> </article> </main>