The forum of the forums

Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums

    Set different icons for each category title

    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°1

    Tutorial Set different icons for each category title

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

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


    text position in category punbb - 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>

    text position in category punbb - 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.


    text position in category punbb - 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.


    This tutorial was written by Mati.
    The icons in the example are from Icon Archive.

    TonnyKamper and Winging like this post

    • Back to top

      Current date/time is November 13th 2024, 6:50 pm