Blog Template - Different color for each category

Support
#1

Hello,

I am setting up a blog for my website. I’d like to achieve something but I am not sure how to do it. Let me explain:

I have 6 different categories and I’d like to use a different color for each category (for links, for icons, …). I marked in yellow all the elements I’d like in one specific color for each category on this screenshot:

Is it possible to achieve this? If yes, how?

Morever, I’d like the icon in from of the post’s title to be a different icon for each category (and in the color of the category). Is it possible? If yes, how?

URL: https://e-marketingmix.fr/blog/

Thanks,
Antoine

#2

Hello Antoine,

Thanks for writing in!

Yes, it’s very much possible. Using page and category id then prefix the same with relevant class you can style the elements individually. I am sharing links of few resources that will help you get started:

To change font color you can refer following post: https://www.w3schools.com/css/css_text.asp

Since you also want to change the icons you will need to use ::before selector. Here is a post that will help to you get started with ::before CSS selector: https://www.w3schools.com/cssref/sel_before.asp

We also have published icons list: http://demo.theme.co/renew-1/shortcodes/icons/

To find CSS selector you can take advantage of Google Chrome dev tools. Here is a video walk-through of Chrome inspect element:

Thanks.

#3

Hello,

Thanks for the detailed answer and sorry for my late answer, I was budy with many other things.

I tried to follow your instruction but did not manage to apply the changes to one category only. If I am on my blog page, I could change the style of the icon like this:

.entry-wrap
h2.entry-title::before {
  content: "\f02d" !important;
  color: red;
}

But how can I apply this style to only one category, so that I can have a different style for each category?
Is it possible to do the same with all other color elements of this page (mainly all the links)?

Thanks,
Antoine

#4

Hi Antoine,

Thanks for the update.You can do this with each of your category, for example for your referencement-et-contenu-web category, add the following code in your Customizer:

.category-referencement-et-contenu-web .entry-title:before {
    color: red !important;
}
.category-referencement-et-contenu-web .entry-title a {
    color: red !important;
}

Similarly you can do this with all of your categories by changing the name of your category in the above code.

Let us know how it goes!

#5

Thank you, I managed to make it work the way I wanted.

#6

You’re welcome! Glad to hear you got it working the way you want it to.

#7

This topic was automatically closed after 7 days. New replies are no longer allowed.