[SolveUsParticipant]

Hi Guys,

Please can you give me code to change the footer background color. I can see in customizer that you can either make it transparent or not, I want to change the actual background color.

Thanks

[ChristianModerator]

Hey there,

The Footer has top and bottom parts. For the top part, please add the code below in your Appearance > Customize > Custom > CSS.

.x-colophon.top {
background: red;
}

For the bottom part, add

.x-colophon.bottom {
background: red;
}

For the whole footer, use

.x-colophon {
background-color: red;
}

Hope that helps. 🙂

[SolveUsParticipant]

Thanks Guys

[FriechModerator]

Glad we could help, Cheers!

[aaron mParticipant]

This reply has been marked as private.

[John EzraMember]

Hi there,

Thanks for updating the thread! Do you mean because the color doesn’t extend to the sides? This is because of the boxed layout. You will need to use full-width for it to work. Then we may need to restrict the other content band’s width with CSS.

Please let us know what you would like to accomplish – thanks!

[aaron mParticipant]

This reply has been marked as private.

[Nabeel AModerator]

Hi again,

To change the footer font color, you can use this code:

footer a:hover {
    color: blue;
}
footer a, .x-colophon.top .widget {
    color: red;
}

Full width templates does not include the sidebar.

Hope this helps!

[Jeff KParticipant]

Why make this a custom CSS instead having the capability of choosing the footer background color in the layout and design or the footer section?

[RupokMember]

Hi @mtnstreamgroup

We certainly appreciate the feedback! This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. But note that Custom CSS and JavaScript is also a great feature to enhance the customization option out of the box. For example you can set a RGBA color or background image etc for the footer when you use custom CSS but adding options for everything might be a bit messy for the Customizer.

Hope this helps.

Cheers!

[Jeff KParticipant]

@Themeco … I would agree that Custom CSS and JavaScript allow for a lot of customization but one has to know what the appropriate ID is for each and every element in a theme. And, with firebug — when it works — it can be quite difficult to figure out the appropriate ID to assign CSS to.

[ZeshanMember]

Thank you for your feedback, Jeff! We’ll forward it to our developers for future consideration.

[tadonasParticipant]

Hi.
With this css:

footer a:hover {
color: blue;
}
footer a, .x-colophon.top .widget {
color: red;
}

..the only thing what works for me on the footer fonts colors, is red.. and only text from the text widget.. and i have no idea what im doing wrong..
I do agree that it would be nice to have some more options..

[Rue NelModerator]

Hello There,

Thanks for updating this thread!

To change the font colors in your footer, please add the following css code in the customizer, Appearance > Customize > Custom > CSS or insert this code in your child theme’s style.css (if you are using a child theme)

.site .x-colophon.top,
.site .x-colophon.top a,
.site .x-colophon.bottom,
.site .x-colophon.bottom a {
    color: #000;
}

We would loved to know if this has work for you. Thank you.

[tadonasParticipant]

Thank you.
This CSS changed font color in th footer, except header font color..
I found CSS, that worked well 4 me:
.x-colophon.top .h-widget, .x-colophon.top a, .x-colophon.top .widget {
color: #515151;
}

[Author]

Posts