The Style Guide is the behind-the-scenes tool that maintains the look of your Higher Logic Vanilla (Vanilla) community and knowledge bases. It is a "template" that houses your organization's unique style settings: your font, colors, backgrounds, and other styling elements, by using a set of configurable variables.
NOTE: In Vanilla's previous theming system you could edit the HTML, CSS, and JS directly in your theme.
The style guide makes it easy for you to customize your site using the Style Guide Editor. The customizations that you make with the style guide editor enable you to showcase your "brand" on your community and your knowledge bases.
Style Guide and Foundation
Foundation provides you with an adaptable style guide system that simultaneously allows for your customizations and our adding of new features that use Theme Variables.
Advantages
Our previous system served us well over the years, but this new system and editor work very differently. We’re excited to show you the many advantages of this new process. Foundation is built to allow for new features to be easily enabled and introduced making Foundation more stable for the future and will allow for the theme to evolve with the community.
How does this new system work?
Foundation includes a set of variables that control all your theme customizations. Whether you use the theming editor UI, create your own file based theme or update variables using the API, those modifications get integrated into the site’s variables and get passed to the various components.
Read more on the different ways to edit themes:
Quick Set Up
The new system works with the configuration of assets and variables. This allows us to do a lot with very little overhead. Only a few colors and image uploads are required to skin your whole site! From there you can make more detailed customizations, but you get to a great starting point with minimal effort.
Read more:
Mobile Experience
Previously, you needed to manage your desktop and mobile themes separately. Our new theme and theme editor components have been made to be mobile-responsive out of the box, making your options naturally flow through on mobile as well.
Accessibility
All of our components are built with accessibility in mind. By using our system, you are ensuring an inclusive experience for all your users
Read more:
QA & Stability
By editing the HTML/CSS/JS directly, you are essentially creating your own custom version of Vanilla. This leads to each customer having their own unique set of code and customizations. This causes delays in support and requires developer resources in house to help troubleshoot. With this config-based system you are now applying your styles to a curated list of well tested components and variables. These components and variables are available to all customers and are frequently used. This means these components will be commonly known, regularly tested, and well documented.
Features
Here are some of the features you will be able to take advantage of with Vanilla's theming system.
- Easily choose fonts and colors of the site. You can start with a few colors and have them flow through the theme, then dig deeper to make specific tweaks. Read more on configuring global styles
- Customizable layouts and flexible widgets like Featured Categories and Tabbed Discussions you can place in multiple areas of the page, or even show selectively by role to help you showcase the most important aspects of your community. Check out our Widgets & Modules
- A completely responsive theme experience. Be confident that your theme will look great across all devices.
- Optimized SEO and enhanced accessibility
- Add your own header and footer to match your family of sites so that users clicking around your web presence feel like they are in the same place.
- Add custom JavaScript for your external analytics or ads using current best practices for JavaScript security and XSS protection.
Got a great idea?
After reading this guide and trying your hand at building a custom theme, you may find that some controls are not available to you in the code or via the UI. Do not fret. We want to know which features and components you would like to be able to customize. This information will help inform future development sprints and initiatives. If you have questions or feedback to share, submit this via our Product Ideas category. This notifies our Product team and allows them to make informed decisions as they plan upcoming sprints and releases.
Ready to get started?
Start here: