Theme Editor Overview - Vanilla Success

/* * These styles apply ONLY to the header and footer assets. */ * { padding: 0; margin: 0; box-sizing: border-box; } .footer { background: #f5f5f6; color: #555a62; font-size: 14px; line-height: 1.5; padding: 18px 0; } .footer-wrap { padding-left: 18px; padding-right: 18px; max-width: 1236px; margin: 0 auto; } .footer a { color: #0291db; } .footer a:hover { color: #0276b3; } .footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: -3px; } .footer-col { padding: 0 3px; } .footer-col-copyRight { justify-content: flex-start; } .footer-col-logo { justify-content: flex-end; } .footer-col-copyRight, .footer-col-logo { flex: 1; display: flex; } .logo { width: 120px; height: 28px; opacity: 0.6; } @media screen and (max-width: 768px) { .footer-row { display: block; } .footer-col { width: 100%; text-align: center; margin: 6px 0; } .footer-col:first-child { margin-top: 0; } .footer-col:last-child { margin-bottom: 0; } .footer-col-copyRight, .footer-col-logo { justify-content: center; } .logo { margin: 0 auto; } } /*# sourceMappingURL=styles.css.map */

You have a lot of control of your theme's fonts and colours 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 beautiful, on brand theme. For others, having the right fonts and colours offers a great starting point for more complex designs.

Creating a New Theme Template

To get started setting up your global theme styles, start by logging into your Vanilla community as an Administrator. In your Dashboard settings you will have a new "Themes" section in your menu -

Screen Shot 2020-05-01 at 5.57.47 PM.png

By default, you will have our Foundation theme applied. You can start by making a copy of this template. This will launch our Theme Editor.

The Theme Editor is broken down into five major sections:

Styles
Header
Footer
CSS
Javascript

Styles

Here you can update your global styles with the click of a button, and customize things like:

Brand colours
Banner Assets
Button Styles
Fonts and more.

You're able to see a preview of your updates as you pick and choose your various options.

Header and Footer

Easily insert the HTML for your Header and Footer in these sections.

CSS

Compliment your custom HTML Header and Footers with CSS.

Javascript

Easily add Javascript like Google Analytics tracking codes, or something more custom using the Javascript tab.