Category Icons [solution]

Rardor81 · July 2010

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.

Thanks

sababon · July 2010

You can do this with CSS3 nth-child selectors. You can read about it here for example: http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/

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.

Rardor81 · July 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.

Category Icons [solution]

Comments