Different Pages, different Header Colours

[Hbweb]

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!

[Kieran_SQ]

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 solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

Attachments:

You must be logged in to view attached files.

[Hbweb]

Brilliant, 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,

[Kieran_SQ]

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

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Author]

Posts