Integrate Foundation Pages into a Legacy Theme - HL Vanilla Community
<main> <article class="userContent"> <p>Our new theme editor is designed to allow you to easily configure and customize our Foundation theme's pages and components.</p><p>If you are using a legacy theme (such as Keystone or Bootstrap3) or a custom theme, you can integrate Foundation-based pages and components with your existing theme. You can also use the theme editor to customize these pages and components.</p><h2 data-id="sunsetting-legacy-themes">Sunsetting Legacy Themes</h2><p>An additional reason to migrate to the Foundation theme is because our product-development plan calls for some <strong>legacy themes to be sunset in late-2022</strong>.</p><ul><li>To learn more about the <em>Vanilla's theme-sunsetting plan</em>, see:</li></ul><div class="js-embed embedResponsive" data-embedjson="{"body":"Higher Logic Vanilla (Vanilla) has decided to sunset a number of its \"legacy\" themes as we encourage customers to start using the recently released Foundation theme. Sunset Timeline Our product-development plan calls for these legacy themes to be sunset in late-2022: 📝 NOTE: A comprehensive list of the current stage in the…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/554","embedType":"link","name":"Legacy Themes Sunsetting - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/554" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/554 </a> </div><h2 data-id="foundation-features-you-can-integrate">Foundation features you can integrate</h2><h3 data-id="vanilla-knowledge">Vanilla Knowledge</h3><p>Vanilla Knowledge is a feature that you can use to create custom knowledge bases (KBs) in and for your <strong>Higher Logic Vanilla</strong> (<strong>Vanilla</strong>) community. You can use Theme Editor to configure the appearance of your KBs.</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/HELGZNH0BAZ4/screen-shot-2021-04-14-at-5-51-23-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/HELGZNH0BAZ4/screen-shot-2021-04-14-at-5-51-23-pm.png" alt="User: "Screen Shot 2021-04-14 at 5.51.23 PM.png"" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <ul><li>To learn more about <em>using knowledge bases</em>, see:</li></ul><div class="js-embed embedResponsive" data-embedjson="{"body":"Vanilla Knowledge is a feature that you can use to create custom knowledge bases in and for your Higher Logic Vanilla (Vanilla) community. Highlights Vanilla gives you the ability to: create either of two types of knowledge base (KB) to ensure you can offer whichever better suits the needs of your community. Refer to…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/81","embedType":"link","name":"A Guide to Vanilla Knowledge - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/81" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/81 </a> </div><p>📝 <strong>NOTE</strong>: This is an <em>optional feature</em> that can be added to your community upon request. Speak to your CSM.</p><h3 data-id="quick-links-menu"><strong>Quick Links menu</strong></h3><p>Quick Links is a menu that is present in all of our legacy themes. Our new Foundation-based Quick Links menu can be integrated into your theme, and has the added benefit of having customizable links.</p><ul><li>This component can be enabled in your Dashboard: <strong>Settings > Addons > Labs</strong>.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/QU6H0TU3Z20P/screen-shot-2021-04-14-at-5-52-13-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/QU6H0TU3Z20P/screen-shot-2021-04-14-at-5-52-13-pm.png" alt="User: "Screen Shot 2021-04-14 at 5.52.13 PM.png"" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <ul><li>To learn how to <em>set up and use Quick Links</em>, see:</li></ul><div class="js-embed embedResponsive" data-embedjson="{"body":"The Quick Links menu is a great feature in your Higher Logic Vanilla (Vanilla) community because it makes it easier for your community members to navigate to essential parts of your community. By default, the menu appears in the side panel on most community pages. It displays a customizable list of \"quick access\" links to:…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/365","embedType":"link","name":"Configure Your Quick Links Menu - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/365" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/365 </a> </div><h3 data-id="user-cards"><strong>User Cards</strong></h3><p>User Cards is a new feature that displays information about a user when their username is clicked in the community. The "card" contains a link to the user's profile, as well as activity information.</p><ul><li>This feature can be enabled in your Dashboard: <strong>Settings > Addons > Labs</strong>.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/51OY8OITMGUH/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/51OY8OITMGUH/image.png" alt="User: "image.png"" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <ul><li>To learn more about <em>setting up User Cards</em>, see:</li></ul><div class="js-embed embedResponsive" data-embedjson="{"body":"User Cards are a convenience feature that enable users to see a preview of a user's profile without needing to navigate to their profile. 📝 NOTE: User Cards are available, by default, for our Knowledge Base and Foundation-based themes. Users must also have the View > Profile permission to see User Cards. User Cards…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/322","embedType":"link","name":"User Cards - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/322" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/322 </a> </div><h3 data-id="search-page"><strong>Search page</strong></h3><p>Vanilla's <a href="https://success.vanillaforums.com/kb/articles/382" rel="nofollow noreferrer ugc">updated Search service</a> features a new Search page.</p><p>You can integrate the new Search page into your legacy theme to start using the new features, such as Member Search and search sorting.</p><ul><li>This feature can be enabled in your Dashboard: <strong>Settings > Addons > Labs</strong>.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/BFSJDLIO95AY/screen-shot-2021-04-09-at-7-54-13-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/BFSJDLIO95AY/screen-shot-2021-04-09-at-7-54-13-pm.png" alt="User: "User: "Screen Shot 2021-04-09 at 7.54.13 PM.png""" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <ul><li>To learn <em>all about the new Search page</em>, see:</li></ul><div class="js-embed embedResponsive" data-embedjson="{"body":"We have introduced a new Search service for Higher Logic Vanilla (Vanilla) communities. To get the most from the new Search service, use the new Search page so that you can take advantage of these great features: Member Search Search Term Highlighting Search Sorting Places Search New Search service availability The new…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/383","embedType":"link","name":"Enable and Configure the New Search Page - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/383" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/383 </a> </div><h3 data-id="customizable-discussions-list"><strong>Customizable Discussions list</strong></h3><p>With <a href="https://success.vanillaforums.com/kb/articles/392" rel="nofollow noreferrer ugc">release 2021.010</a>, a new <strong>Layout</strong> option is available for Discussions.</p><ul><li>This option can be enabled in your Dashboard: <strong>Settings > Appearance > Layouts</strong>.</li></ul><p>The layout is customizable in Theme Editor.</p><ul><li>To learn how to configure this layout, see:</li></ul><div class="js-embed embedResponsive" data-embedjson="{"body":"When setting up your Higher Logic Vanilla (Vanilla) community, you can choose from a variety of layouts in order to control the appearance of your community pages. The layouts are available to set the design of three main pages of your community site: Homepage - your community's \"landing page.\" Here, your users are…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/430","embedType":"link","name":"Layout Settings - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/430" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/430 </a> </div><h3 data-id="tiled-category-layout">Tiled Category Layout</h3><p>With <a href="https://success.vanillaforums.com/kb/articles/392" rel="nofollow noreferrer ugc">release 2021.010</a>, a new <strong>Layout</strong> option is available for Categories.</p><ul><li>This option can be enabled in your Dashboard: <strong>Settings > Appearance > Layouts</strong>.</li></ul><p>The layout is customizable in Theme Editor.</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/M0BIL4PNZXLF/screen-shot-2021-06-21-at-5-30-00-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/M0BIL4PNZXLF/screen-shot-2021-06-21-at-5-30-00-pm.png" alt="Screen Shot 2021-06-21 at 5.30.00 PM.png" height="661" width="1265" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <ul><li>To learn how to configure this layout, see:</li></ul><div class="js-embed embedResponsive" data-embedjson="{"body":"When setting up your Higher Logic Vanilla (Vanilla) community, you can choose from a variety of layouts in order to control the appearance of your community pages. The layouts are available to set the design of three main pages of your community site: Homepage - your community's \"landing page.\" Here, your users are…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/430","embedType":"link","name":"Layout Settings - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/430" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/430 </a> </div><h2 data-id="customizing-foundation-pages-components-with-custom-or-legacy-themes">Customizing Foundation Pages & Components with custom or legacy themes</h2><p>📝 <strong>NOTE</strong>: Vanilla recommends performing these steps in your staging site before committing them to you production site.</p><h3 data-id="1.-copy-your-theme">1. Copy your theme</h3><p>Navigate to the Themes section of your Dashboard Settings</p><p>Make a copy of your existing theme. This will launch Theme Editor.</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/PAXPU9ZTS4L0/screen-shot-2021-04-09-at-7-58-11-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/PAXPU9ZTS4L0/screen-shot-2021-04-09-at-7-58-11-pm.png" alt="User: "User: "Screen Shot 2021-04-09 at 7.58.11 PM.png""" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="2.-make-your-edits">2. Make your edits</h3><p>Theme Editor works best for Foundation themes, but can be used to customize Foundation-based pages and components that are enabled in your theme, such as the new Search page.</p><p>Within the foundation theme editor you can configure colours, font, links & button and more styles.</p><p>You can find detail info on using Foundation here:</p><div class="js-embed embedResponsive" data-embedjson="{"body":"Vanilla's 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. The Theme Editor editor was designed to modify our Foundation theme template, but if you have started, or are interested in integrating some of our new pages, widgets…","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><p><br></p><p><strong><em>N.B. When you use the editor on a non-Foundation theme, the settings you apply will only impact your Foundation-based components.</em></strong></p><h3 data-id="3.-configure-your-title-bar">3. Configure your title bar</h3><p><em>This is only necessary if you've enabled features that use their own Foundation pages such as Knowledge Base or Search.</em></p><p>Your title bar sits below the header and contains navigation links. With the theme editor you can:</p><ul><li>Configure the title bar colours/styles</li><li>Control the title bar height</li><li>Update your logo and link</li><li>Customize the navigation links</li><li>Control alignment options</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/HQUJJ5G76ES6/screen-shot-2021-04-09-at-8-08-19-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/HQUJJ5G76ES6/screen-shot-2021-04-09-at-8-08-19-pm.png" alt="User: "User: "User: "User: "Screen Shot 2021-04-09 at 8.08.19 PM.png""""" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>You can read more about the title bar here: <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><h3 data-id="4.-insert-your-themes-header-footer-code">4. Insert your themes header & footer code</h3><p><em>This is only necessary if you've enabled features that use their own Foundation pages such as Knowledge Base or Search.</em></p><p>Go to the Header & Footer tabs and insert your header & footer HTML. Use the CSS & Javascript tabs to further customize these.</p><h3 data-id="5.-apply-your-new-template">5. Apply Your New Template</h3><p>Once you've made your changes, give your copy a unique name and save it.</p><p>From here, find your new template on the Themes page and click "Apply" to make it live!</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/4WKYN3XT55DL/screen-shot-2021-04-09-at-8-19-17-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/4WKYN3XT55DL/screen-shot-2021-04-09-at-8-19-17-pm.png" alt="User: "User: "Screen Shot 2021-04-09 at 8.19.17 PM.png""" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="faqs">FAQs</h2><h3 data-id="can-i-apply-pockets-on-foundation-based-pages-to-style-them">Can I apply pockets on foundation-based pages to style them?</h3><p>Pocket location do not exist on Search or Knowledge Base pages and so pockets cannot be used. If you need to add custom theming to these pages, it is recommended to use the theme editor. Or, for more advanced customization, use <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference." rel="nofollow noreferrer ugc">theme variables</a>.</p><p>Existing pockets will not be displayed on these pages, so if you have a pocket that must be shown on these pages you will need to add the code to the theme editor (header, footer or javascript tabs).</p> </article> </main>