change the background of Header, Socket and Footer?

[alexlii]

Hello

 

How to change the background of  Header,  Socket and  Footer by page wisely ?

 

Alex

[Kieran_SQ]

Hi Alex,

Do you mean on a per page basis? If so you’ll need to do this manually with CSS after getting the page ID.

COPY CODE

.page-id-12504 .header-color.social-header {
    background-color: red;
}
.page-id-12504 .kleo-main-header.header-extras {
    background-color: red;
}
.page-id-12504 #footer {
    background-color: red;
}
.page-id-12504 #socket {
    background-color: red;
}

You can get the page ID from hovering over the link to edit the page in the WordPress back end or via the front end by inspecting the page / viewing the source and checking the body tag for the page-id- class

In the example above I have set it to .page-id-12504 which is the page currently assigned as the homepage.

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.

[alexlii]

Hi Kieran,

Thanks.

Yes, just what I mean.

Where should I input these CSS please, quick CSS of Theme option?

Thanks

Alex

[alexlii]

BTW, can I change:

the background color
these lines color
Font color

by CSS too? Please check the screenshot:
http://prntscr.com/kxelu0

or access these page for check:
https://www.lovcour.com/custom-page-color-by-css

Alex

[Kieran_SQ]

Hi,

As you’re using the SweetDate Child theme your CSS modifications should go into WP Admin > Appearance > Editor > SweetDate Child > Style.css, but they will work also in the Quick CSS of Theme Options.

You can try the below CSS to change the colors for the highlighted objects

COPY CODE

/* Menu CSS */
.page-id-13067 .header-color.social-header, .page-id-13067 .header-color .top-menu li > a {
    border-color: white;
}
.page-id-13067 .kleo-main-header.header-extras {
    border-bottom-color: white;
}
.page-id-13067 .navbar a {
    color: white !important;
}

/* Footer CSS */
.page-id-13067 #footer .widget-title {
    color: white;
}
.page-id-13067 .footer-color .widget_nav_menu li a {
    border-color: white;
}
.page-id-13067 #footer li a {
    color: white;
}
.page-id-13067 #footer p, .page-id-13067 #footer label {
    color: white;
}

You can generate the CSS for yourself by right click the item and inspecting with Google Chrome DevTools to reveal the class/ID – add .page-id-13067 before anything you generate.

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.

[alexlii]

Hi Kieran,

Great thanks.

You can generate the CSS for yourself by right click the item and inspecting with Google Chrome DevTools to reveal the class/ID

I am not techinal background, I will try to find some on line tutorials.

Thanks again:)

[Kieran_SQ]

Hi,

No worries, this tutorial may be helpful if you’re interested in learning to use Google Chrome DevTools.

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.

[alexlii]

Thanks, really great tutorial, I just watch it by VPN, and it seems different with Mac safari.

Alex

[Kieran_SQ]

Hi Alex,

Sorry, I had assumed that you were running Windows/Chrome as that is the most common. Mac/Safari does have a development tool, but is indeed different to Google Chrome’s DevTools – though essentially the function is the same.

I don’t personally use Mac/Safari so I don’t have any basic tutorial to hand for you but you will almost certainly find beginner friendly tutorial videos on YouTube for Safari development tools.

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.

[alexlii]

Kieran,

Thanks so much:)

I am quite new to both of them, and I think I need study them carefully. Thanks for great support.

Have a nice day.

Alex

[Author]

Posts