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.

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.