[Product Post] Theme Tip: Customizing Categories

Posted by Adrian Speyer on Nov 21, 2014, 4:02:49 PM
Find me on:

2 minute read

We know you spend time making sure you create the proper categories for your community, but did you know you can customize things further? In the following article, we will show you two ways to make your categories have some personality.

Adding Category Images

To make your categories stand out, you can add an image to add a visual cue to the category name. You can do this at the time you create the category, or come back later to add one.

Edit_Category_Add_Image

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 50x50 px or 64x64 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.

Edit_Category_-addclass

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:
category-color

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

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

The result:

category_image_background

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.

Topics: Product, News

Related posts

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.

Search this blog

Recent Posts

community playbook

Have an Article for Vanilla's Blog?

Send us an email to pr@vanillaforums.com with your topic idea and we'll circle back with our publishing guidelines.