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:
"name": "My Fancy Theme",
"description": "This is a fancy theme!",
"name": "Your Name",
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!
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
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
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.