[Product] Customizing the Appearance of Your Vanilla Forum

3 minute read

March 14, 2013

[Product] Customizing the Appearance of Your Vanilla Forum

Vanilla gives you total theming control by letting you add your own HTML to the site’s header, footer and side margins and also lets you add your own custom CSS definitions that override the existing ones so that you can cascade from the selected theme’s design.

Before diving into the HTML and CSS, we suggest going through all the Dashboard’s configuration options and creating some stub content. Your won’t be able to appreciate your design unless the site looks somewhat like it will when populated with content.

  1. Create some sample content. Create a few categories, a few sub categories and a few discussions.
  2. Upload a logo.
  3. Upload your favicon
  4. Choose a home page: categories, recent discussions or the Best Of page
  5. Choose a layout for discussions and category pages: modern, table or mixed.
  6. Select how sub categories should be displayed.
  7. If you plan on displaying ads, we recommend using the Pockets plugin instead of putting the ad code right into your HTML. Ads can really impact the look and feel of the final product and so we recommend getting those installed before you start making theme modifications.
  8. Turn on some of the add-ons that you think you will want. Some popular add-ons that have an impact on look and feel are Badges, Reactions, Tags, Discussion Photos, Online and Q&A.

Modifying your site’s HTML

The areas around the main body of the page – the header, footer and margins – can be customized by editing the HTML by going to the Customize Theme page of the Dashboard.

Here is a simple example of adding website navigation links in the header of the Bitter Sweet theme.

Edit HTML to create navigation

Add the HTML inside the div class with element of TopMenu. Formatting these links will be done in CSS.

Edit HTML to create navigation links.

Modifying your site’s CSS

Most theme modifications are accomplished using CSS. Any CSS entered into the Customize Theme page will override the existing CSS. The best way to explore Vanilla’s CSS is to use the developer tools in your browser, for example Inspect Element in Chrome or Firebug for Firefox.

Here’s another simple example. In this case we have the Q&A plugin installed and we want to make the Accepted Answers stand out more by adding a border and changing the background colour.

CSS on AcceptedAnswers CSS class

The class that needs to be changed is .AcceptedAnswers.

Add CSS to override

Customizing Vanilla’s HTML and CSS does require some know-how. Luckily, you can preview your theme changes and roll-back to a previous version if you found that you have broken something.

If you are an Enterprise or VIP customer, you can test your theme changes on your staging account before applying them to your live community forum. Customers on the recently introduced VIP plan can develop a custom theme locally by modifying the actual theme files. Developing locally gives you more HTML templating flexibility and allows you to use Sass (Syntactically Awesome Stylesheets) for overriding CSS.


Share Your Thoughts

Your email address will not be published. Required fields are marked *

Luc Vezina

Written by Luc Vezina

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 to the Community Corner Newsletter and get expert insight and analysis on how to get the most out of your online community every Friday.
[contact-form-7 id="5700" title="Newsletter Form"]

Request a Demo

Schedule a product demo now.

Contact Us