• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Create an ID for each category

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Create an ID for each category

This topic is: resolved

Tagged: categories, jquery, Magazine Pro, post meta

  • This topic has 2 replies, 2 voices, and was last updated 8 years ago by patfancygirl.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • March 30, 2015 at 1:28 am #146055
    patfancygirl
    Participant

    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
    March 30, 2015 at 3:15 am #146067
    ᴅᴀᴠɪᴅ
    Member

    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

    March 30, 2015 at 4:55 am #146078
    patfancygirl
    Participant

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

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble