This topic has 3 replies, 2 voices, and was last updated 8 years by 
-
-
I’ve tried using this CSS to change the header on different pages:
div#header.header-colour
{
background-color: 815374 !important;
{
But it doesn’t seem to overwrite the theme’s header background colour?
Any thoughts?
Many thanks!
Hi,
You will need to use the page-id- class which is generated for each page based off of the page ID from the back-end (see screenshot) before any element you wish to customize on a per page basis.
As an example, from my screenshot, the CSS for me would be
.page-id-9468 #header {background-color: aqua !important;}This will only apply the above CSS if the class page-id-9468 is present, and this class will only ever be present on that specific page.
You will need to identify the page ID class for your page by inspecting the console (F12) and selecting the elements tab in your browser. Look for the body at the top of the document.
Thanks,
Kieran
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionBrilliant, thank you.
And sorry for starting a new thread (I don’t know how I did that??).
I also managed to use this:
.kleo-main-header.header-lp {
background-color:#5a696c;
}by adding it to the CSS for each page.
Thanks again,
Glad it is working for you 🙂 No worries on the dual tickets, it happens sometimes.
All the best,
Kieran
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
The forum ‘General questions’ is closed to new topics and replies.