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.

#Protip#

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.