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.

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

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.

The class that needs to be changed is .AcceptedAnswers.

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.