Docs

[tshores]

Please see this site:
https://not1more.org/

How can I modify background color, and font and hover colors, for the header and footer areas, using CSS?

Thanks!

[Zeshan]

Hi there @tshores,

Thanks for writing in!

You can change the header background colors under Ethos in the Customizer and links colors under Header > LINKS – TEXT.

To change the footer background color, text, links and links hover colors, add following CSS under Custom > CSS in the Customizer:

/* Footer Background Color */
.x-colophon.top,
.x-colophon.bottom {
  background-color: #ffffff;
}

/* Footer Text Color */
.x-colophon.top,
.x-colophon.bottom,
.x-colophon.top .h-widget {
  color: #000000;
}

/* Footer Links Color */
.x-colophon.top a,
.x-colophon.bottom a,
.x-colophon.bottom .x-nav li a {
  color: #333333;
}

/* Footer Links Hover Color */
.x-colophon.top a:hover,
.x-colophon.bottom a:hover,
.x-colophon.bottom .x-nav li a:hover {
  color: #333333;
}

Replace the colors with your desired ones (you can generate hex color codes from here).

Thank you!

[tshores]

thanks!

[Prasant Rai]

You are most welcome. 🙂

[tshores]

Actually, in Customizer, Header > Links – Text … I can only control colors of links and text elements. In Ethos at least, I can’t control the Header background, Widget area or Header menu background colors.

Can you conjure up some CSS that lets me do this?

[Lely]

Hi There,

Did you figure out this already? Upon checking, you have the following custom CSS:

.x-navbar{
	background-color: #ffffff; /* This controls the header background color*/
}

For menu background color, use this:

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
     background-color: blue; /*Change to your preferred color*/
}

Hope this helps.

[tshores]

That’s interesting, but not what I seek. I’ve updated this other thread, which is about the same problem:
https://community.theme.co/forums/topic/ethos-theme-navbar-css-customizations/

It’s the WP header background that I’m trying to change, not the navbar. Let’s just address it in the other thread, and discontinue this thread.

[Rue Nel]

Okay then.
We will be responding your other thread shortly.

[Author]

Posts