Archived topic
Newsroom theme news feed page colourcategories
3 replies · Started by Youssef on February 20, 2023
Hello Team
in the example theme the categories are highlighted in colour
if add mine categories will they get a color automatically ?
Or can I know from where to give a color to my categories ?
bear in mind I am not a developper
Regards
YOussef
Hi there,
the colors for the categories are defined in the Customizer > Additional CSS, there is a CSS rule for each of the categories, and each one looks like this:
body:not(.single) .post-term-item.term-business {
background-color: var(--business);
}
If you add a new category term to your site, then you need to create a new category rule.
eg, i have a category of cake you would add:
body:not(.single) .post-term-item.term-cake {
background-color: var(--your-color-here);
}
Where it says --your-color-here you would change that for a color variable name that you have set in Customizer > Colors
Thank you David for your quick response.
I'm not a developer, CSS as if someone is talking to me from an overseas language :).
Is there a simple way to add the CSS code without hurting the template :)
when you tell me var(--your-color-here) i understand i have to add the name of the color i want to assign to my category or its hexadecimal code?
I want to add the category Cake with the color orange; how to do it please?
is this the right way to add the code?
Appearance > customize > additional CSS
Thank you
Youssef
Hi Youssef,
Yes, you can place them in Appearance > Customize > Additional CSS.
If you have over 500 or 1000 lines of CSS code there, that's the only time you should consider using a Child Theme to add the CSS.
your-color-here is a variable you can create in Appearance > Customize > Colors > Global Colors. See here for an example: https://share.getcloudapp.com/jkuA2jX6
You can create any Color variable you want.
You can also replace that code with this if you want to place the Hex code directly:
body:not(.single) .post-term-item.term-cake {
background-color: #ffaf2f;
}