Create an ID for each category

[patfancygirl]

Hi! Is there a way to create a CSS class for each category name so that I can style it? I'm trying to achieve the same effect as this site - http://www.pepper.ph/ where category titles have different background colors.

I'm using the Magazine Pro theme, where I replaced the entry-date on top of the featured image with entry-categories using the genius tutorial sent over by Tonya.

Thanks in advance!

http://www.fancygirlweb.com/#home-middle

[ᴅᴀᴠɪᴅ]

There are already classes added to the <article> element which specifies which category the post is in so you can use that to target it.

(side note: as the CSS you already have controlling the background-color is so specific, it means to override it you need to be just as specific or more - so I advise, unless you need the .js .content at the beginning, its probably a good idea not to include them, otherwise in the future you'll always have to. - Im not aware of you're level of understanding, but i thought i'd mention it anyway.)

Anyway, as it is now. This is how you would change the color of each categories..

eg of changing lifestyle category to blue and uncategorized to red.

.js .content .home-bottom .category-lifestyle .entry-categories {
   background-color: blue;
}

.js .content .home-bottom .category-uncategorized .entry-categories {
   background-color: red;
}

etc.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[patfancygirl]

*face-palm moment* Thank you David! That was genius!

[Author]

Posts