Vanilla’s new foundation editor is meant to be customized using the Theme Editor UI, Theme Variables and to be further enhanced with Pockets and Widgets.
How do pockets work with themes?
Pockets will still work on the Forum, but are not supported currently in the KB.
It is not recommended to use pockets to override CSS. If you are looking to customize an element of your Foundation theme and the option does not exist in the Theme Editor UI or in Theme Variables, please submit a feature request.
If you find we’re missing a pocket location or option, please submit a feature request. We would rather improve the product over all than to have customizations scattered across customer themes.
What happened to the Legacy Customize Theme tab?
The new theming system is completely incompatible with customize theme. We believe the benefits outweigh the cons of not supporting customize theme. We will be updating our app with more and more options as time goes on to accommodate a wide range of customizations.
If you are trying to customize a component that does not appear in the Theme Editor UI or Theme Variables, we want to hear about it! Submit your idea here.
I’m an Enterprise customer -- Can I edit foundation in github?
You can still edit foundation as a file based theme, but it is strongly recommended to edit using established theme variables to customize.
See developer docs:
Foundation does have a default-master, with less code in it. We discourage modifying it for your theme.
Theme hooks still work as normal for the Forum within file based themes, but are not supported in the KB. We’re moving away from that and towards a component configuration approach.
If you find we’re missing some pocket locations or a hook, please submit a feature request. We would rather improve the product overall than have customizations scattered across customer themes.
We do, however, support custom JS in our theme editor.
Caveat: Randomized Hashes
Foundation introduced a great deal of improvement and ease of use for theming by introducing a brand new theme editor. To facilitate that, some internal refactoring of the styling engine, in order to improve stability and reduce chances of future regressions, was necessary. In order to complete this refactoring, the way various CSS class names are generated has changed.
Some site owners and developers may notice that various new Foundation components, like the Title Bar, Banner, Events module, and more 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 are changing slightly. That same component will now have a CSS class name in a format similar to
Recommendations & Best Practices
To maximize stability for your theme customizations and reduce technical debt, we have a few recommendations:
- The best practice is to 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 may change in a future release. You should change your CSS selectors to reflect this. For example using [class*="titleBar-navigation"] instead of
- Be aware that features are actively 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 or bug fixes.
- If you have already styled on these types of classes, it is recommended that you test each release on your staging environment. You may need to update your CSS if the particular hash you have used has changed.