Color Change On One Page

I want to be able to keep the structure of the header, footer, and menu the same, but i want to change the color scheme to a black and yellow to match the manufacturer we are displaying. What would be the best way to approach this? Thank you in advance.

Sorry…just to update this…change the color scheme for one page. Sorry for the confusion.

Hi There,

Thank you for writing in, but I’m not entirely certain of what you’re trying to do, please clarify. Are you trying to change the background-color of certain page/ If so, you can add this to the Page > CSS area

body {background-color: yellow;}
.site, .x-site {background-color: transparent;}

Most (if not all) elements has a color and background-color options, so you can change the color of those elements individually.

See the element sections of our Knowledge Base to know more about elements


Hi, so i really want to change the header colors, the footer colors, i even want to put a different logo in on that page as well, but only on this one page. The background color would actually stay the same.

But remember, only on one specific page.

So i have been working with my page, and i have got basically what i wanted, adding in css to the id of the specific page.

My next question is, how do i get the different logo to be responsive, like the logo in throughout the rest of the site. Thanks!

Hi there,

Please update add this code as well:

@media (max-width: 980px) {
    .page-id-3256 a.x-brand {
        width: 100%;

Here are some related links for further reading:

Hope this helps.

Thanks that got it. Umm question…this looks good in all my browsers…except Microsoft Edge. For some reason, Edge keeps bringing up the other logo…not the specific logo. How would i fix this?

Hello @clmurray1969,

This could be caused by the cached of Edge browser. Please clear it cache and test again. If the issue persists, please use private browsing mode in Edge browser to test your site.

Hope this helps. Please let us know how it goes.

i cleared cache and opened in private mode, the image still persists. Is there a way to hide the logo while bringing this logo up with css?

And here is the site are you getting the same results?

i think to get around this, im going to use a transparent png for now…but if you have a solution for this i would appreciate the help. Thanks!

Hey @clmurray1969,

I’m sorry but custom coding including fixing issues arising from it and further enhancements are not covered by our support because they are not a part of our theme. Our goal here is to only provide samples for you to get started. You should learn how to code if you’re going to continue using the sample code we provided. Please see our Terms.

If coding is not an option, I’d recommend that you upgrade to Pro so you can have different header designs and assign each per page. Pro has a Header Builder so you don’t have to code.

Thank you for understanding.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.