Support » Themes and Templates » How to I assign different CSS classes categories' names?

  • Hi, sorry if this is the wrong place to post… wasn’t sure where it would fit best. My homepage displays article snippets from different categories. The category name is shown right about the snippet. I would like to give each category it’s own class so that I can give just the name that displays on each snippet different colors.

    So for example I have the Category/Name “Breaking” and a Category/Name “NBA”. On the pages that show the snippets and cat name, I would like “Breaking” to be blue and “NBA” to be red.

    How to I assign different CSS classes for each of my categories?

Viewing 6 replies - 1 through 6 (of 6 total)
  • paulwpxp


    Font hero

    CSS attribute selectors

    Just for example, at the TwentyTwelve demo site here

    I’ll be able to style cat name = “Uncategorized” and “First Child Category” with this bit of CSS

    .entry-meta a[title$="Uncategorized"] {
        background: blue;
    .entry-meta a[title*="First"] {
        background: red;

    *smacks forehead*

    That’s easy enough, thanks!

    Ok soooo…. it’s not working still. 🙁 It worked the first time I tried it and now, nothing. I cleared my cache and I just don’t get it.

    I dropped this in my Custom CSS:

    .entry-meta a[title$="Breaking"] {
    	background: #FF0000;

    Here’s my site and I need to change the background on the cats like Breaking, NBA, College, NBA Highlight, etc.

    Any other ideas?

    Oops, here’s the link…

    One more question… is there a way to only target the category titles that show up in the middle column?



    Font hero

    That code is an example for Twentytwelve theme, it won’t work for all other themes because not all the themes use the same markup.

    Your theme’s markup of this part already assigned bg color on the <span> containing the <a> so in order for this to work, first you have to reset the <span> to have no bg color and assign that default bg color to the <a> instead.

    /* move default bg color from <span> to <a> inside <span> */
    #column2 .entry-cat { padding:0;height:auto;background:none; }
    #column2 .entry-cat a {
    	height:16px; padding:0px 5px;
    	background-color: #336699;
    /* assign bg color using <a> attribute */
    #column2 .entry-cat a[href*="breaking"] { background-color:red; }
    #column2 .entry-cat a[href*="buzz"] { background-color:blue; }

    This code only works for middle column which is #column2, just keep defining for the rest of the cats using the same pattern.

    The *= mean exact word found in href, so that’s the cat’s slug.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to I assign different CSS classes categories' names?’ is closed to new replies.