Footers - Color and Spacing

Support
#1

Hi there,
Please, how can I change the colors of both footers (black one and grey one) ???
And more spacing on top (padding) ?

Thanks in advance!

#2

Hey Jose,

I already see you have successfully changed the background through custom CSS. You’ve overridden the setup in Theme Options.

Out of the box, the footer’s top and bottom background colors should be set in Theme Options > Ethos.

You can override the background like what you did but please take note that Ethos should have a dark background color because its text color is hard coded to be white. That is Ethos’ design.

The code you need for the background and padding is this.

/* Top Footer*/
.x-colophon.top {
	background-color: red !important;
	padding: 5% 0 5.25%;
}
/* Bottom Footer*/
.x-colophon.bottom {
	background-color: red !important;
	padding: 5% 0 5.25%;
}

Adjust the values as per your design requirements. To learn what values you can use, please see the links below.

Hope that helps.

#3

Yes, thanks!

But I have a problem with the color of the bottom footer texts… I want in red?

#4

Hi @joserodrigz,

Sure, you can both change the text color and background

/* Top Footer*/
.x-colophon.top {
	background-color: red !important;
	padding: 5% 0 5.25%;
}
/* Bottom Footer*/
.x-colophon.bottom {
	background-color: red !important;
	padding: 5% 0 5.25%;
}

.x-colophon, .x-colophon a [
color: red !important;
}

They are both red so it’s not going to be readable, please change the color accordingly.

Thanks!

#5

Yes sorry I want the text in black but is not working the last code…

#6

Hello @joserodrigz,

There was a typographic error in the code. Please have it updated and use this:

.x-colophon, .x-colophon a {
  color: black !important;
}

Please let us know if this works out for you.

#7

Now yes, thanks !

#8

You’re welcome!
We’re glad we were able to help you out.

#9

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