Footer Widget Background & Font Color

Support
#1

For the life of me I can’t figure out how to change the footer background color including the widget. I would like every background on my footer to be black and all the font to be white.

This is currently my footer.

I don’t see any options when editing the theme to change the colors for the footer and widget backgrounds.

#2

This is what I would like my footer colors to look like. How can we accomplish this?

#3

Hi There,

Please try adding this custom CSS under X > Theme Options > CSS:

.x-colophon.top {
    background: #000;
    color: #fff;
}
.x-colophon.top .h-widget {
    color: #bdbaba !important;
}
.x-colophon.top a,
.widget_nav_menu ul li a, 
.widget_meta ul li a, 
.widget_pages ul li a {
    color: #fff;
}

Hope it helps :slight_smile:

#4

I tried that but then everything is kind of blurry. Like the Phone/email part and the service area. How do I make all the font solid white?

#5

Hi There,

Please update the previous CSS to this:

.x-colophon.top {
    background: #000;
    color: #fff;
}
.x-colophon.top .h-widget {
    color: #bdbaba !important;
}
.x-colophon.top a,
.widget_nav_menu ul li a, 
.widget_meta ul li a, 
.widget_pages ul li a {
    color: #fff;
    text-shadow: none;
}

Hope it helps :slight_smile:

#6

It still looks the same :frowning:

http://2ac.d0f.myftpupload.com

#7

Hi there,

Please check the codes that are in the custom CSS panel for errors.

Try copy and pasting all the codes here: http://csslint.net/

It should give you some information about the CSS error in the code which is causing the provided codes not to work.

Hope this helps.

#8

The only code in there is the code you guys gave me :frowning:

.x-colophon.top {
background: #000;
color: #fff;
}
.x-colophon.top .h-widget {
color: #bdbaba !important;
}
.x-colophon.top a,
.widget_nav_menu ul li a,
.widget_meta ul li a,
.widget_pages ul li a {
color: #fff;
text-shadow: none;
}

That is the code that is in there.

#9

Hi There,

Please update the custom CSS to this:

.x-colophon.top {
    background: #000;
}

.x-colophon.top * {
    color: #fff !important;
    text-shadow: none !important;
}
.x-colophon.top .h-widget {
    color: #bdbaba !important;
}

Hope it helps :slight_smile:

#10

Thank you! It seems to have helped!

#11

You’re welcome!
Thanks for letting us know that it has worked for you.

#12

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