[Product Post] Theme Tip: Basics of Customizing Vanilla

3 minute read

March 13, 2015

[Product Post] Theme Tip: Basics of Customizing Vanilla

Choosing a Theme

Don’t get too hung up on which theme you choose. It can be modified by overriding default behaviour. Instead select the theme/color combination that most closely resembles your preferences.

Customize Theme: HTML

When you begin to customize your theme from the backend, you will see two tabs. The first is the Customize HTML tab.

This is a smarty based template, that allows you to add HTML. It is made up of Header, Navlinks, Content, Panel and Footer. This is true of any theme.

elements-vanilla-theme

You can add links to your blog or other areas of your site in the navlinks. If you are using Javascript in the page you should place it in between the {literal} tags.

All the content for your Vanilla Forum comes from this page. If you want content to only appear on a certain page, you should review our article on the use of smarty conditionals. This allows you to add elements depending on the page you’re on. For example, if you want to embed a video on the category index page, you would add the code right after the asset panel in between a conditional:

{if $BodyID =='vanilla_categories_index'}
VIDEO CODE
{/if}

Hypothetically, you could erase all the HTML in Customize HTML Tab and start from scratch (with the required elements: header, content, panel, footer). This is a much more advanced method, and we strongly caution against it unless you have a great deal of experience.

Open Source Users: The HTML is what you would find in your default.tpl file. If you are converting to hosted, all your need to do is copy and paste the content of your default.tpl into this tab.

Customize Theme: CSS

The second tab of the customize theme section is only for CSS customization. Every theme selected has a default CSS that is loaded. With this page you can add any CSS or override any CSS found in your theme by adding !important. For example, if you want to change the Message colors, check out this tutorial.

To locate what to change in your theme, use a tool like Mozilla’s Firebug or Chrome dev tools. It will help you find out the name of the class or div and allow you to try out your changes in your browser before making any modifications to the CSS of your theme.

Open Source Users: The CSS is what you would find in your custom.css file. If you are converting to hosted, all your need to do is copy and paste the content of your custom.css into this tab.

These are just the basics of modifying your Vanilla Forums theme. If you’re new to HTML and CSS customization, the following tutorials on other fundamentals will come in handy.

https://www.khanacademy.org/computing/computer-programming/html-css
http://www.codecademy.com/en/tracks/web

We hope you found these tips helpful. Check under the product category for more product tips.

News product

Share Your Thoughts

Your email address will not be published.

Adrian Speyer

Written by Adrian Speyer

Adrian Speyer is the Head of Community and Lead Evangelist for Vanilla by Higher Logic. Besides spending many years in digital marketing, Adrian has been building communities of all sizes for over 20 years.

Have an Article for Vanilla's Blog?

Send us an email to [email protected] with your topic idea and we'll circle back with our publishing guidelines.

subscribe-1
Subscribe to the Community Corner Newsletter and get expert insight and analysis on how to get the most out of your online community every Friday.

    Request a Demo

    Schedule a product demo now.

    Contact Us