[Product Post] Theme Tip: Customizing Categories

2 minute read

November 21, 2014

[Product Post] Theme Tip: Customizing Categories


To add an image, edit any previously category and add a properly sized image. You will want to ensure all the category icons are the same size, so they have a uniform look. Consider using a standard size like 50×50 px or 64×64 px.

Adding Category Classes

If you have some CSS knowledge, you can also add a classname to your category. This will allow you to give categories a specific color or even add background images.


Just as we showed in adding an image, you can add a class. This can be referenced in your customize theme CSS tab. Here is an example of how we would add a background color to a category  called “off-topic”.  The css class is “offtopic”:

.Item.offtopic {
background-color: #000000 !important;

The result:

Here is how we can an example of adding a custom image:

.Item.offtopic {
background-image: url("wall.jpg") !important;
overflow: hidden;

The result:


Replace example.jpg with a link to whatever background image you want to use. There you have it! A way to give your categories some personality.


Categories also have a natural class you can use, so for example for off-topic, you can use the URL slug:

.Item.Category-off-topic {
background-color: #000000 ! important;

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

Vanilla Forums offers a cloud based solution which can easily be themed to match your brand. Try Vanilla Forums Cloud Solution free for 30-days.

News product

Share Your Thoughts

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

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 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