Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Category Icons [solution]

Rardor81Rardor81 New
edited August 2010 in Vanilla 2.0 - 2.8
I've been looking around and can't find any recent discussions about Category Icons.

I read one discussion that said each category is assigned its own unique CSS class (this post may have been a number of years old). Is this still the case? I don't see any category-specific css classes, though perhaps I'm looking in the wrong places (or my theme just doesn't use them).

Otherwise, how does one go about creating category icons? I understand that it may not be an easy fix- any info/direction is much appreciated.



  • Options
    edited July 2010
    You can do this with CSS3 nth-child selectors. You can read about it here for example:

    IE does not support them, so you can make it to support them with a little help of JQuery. Just write this selectors inside JQuery.
  • Options
    Rardor81Rardor81 New
    edited August 2010
    Wow- I didn't know CSS could do all of that. That's a great link, thanks @sababon!

    So, I tried using the nth-child technique, but I couldn't figure it out. I did however find a way to get it working using attribute selectors.

    The example they provide is for putting an icon next to word documents:
    a[href$=".doc"] { background: url(word.gif) no-repeat left 50%; padding: 2px 0 2px 20px; }

    So, tweaked, I have it checking the end of the urls not for file formats, but for Category names. (Using "categories/food" instead of just "food" for accuracy)
    a[href$="categories/food"] { background-color: #00FF00; padding: 2px 0 2px 20px; }

    Probably not the most elegant solution, but so far it seems to work.
Sign In or Register to comment.