WordPress.org

Ready to get started?Download WordPress

Forums

How to I assign different CSS classes categories' names? (7 posts)

  1. vsjambois
    Member
    Posted 1 year ago #

    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?

  2. paulwpxp
    Font hero
    Posted 1 year ago #

    CSS attribute selectors
    https://developer.mozilla.org/en-US/docs/CSS/Attribute_selectors

    Just for example, at the TwentyTwelve demo site here
    http://wp-themes.com/twentytwelve

    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;
    }
  3. vsjambois
    Member
    Posted 1 year ago #

    *smacks forehead*

    That's easy enough, thanks!

  4. vsjambois
    Member
    Posted 1 year ago #

    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?

  5. vsjambois
    Member
    Posted 1 year ago #

    Oops, here's the link... http://www.themarsreel.com/

  6. vsjambois
    Member
    Posted 1 year ago #

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

  7. paulwpxp
    Font hero
    Posted 1 year ago #

    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 {
    	display:inline-block;
    	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.

Topic Closed

This topic has been closed to new replies.

About this Topic