[Product Post] Theme Tip: Basics of Customizing Vanilla

Posted by Adrian Speyer on Mar 13, 2015, 12:12:54 PM
Find me on:

3 minute read

Vanilla offers you the ability to customize your theme to a greater extent than any other hosted community platform. You can make HTML and CSS changes straight from the backend of the software, with no FTP needed. You can also roll back any of the changes you make at any time.

Vanilla Forums does offer theming services, and you can speak to your account executive about this route if you wish. If you prefer to go it alone, here are some tips to make sure you get the most from customizing your Vanilla Forums. We recommend you only customize your theme if you have some HTML or CSS knowledge. While our support team is very helpful, troubleshooting your customizations is beyond our standard support offering.

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.

Topics: Product, News

Related posts

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.

Search this blog

Recent Posts

community playbook

Have an Article for Vanilla's Blog?

Send us an email to pr@vanillaforums.com with your topic idea and we'll circle back with our publishing guidelines.