[Support request] Newsroom theme news feed page colourcategories

[Youssef]

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

[David]

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

[Youssef]

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

[Fernando]

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;
}

[Author]

Posts