Docs

[Steve Taylor]

The attached document shows a screenshot of my footer at http://www.itworkshosting.com

Please let me know how I can make those two changes. 🙂

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

.x-colophon.bottom {
    background-color: #e1e6ea;
    border: none;
    box-shadow: none;
    margin-top: -60px;
}
.x-colophon.top {
    padding-top: 2%;
}

Hope it helps

Joao

[Steve Taylor]

Close; it gets rid of the background color from behind the widgets. I want the widgets and the bottom portion to all have the same background color, too.

[Rupok]

Hi there,

You just need to change/remove the background color fro this code :

.x-colophon.bottom {
  background-color: #3f3f3f;
  border: medium none;
  box-shadow: none;
  color: #afafaf;
  margin-top: -60px;
}

If you want to set a same background color for footer widget and footer content, let’s use this CSS :

.x-colophon.top, .x-colophon.bottom {
  background-color: #fff;
}

Don’t forget to change the color code with your preferred color.

Cheers!

[Steve Taylor]

What if I want the footer bottom area to be a solid color, but the footer widgets area to have a background? Possibly one with some parallax?

[Friech]

Hi There,

You can style the two footer separately.

footer widget area:

/*footer widget area*/
.x-colophon.top {
    background-color: #00467B;
    background-image: url('BACKGROUND IMAGE URL HERE');
    background-position: top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

bottom footer:

/*bottom footer*/
.x-colophon.bottom {
	background-color: #00467B;
	color: #92B7D3;
    border: none;
    box-shadow: none;
}

Hope it helps, Cheers!

[Steve Taylor]

Almost perfect. Now I just can’t figure out how to change the colors of all the fonts (headers, body, etc.) within the footer to white.

[Thai]

Hi There,

Please add the following CSS:

.x-colophon.top .textwidget,
.x-colophon.top .widget ul li a, 
.x-colophon.top .widget ol li a {
    color: #fff
}

Hope it helps 🙂

[Steve Taylor]

It did, but it didn’t change the headers on the footer.

[Friech]

Hi There,

Please update the code to this:

.x-colophon.top .textwidget,
.x-colophon.top .widget ul li a, 
.x-colophon.top .widget ol li a,
footer .h-widget {
    color: #fff
}

White text is not clearly visible with the current footer background though.

Thanks.

[Steve Taylor]

Last change. The “News & Updates” section down on the bottom has a white background with white text. Can you tell me how to change the background color? 🙂

http://www.itworkshosting.com

[Prasant Rai]

Hello There,

Please use following code to change background color:

.widget.widget_recent_entries li:hover {
    background-color: #737373 !important;
}

Thanks.

[Author]

Posts