We're merging with GenerateBlocks! Learn more here.

[Resolved] Define CSS style based on post category

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Define CSS style based on post category

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #22851
    P
    Participant

    Hi there,

    Feel free to direct me to a previous thread in case i’ve missed it :).

    I’m using Generate Press as a theme (paid license, Blog add-on activated) with your WPSP plugin (pro version) to filter and show posts belonging to different “News” categories (only 1 category, mutually exclusive) in a new page. It’s a simple grid (no cards style, no carousel), each entry showing the title, meta (date, category, tags), small excerpt and read more button.

    I would like to style each displayed entry according to the category it belongs to, for example, by defining CSS classes with a different border colour for each category. Could you please advise on the best/recommended way to query for this meta property and call/apply the corresponding CSS class?

    If this question is out of scope for this forum, please let me know in case you can provide paid support nonetheless. I would still like to leave the solution in the forum afterwards, should someone have the same question 🙂

    Thank you in advance for your assistance and best regards,
    Paulo

    #22873
    elvin
    Moderator

    Hi,

    Can you specify how you want the entries to be indicated?

    This is 100% possible as WPSP includes the category’s slug as a class selector on its post entries.

    Say, we have a category named “Food” with a slug of food, if we want all the posts under “Food” category to have red border, we can simply do that with CSS:

    article.category-food{
    border: 2px solid red;
    }

    The format of how the category slug is added to the entry’s class list is category-[slug].

    That said, say we have another category named “Lifestyle” with a slug of lifestyle and we want it with green border, we can do this:

    article.category-lifestyle{
    border: 2px solid green;
    }
    #22882
    P
    Participant

    Dear Elvin,

    Thank you, that’s perfect! I had overlooked that class selector since i was looking further down in the markup.

    I’ve managed to do what i wanted by specifying the correct selector but i also add to apply “!important” at the end of the property value. In my case:

    article.category-[slug] .wp-show-posts-inner {
    border: 1px solid #371497 !important;
    }

    You can close this one. Thanks and best,
    Paulo

    #22927
    elvin
    Moderator

    No problem. Glad to be of any help. 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.