This article is for Opensource clients or Enterprise clients with Theme Pull
Vanilla provides a boilerplate to build custom themes. It contains all files necessary for a theme with customizable styles.
Styles are written in SASS and most of it bases itself in SASS variables and inheritance. Variables are carried through sections and components making the final styles flexible but also consistent throughout the site.
Getting Started
Node and Yarn are prerequisites to use this tool. Please download and install the latest stable release from the official Node.js download page and yarn.
Notice: It is important that you install Node in a way that does not require you to sudo.
- Navigate to your theme folder and add the boilerplate package:
yarn add @vanillaforums/theme-boilerplate
- Run the installation command:
yarn run boilerplate-install my-custom-theme "My Custom Theme"
Replace with your theme key. This should be unique and the folder name, including capitalization. It should also follow the naming convention.
Replace with your theme name (keep the double quotes). This is the name that will appear on the dashboard.
This tool also has a build step, provided by the This step is necessary to generate scripts and stylesheets that run in the browser.
- Make sure the Vanilla CLI is installed, then run the following command on the theme folder to build:
vanilla build
Your theme is ready to be enabled. On your localhost navigate to Dashboard > Appearance > Themes and enable your theme.
Usage
You might want to start taking a look at src/scss/_variables.scss. There you can find most of the variables you need to customize your theme.
A good starting point is to create variables containing your brand values on the top of the _variables.scss, like colors, font family, sizes, etc.
Once your brand variables are set, you may start customizing!
Be careful with overwriting all variables. Some are heavily inherited and not meant to be overwritten. Doing so may break your layout.
To know more about the theme-boilerplate styles structure and conventions please visit the Theme Styling and Good Practices article. There you can find information about naming conventions, folder structure and good practices.
Building Styles / Javascript / Images
The boilerplate frontend assets are built with the Vanilla CLI.