Change Header and Footer Color in Expanded Theme Agency

[kvmaildrop]

I am using X Theme Expanded Theme Agency. I want to change the header color and footer color to #909090. I am using Cornerstone. What changes do I need to make to change the header color as well as footer color? And, specifically where do I need to make the changes? I am not a web developer … so step by step instruction would be very helpful.

Many posts talk about adding a custom class. I have no idea what this is or how to do it.

Thanks, Karen

[rubin]

This is an automated message to notify you that your thread was posted in the wrong forum, and it has been moved to the correct place. A member of our team will be happy to reply just as soon as your thread is up. How support works.

For support, please post all questions in the Support Forum.

For peer to peer conversations with other Themeco customers about tips, customizations, or suggestions you are welcome to use the Peer to Peer (no official support provided here).

For Design & Development, Marketing & Media, and Hosting & Optimization discussions you are welcome to use the General Forum to discuss with fellow Apex members about non Themeco related topics. Please keep this in mind in the future.

Thank-you!

[christian]

Hey @kvmaildrop,

Thanks for writing in. In your WordPress admin menu, go to Appearance > Theme Options > Ethos and edit the Navbar background color for the header and Topbar background color for the footer. Watch this screen recording if you still have trouble.

Please take note of the info and also, Ethos was designed to have a dark navbar, topbar and sidebar so you should not use a light color especially white.

Ethos is a magazine-centric design that works great for blogs, news sites, or anything else that is content heavy with a focus on information. Customize the appearance of various items below and take note that some of these accent colors will be used for additional elements. For example, the “Navbar Background Color” option will also update the appearance of the widget titles in your sidebar.

Thanks.

[kvmaildrop]

Thank you Christian for the quick response and clear instruction. I was able to change the background color for the header and footer with ease.

However, I did read your note about the Ethos theme being designed to have a dark navbar, topbar and sidebar so I changed the stack to Integrity. I tried to follow the same instruction you gave Appearance > Theme Options > Integrity, but I didn’t see a place to change the header or footer color. The only option I saw was light or dark. Is there a way to change the header and footer color (other than white or black) in Integrity?

Thanks for giving great support.

Karen

[Joao]

Hi Karen,

You can change the color using CSS, you can keep Ethos if you prefer. Ethos is my favorite stack due to it´s really good looking blog layout.

You can add the following code to Theme Options CSS to change the background color of the header and footer of any stack.

.x-logobar, .x-navbar, .x-navbar .sub-menu, .x-colophon.top , .x-topbar, .x-colophon.bottom {
    background-color: #332e2e;
    background: red;
    color: white;
}

.x-navbar .desktop .x-nav > li > a > span , .widget , .widget a , .x-colophon.bottom .x-colophon-content p, .x-colophon.bottom a, .x-navbar .desktop .x-nav > li > a, .x-navbar .desktop .sub-menu a, .x-navbar .mobile .x-nav li > a, .x-breadcrumb-wrap a, .x-breadcrumbs .delimiter {
    color: white !important;
}

Hope it helps!

[kvmaildrop]

Thank you Joao. I will try this!

Karen

[lely]

You’re always welcome Karen!

Cheers~