This documentation refers to our legacy theming system. It is strongly recommended to use our new Foundation theming system.
You can read about migrating to the new theming system here.
Vanilla’s legacy base theme HTML can be modified and CSS can be overridden. In order to modify a Vanilla theme, you must possess good knowledge of HTML and CSS. Please consult the Vanilla Forums Theme Guide for detailed theming instructions.
Using Web Fonts
The easiest way to change the font in the base theme is to use a web font. You will have to add a link to the font in the theme HTML and target the
For example, to change the font to the Google Font Lato:
- Get the link snippet from fonts.google.com:
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> - Get the CSS rule:
font-family: 'Lato', sans-serif; - Go to HTML tab on the Customize Theme page of the Vanilla Dashboard
- Add the font link snippet above in between the tags
- Add the following to the CSS tab:
body {font-family: 'Lato', sans-serif;}
Notes:
- Knowledge of CSS is required to use the CSS customization features of Vanilla
- If you would like to install a font that is not available as a webfont, please see How to Setup Up a Custom Font.
- For safe implementation, use smarty’s escape variable modifier.
- Be careful when using the $Path variable: Unsafe implementation:{$Path}. Safe implementation: {$Path|escape:‘url’}.
Additional Resources:
