Legacy Theming Overview
The main goal of this documentation is to give support to existing themes developed using this system. Currently, there is a newer theming system in place that adds an extra layer of compatibility.
Legacy themes are kept in the /themes root directory within your Vanilla installation. Each theme must be contained in its directory.
A theme usually contains the following files:
These themes sometimes also present a set of custom styles to choose from within the same theme, this feature is called Theme Options. A good example of this feature exists in the Keystone theme.
Vanilla also has a selection of tools to support those themes and make development more intuitive:
- Theme Boilerplate: It contains all files necessary for a theme with customizable styles.
- Vanilla CLI: A command-line tool to make various tasks easier.
The addon.json file
This file will define basic information about our theme. See an exhaustive list of . Your theme should provably have something like this inside this file:
{
"type": "theme",
"key": "my-fancy-theme",
"name": "My Fancy Theme",
"description": "This is a fancy theme!",
"version": "1.0.0",
"authors": [
{
"name": "Your Name",
"email": "you@yourdomain.com",
"homepage": "
}
]
}
The key value (my-fancy-theme above) must exactly match the folder name, including capitalization. Some systems are case-insensitive and will ignore differences in capitalization, but others are not, so make sure they match!
Custom Styles
Your theme probably has a directory inside called design (if none exist you might as well create one). Inside of that directory, there must be a file called custom.css , your custom styles should be placed here. More complex themes may use a CSS pre-processor like scss or less in order to gain advanced CSS features. You can use these, just make sure that your output file is still called custom.css inside of the design folder.
Custom Scripts
A similar directory structure applies here. Your theme probably has a directory inside called js (if none exist you might as well create one) and within you will find a custom.js file. You can use this file to execute custom scripts in your theme.