-
Global Theme Styles
You have a lot of control of your theme's fonts and colors by using global theme variables. We strongly recommend that you start your theming with editing variables to rough in the basic look and feel of your site. For some, this will be enough to get a beautify, on brand theme. For others, having the right fonts and…
-
Theme Title Bar
The title bar contains the navigation for your community. It is an integral part of Vanilla. Without the title bar, users would not able to access all the functionality of the site. Title Bar Elements The title bar has three main elements: Logo: You can upload your logo to the title bar. Menu: The menu is the main…
-
Theme Banner
The banner shows up below the title bar on home pages. It provides a great way to welcome users first visiting your site and also showcases your brand. 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…
-
Theme Content Banner
The content banner is an option to be considered in a content page like an article page or a discussion page, for example. The content banner appears below the title bar and helps with the brand of your product/service. The size of the content banner is smaller than the regular one. It starts with 120px height and goes…
-
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…
-
Theming Buttons
Your site's buttons are often an important part of your brand. Because of this, we offer a lot of control over the look of your buttons. Types Of Buttons There are two types of buttons you'll normally theme: primary and standard. Primary buttons are used as the primary action on most forms. Usually they use your brand…
-
Navigation Links
What are the navigation links? The titlebar is the navigation toolbar at the top of knowledge base and Foundation based themes. It looks like this by default. Customizing Navigation Links We can customize the Titlebar to use any custom navigation links we would like, instead of the default ones. These can vary by language,…
-
Responsive breakpoints
In the new Theming System, in the theme banner and content banner, you can have different responsive breakpoints. It means that you can upload different size images for your mobile, tablet and desktop banner. There is a toggle on the new Theming System that can be turn on. Turning on, you can upload images for mobile and…
-
Custom Font
Step 1: Load the fonts Custom Fonts through theme If you're making a custom theme, the best and easiest way is to declare the font in fonts.json Example: [ { "type": "url", "name": "Nunito", "fallbacks": "", "url": "https://fonts.googleapis.com/css?family=Nunito:400,600,700&display=swap" } ] Step 2: Configure font Set Body…