Set different icons for each category title

by Ange Tuteur August 17th 2015, 12:07 pm

Set different icons for each category title

This tutorial will show you how to set different icons for each category title, such as in the example below.

1. Adding the tag to the category title

Go to Administration Panel > General > Forum > Categories and Forums, then edit a category. Edit

For each category you can add the following code before or after the title of the category.

Code:: <span class="cat1"></span>

text position in category punbb - Set different icons for each category title Captur73

Remember to change the class for each category title to something like cat1, cat2... or a unique name that you can remember such as speech_bubble. This is of course if you want to use a different icon for each category. If you want to use the same icon for multiple categories, then use the same class.

When you're finished, remember to save.

2. The CSS

Go to Administration Panel > Display > Colors > CSS stylesheet and add the code below to your stylesheet.

Code:: .cat1:after { content:url("ICON_URL"); vertical-align:top; }

Replace ICON_URL by the URL of your image, and remember to change the class .cat1 to the class you chose.