Archived topic
Category Header Color
13 replies · Started by Jatin on March 29, 2021
When Someone clicks on a particular category in my menu. Is it possible to change the color or set a color based on category.
For Example. If someone clicks on Microsoft Category then header color changed to blue and if someone clicks on windows 10 then header color changes to green and so on. Not only the header color but text color of menu etc as well.
Hi there,
WP adds Classes to the <body> element based on the different template tags the 'post/archive' is using.
For Category archives they add the category-slug class.
Which you can use to style post template being displayed.
eg.
.category-windows-10 .main-navigation {
background-color: #0f0;
}This will change the main nav background color for the windows-10 category.
However the more styles you want to change the more complex the CSS would become - for example - this would be the CSS for menu items text colors and hover color just for that one category:
/* static menu colors for windows-10 */
.category-windows-10 .main-navigation .main-nav ul li a,
.category-windows-10 .menu-toggle,
.category-windows-10 .main-navigation .menu-bar-items {
color: #000;
}
/* hover menu colors for windows-10 */
.category-windows-10 .main-navigation .main-nav ul li a:hover,
.category-windows-10 .menu-toggle:hover,
.category-windows-10 .main-navigation .menu-bar-items:hover {
color: #f00;
}And you would have to create separate CSS rules for each and every category you want to change... which is a lot of work....
Is there no easy way or a plugin or natively ?
That is the easy way :)
I don't know of any plugin that does it - and if there were it would simply be generating that CSS for you.
Ok, will it slow down my site if i add a custom color and navigation color for each category. I have more than 20 categories.
+
I added below code:
.category-microsoft-intune .main-navigation {
background-color: #1abc9c;
}
Which updated the Category Color which is good. But when i click on a post from the same category the color is still the default one not the one i set for this category. The idea is to keep the category color even if someone clicks a post which belongs to the same category.
For example: if color green is applied to category microsoft intune, then when someone clicks a post from this category the header should still be green.
Category classes only exist on the archives.
To include them on the single post use the PHP snippet Tom provides here:
https://wordpress.org/support/topic/category-class-in-single/#post-11720226
A few 100 lines of CSS won't make any noticeable difference to performance.
Thanks. I added the PHP Code. Whats next ?
With that code applied the CSS you're using for the Categories should also apply to the Single posts within those categories.
Didn't work. I applied the code as shows in previous post for category Microsoft Intune. When i click on Microsoft Intune from Menu the color of the menu changes to green.
When i click on any post which belongs to the same category color of the header does not change to green.
I have the link of my site category page in private box.
Where did you add the PHP Code provided in this link ?
Code Snippets plugin and selected run everywhere.
Hi Jatin,
Have you activated the snippet?
Let me know :)
Works fine now. thanks.
Glad to hear that :)
