- This topic has 3 replies, 2 voices, and was last updated 2 years, 10 months ago by
.
-
Posts
-
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,
PauloHi,
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
lifestyleand we want it with green border, we can do this:article.category-lifestyle{ border: 2px solid green; }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
- You must be logged in to reply to this topic.