Foundation is the latest theme in Higher Logic Vanilla (Vanilla), and our recommendation as the best option when creating a new theme or for updating an existing 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.
Before we begin…
Vanilla's latest theme, Foundation, provides an excellent mobile experience right out of the box, without the need for custom CSS work on your part.
- Check out Cloudflare Image Resize to learn how images are automatically scaled to the most appropriate size based on the device someone is using (phone, tablet, or desktop).
- If more granular control is needed, Foundation provides built-in tools that allow you to set specific responsive breakpoints for certain theme images.
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.
- If you're a legacy customer making the switch to Foundation, consider the following regarding the mobile experience. While Foundation provides an excellent mobile experience right out of the box, we recommend testing (on your staging site) how your existing theme(s) translate over to Foundation on a variety of screen sizes and devices before launching.
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:
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.
To learn more, see:
Create a theme
1. Access the Dashboard.
2. Navigate to Appearance > Branding & Assets > Style Guides.
3. From there, click Copy next to Foundation to create a theme.
📝 NOTE: Alternatively, scroll down to the Custom Themes section and click the +.
4. At the top of the page, click the theme title to rename it
5. Use the various tabs and styles to make your customizations (refer to the Theme Editor overview section below for details on each section of the Theme Editor).
6. When finished, click Save at the top right to create the theme.
Manage your themes
On the Appearance > Branding & Assets > Style Guides page, all of your custom themes are listed in the Custom Themes section.
Hover over a theme to display the Apply and Preview buttons.
Theme Editor overview
The Theme Editor provides several ways to update your community's aesthetic via its five tabs at the top.
Styles
Here, you can update your global styles with the many options in the right-hand panel:
✔️ TIP: The preview on the left updates in real time, making it easy to see your changes reflected as you work.
Header and Footer
These two tabs allow you to insert HTML for flexible customizations to your community's Header and Footer.
CSS
Customize your Header and Footer further with custom CSS.
📝 NOTE: Updates made in the CSS tab only apply to any custom HTML you've added to your Header and Footer.
JavaScript
Here, you can easily add JavaScript, such as Google Analytics tracking codes or something even more custom. 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 DOMContentLoaded.
The onVanillaReady event will fire once 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:
/**
* 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);
};
Or, even though it is not recommended, you might need to add custom CSS into the head:
/**
* 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);
};
Now you can create multi-line variables using the back-tick (`) instead of quotation marks to pass CSS or JavaScript:
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);
injectJS(js);
});
While onVanillaReady() only fires once per page load, you may need to execute javascript more often in response to the content of the page changing.
For this use: onVanillaContentUpdate(). This could be useful if your scripts need to re-run after some changes to the document, usually after some user interaction.
onVanillaContentUpdate(() => {
console.count("I should fire after any content is updated");
});
Important
Adding javascript which executes too often can cause performance issues or even lock up the page altogether. Its also possible for this function to execute multiple times successively if a function dispatches multiple updates to the DOM. (Eg. A third-party script adding a banner to the site and then removing it after some user interaction)
Pockets & Widgets
- 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.
- In addition to the Theme Editor, we have improved our Pockets feature to allow you to easily add Widgets to your community.
- 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're familiar with can still be built and configured by choosing the "Custom HTML" type.
Apply different themes to different subcommunities
With Foundation, you can apply different themes to different subcommunities.
To learn how to apply different themes to different subcommunities, see:
Advanced Settings: Theme Variables
Theme variables are the stable way to update your theme:
Additional resources
Click the link below to access a video expanding on what you learned in this article.
