Theme Editor Overview - HL Vanilla Community
<main> <article class="userContent"> <p><strong>Foundation </strong>is the latest theme in <strong>Higher Logic Vanilla</strong> (<strong>Vanilla</strong>), and our recommendation as the best option when creating a <em>new </em>theme or for updating an <em>existing </em>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.</p><h2 data-id="legacy-clients">Legacy clients</h2><ul><li>New Vanilla customers will be using our Foundation theme template by default.</li><li>If you've been with us for a while, you may already be using one of our legacy themes, such as <em>Bootstrap3</em>, <em>Deflector, </em>or <em>TripleA</em>, or you may have a completely custom theme.</li></ul><p>We recommend that legacy customers test out Foundation on their staging sites, and to 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'd like to keep your legacy theme but use some Foundation-based components (such as knowledge base, 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'll 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="create-a-theme">Create a theme</h2><p>1. Access the Dashboard.</p><p>2. Navigate to <strong>Appearance > Branding & Assets > Style Guides</strong>. </p><p>3. From there, click <strong>Copy</strong> next to Foundation to create a theme.</p><p><strong>📝 NOTE</strong>: Alternatively, scroll down to the <strong>Custom Themes</strong> section and click the <strong>+</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/OPYNTY4EO413/create-theme.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/OPYNTY4EO413/create-theme.png" alt="create_theme.png" height="543" width="1149" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>4. At the top of the page, click the theme title to rename it</p><p>5. Use the various tabs and styles to make your customizations (see below for details on each section of the Theme Editor).</p><p>6. When finished, click <strong>Save </strong>at the top right to create the 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/1YH8J96SSF76/edit-theme-1.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/1YH8J96SSF76/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> <h2 data-id="manage-your-themes">Manage your themes</h2><p>On the <strong>Appearance > Branding & Assets > Style Guides </strong>page, all of your custom themes are listed in the <strong>Custom Themes</strong> section.</p><p>Hover over a theme to display the <strong>Apply </strong>and <strong>Preview </strong>buttons.</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/XM34FP41KQCI/custom-themes-section.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/XM34FP41KQCI/custom-themes-section.png" alt="custom_themes_section.png" height="880" width="890" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="theme-editor-overview">Theme Editor overview</h2><p>The Theme Editor provides several ways to update your community's aesthetic via its five <strong>tabs </strong>at the top.</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/I84LDZW84Z3Z/theme-editor-tabs.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/I84LDZW84Z3Z/theme-editor-tabs.png" alt="theme_editor_tabs.png" height="300" width="1174" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="styles">Styles</h3><p>Here, you can update your global styles with the many options in the right-hand panel:</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><strong>✔️ TIP</strong>: The preview on the left updates in real time, making it easy to see your changes reflected as you work.</p><h3 data-id="header-and-footer">Header and Footer</h3><p>These two tabs allow you to insert HTML for flexible customizations to your community's Header and Footer.</p><h3 data-id="css">CSS</h3><p>Customize your Header and Footer further with custom CSS. </p><p><strong>📝 NOTE</strong>: Updates made in the <strong>CSS</strong> tab only apply to any custom HTML you've added to your Header and Footer.</p><h3 data-id="javascript">JavaScript</h3><p>Here, you can easily add JavaScript like Google Analytics tracking codes, or something even more custom. Unlike Pockets, which are not applied to all pages, this will apply to <em>all </em>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">DOMContentLoaded</code>.</p><p>The <code class="code codeInline" spellcheck="false" tabindex="0">onVanillaReady </code>event will fire on every page load. This means that you can add custom JavaScript or CSS on pages where there are no Pockets. To embed, for example, custom code on every page you can use this function that will inject a script tag into the head: </p><pre class="code codeBlock" spellcheck="false" tabindex="0">/** * Add JS into the head. */ const injectJS = (script) => { const head = document.querySelector('head'); const scriptTag = document.createElement('script'); scriptTag.innerHTML = (script) ? script : ''; head.appendChild(scriptTag); } </pre><p>Or, even though it is not recommended, you might need to add custom CSS into the head: </p><pre class="code codeBlock" spellcheck="false" tabindex="0">/** * Add style tag to the head. */ const injectCSS = (styles) => { const head = document.querySelector('head'); const styleTag = document.createElement('style'); styleTag.innerHTML = (styles) ? styles : ''; head.appendChild(styleTag); } </pre><p>Now you can create multi-line variables using the back-tick (`) instead of quotation marks to pass CSS or JavaScript: </p><pre class="code codeBlock" spellcheck="false" tabindex="0">let style = ` body: { border: solid 3px #eee; } `; let js = ` console.log(‘This page has loaded’); `; onVanillaReady((e) => { // Add CSS and JavaScript to every page. injectCSS(style); inectJS(js); }) </pre><h3 data-id="pockets-widgets">Pockets & Widgets</h3><ul><li>The Foundation theme offers a more modern look and feel for your community, with great features like banner images and widgets, all with a user-friendly theme editor tool that makes updating your community simple.</li><li>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 community. </li><li>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're familiar with can still be built and configured by choosing the "Custom HTML" type.</li></ul><h2 data-id="apply-different-themes-to-different-subcommunities">Apply different themes to different subcommunities</h2><p>With Foundation, you can 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><h2 data-id="additional-resources">Additional resources</h2><p>Click the link below to access a video expanding on what you learned in this article.</p><div class="js-embed embedResponsive" data-embedjson="{"body":"For more information, please see:","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/GXW21TRYG1JP\/share-imagevanilla-community.jpg","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/453","embedType":"link","name":"K. Theme Editor [video] - HL Vanilla Community"}"> <a href="https://success.vanillaforums.com/kb/articles/453" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/453 </a> </div><p><br></p> </article> </main>