Set different icons for each category title

Go down

Tutorial Set different icons for each category title

Post by Ange Tuteur on August 17th 2015, 1: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.

Set different icons for each category title Demo10


Set different icons for each category title 09615110 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>

Set different icons for each category title Captur73

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


Set different icons for each category title 09615110 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.

Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13219
Reputation : 2951
Language : EN, JA, FR
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum