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 */

Vanilla's new Theme Editor makes it easy to create and modify custom theme templates so that your community and knowledge base can match your unique brand.

The Theme Editor editor was designed to modify our Foundation theme template, but if you have started, or are interested in integrating some of our new pages, widgets or components you may use the theme editor to modify your custom or legacy theme templates to prepare for the integration. Find out more about which pages and components you can integrate into your custom themes -

https://success.vanillaforums.com/kb/articles/384-integrate-foundation-pages-components-into-your-theme

Creating a New Theme Template

As a new Vanilla customer, you will be using our Foundation theme template by default. To start creating your own custom template

Navigate to the Themes section of your Dashboard settings
The first thing you will see is your currently applied basic Foundation template
Copy the Foundation template, this will launch the Theme Editor

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

Modifying a Custom or Legacy Theme Template

If you've been with us for a while you may already be using one of our legacy themes such as Bootstrap3, Defletor or TripleA, or you may have a completely custom theme. If this is the case, you can continue to manage and modify your theme in the same way you did before, but if you would like to start integrating our new pages, widgets and components you will need to create a new copy of your custom theme to be able to modify their styles and settings.

On the Themes page of your Dashboard settings make a copy of your existing theme to get started:

Screen Shot 2021-05-19 at 3.41.43 PM.png

N.B. When you create a copy of a custom or legacy theme, the settings you apply in the theme editor will only impact your Foundation-based components.

Theme Editor Sections

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.

Use the navigation menu and/or theme preview to configure settings for different sections and components.

Screen Shot 2021-05-19 at 3.46.00 PM.png

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. This will apply to all Foundation-based pages.