Introduction
Welcome to Vanilla's theming system! We brought you this new system with the goal of allowing you and your teams to easily customize your site to give your community and knowledge bases a look and feel that showcases your brand.
We wanted this new system to ensure that your themes would be future compatible with any changes to our platform. A system that would allow for customizability, while still allowing us to deliver new features to your sites. We also wanted to provide a better user experience across all devices. To accomplish this, we’ve moved away from our old theming system where you could edit the HTML, CSS and JS directly in your theme, towards a config based system.
This guide will walk you through the basics of getting started on a new theme using our new and improved Theme Editor, and dives into more advanced settings for developers.
What's In This Guide
The purpose of this theming guide is the following:
- Introduce you to our new theming system and methods
- Show the overall structure of a theme so that you know all of the elements of a theme that you can customize.
- Give specific details of each theme asset so that you have a reference when theming your site.
- Give you an implementation guide so that you can get your theme up and running as quickly as possible.
How does this new system work?
We have a set of variables that control all your theme customizations. When you use the theming UI and/or create you own custom theme, those modifications get integrated into the site’s variables and get passed to the various components.
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.
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.
Mobile Experience
Previously, you needed to manage your desktop and mobile themes separately. With our new themes and editor theme components have been made to work on mobile devices out of the box, so your options will 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 a good user experience for all your users.
QA & Support:
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 trouble shoot. 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.
One of our biggest lessons learned over the years is that our old system could allow you to override our default templates, and consequently miss out on Vanilla's latest features and updates. This new theming system ensures that your themes will be future compatible with any changes to the platform, so we can keep delivering you new features. The options you pick for your theme will stay the same, even if we completely rework our code under the hood. This means that regardless of the updates we push, your custom styles will be applied to your community and KB.
Features
Here are some of the features you will be able to take advantage of with Vanilla's theming system.
- Easily choose fonts and colours of the site. You can start with a few colors have them flow through the theme, then dig deeper to make specific tweaks.
- A completely responsive theme experience. Be confident that your theme will look great across all devices.
- 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.
Missing Features
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 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.