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 Vanilla customers will be using our Foundation theme template by default.
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.
We recommend that legacy clients test out Foundation on their staging sites and strongly consider making the switch. Legacy customers with an existing theme should review this documentation: https://success.vanillaforums.com/kb/articles/277-moving-my-theme-over-to-the-new-theming-system
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 need to create a new copy of your custom theme to be able to modify their styles and settings. Read more about this here: https://success.vanillaforums.com/kb/articles/403-integrate-foundation-pages-into-your-legacy-theme
Getting Started
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:
Make any customizations (see below for details on each section of the theme editor)
Rename the theme copy
Save your changes
Scroll down to the bottom of your Theme page to see your saved theme. Note that you have the option to Preview OR Apply this new theme from here:
Please note that to continue editing an existing theme copy, click on the three dots in the top right corner and select Edit:
Navigating the Theme Editor
Once you’ve opened the Theme Editor, you will see many options to update different sections of your site. The Theme Editor is broken down into five major sections:
Styles
Here you can update your global styles with the click of a button, and customize things like:
Use the navigation menu on the right and/or theme preview to configure settings for different sections and components.
You are able to see a preview of your updates as you choose your various options, so do not be shy to try things!
Header and Footer
Easily insert the HTML for your Header and Footer in these sections.
CSS
Compliment your custom HTML Header and Footers with CSS.
JavaScript
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:
onVanillaReady((event) => {
// Your code goes here, for example:
console.log('onVanillaReady event', event);
});
This code will be executed before the page loads, similar to the event DOMConetentLoaded .
Pockets & Widgets
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.
In addition to the Theme Editor, we have improved our Pockets feature to allow you to easily add Widgets to your site. We will be adding to this catalogue in the future as well.
Pocket Types have been introduced to allow you to use the power of Pockets to add and configure Vanilla Widgets to your community pages. The Pockets you know and love can still be built and configured by choosing the "Custom HTML" type.
Applying different themes to different subcommunities
With Foundation you can easily apply different themes to different subcommunities.
Read more about this here:
Advanced Settings: Theme Variables
Theme variables are the stable way to update your theme:
