Vanilla’s Foundation style guide can be customized using:
You can make additional enhancements with Pockets and Widgets.
How do Pockets work with themes?
Pockets will still work in the community, but are not currently supported in the Knowledge Base.
It's not recommended to use Pockets to override CSS. If you want to customize an element of your Foundation theme but the option doesn't exist in Theme Editor or in Theme variables, submit a feature request.
What happened to the legacy Customize Theme tab?
The Foundation theme is not compatible with the Customize Theme functionality. We believe the benefits, ease-of-use, and functionality of the Foundation theme outweigh the cons of no longer supporting Customize Theme.
📝 NOTE: If you're trying to customize a component that doesn't appear in Theme Editor or Theme variables, submit your idea on our Product Ideas page.
Can I edit the Foundation theme in GitHub as an Enterprise customer?
- You can edit the Foundation theme as a file-based theme, but we recommend editing it using established theme variables to apply customizations. To learn more about using GitHub to create file-based themes, check out this article.
- Foundation does have a default-master, with less code in it. We discourage modifying it for your theme.
- Theme hooks still work for the community within file-based themes, but are not supported in the Knowledge Base. We’re moving away from that and towards a component-configuration approach.
📝 NOTE: If you find we’re missing some Pocket locations or a hook, submit a feature request. We would rather make improvements to the product than have one-off customizations across numerous customer themes.
- We do, however, support custom JavaScript in Theme Editor.
Caveat: CSS class name format changes
The Foundation theme introduces numerous improvements and ease-of-use for theming with the Theme Editor. To facilitate that, some internal refactoring of the styling engine was necessary (in order to improve stability and reduce chances of future regressions). In order to complete this refactoring, there was a change to how various CSS class names are generated.
Some site owners and developers may notice that various new Foundation components (e.g., Title Bar, Banner, Events module) had some seemingly randomized characters at the end of their CSS classes (for example, .titleBarNav-navigation_f45h). These classes are not stable to apply CSS to, and the recommended way to adjust their appearance is through the variables for their associated components.
In this release, the format of these CSS class names is changing slightly. That same component will now have a CSS class name in a format similar to .vanilla-579lyi-titleBarNav-navigation.
Recommendations & best practices
To maximize stability for your theme customizations and reduce technical debt, consider the following recommendations and best practices:
- Try to use theme variables for these components (which also have inline documentation in the Theme Editor). This is the most scalable and stable method.
- If you still must style on the CSS class, be aware that the hash after "vanilla" might be different in a future release. You should change your CSS selectors to reflect this. For example, using
[class*="titleBar-navigation"] instead of .vanilla-579lyi-titleBarNav-navigation. - Be aware that features are being added to these types of components that can be easily and safely controlled through the documented theme variables. You may need to validate your CSS again in future releases if the structure of the component changes to accommodate new features and/or bug fixes.
- If you have already styled on these types of classes, we recommend that you test each release on your staging environment. You might have to update your CSS if the hash you have used has changed.
✔️ TIP: We recommend that you bookmark our Release Notes Updates page and update your notification preferences to receive email notifications of our latest releases.