[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.
#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.