-
Theming Quickstart
This documentation is meant for developers using GitHub to create file-based themes. This feature is only available to Enterprise clients with their own cluster on Vanilla Cloud. The easiest way to get started is to start from another theme. Foundation is a good theme to use, as it is what our theming system is based on.…
-
Customizing The Title Bar
You customize the title bar in your variables.json asset or from the Styles tab in the theme editor. The following variables are related to the title bar (dots represent nested objects). Basic Customizations titleBar.height : The height of the title bar. Defaults to 48px.. titleBar.colors.bg : The background color of the…
-
Common Theme Components
In this section, we’ll be going through the most common theming options for our most common components. This list is not exhaustive, so if you don’t see what you need, you might need to dig yourself. See “How to theme a component” to learn how to do that. Global The most important variables to set are:…
-
Categories Module
This module is available starting from release/2020.021. The categories module can be used to display some subset of categories in various places in your theme with a few different visual layouts. Configuration Options This module has a few different configuration options available. apiParams A set of parameters passed the…
-
Theme Header and Footer
The theme header sits at the top of your site. You can put whatever you want in your header to ensure that it can pixel-perfect match the rest of your web site (if you have one). It completely belongs to you. Header And Footer Assets All of the header/footer information rests in the following assets: header.html : This is…
-
Customizing Global Theme Styles
In the theme editor there is a WYSIWYG editor for these variables. For file based themes you can set the values of the variables in your assets/variables.neon file. Basic Customizations global.mainColors.bg : The background color of your site. global.mainColors.fg : The foreground (text) color of your site.…
-
Accessing the Theme Header and Footer in Javascript
Once you've created a header and footer you may be wondering how run javascript on its contents. Headers and Footers are isolated from the rest of the page in order to prevent styling conflicts. This is done using the Shadow DOM. This means a normal method of querying/modifying a DOM node won't work. Don't worry though,…
-
Adding modules in Twig
These docs are meant for developers working on Enterprise level communities creating file based themes in github. If you are using the Theme Editor UI, please refer to this documentation: Adding Modules in Twig To add a theme module in twig, make use of the renderModule function. Example: {{ renderModule("NewEventsModule",…
-
Customizing The Banner
There are a lot of variables that control the look of the banner. They are edited in your variables.json or the Style tab of the theme editor. Basic Customizations banner.colors.bg: The background color of the banner. banner.colors.fg : The foreground (text) color of the banner. Customizing The Search Bar The banner…
-
Add React Components to Banner
You can create your own components then register them to be rendered after or before the SearchBar into the banner. First, you have to implement your components inplugins/my-plugin/src/scripts/entries/forum.tsx or themes/my-theme/src/scripts/entries/forum.tsx to register the components. As described here :…