[tomrogersParticipant]

My footers show only white. I looked at the code and there are background colors set (#222222), etc., but it does not seem to work. I’ve not done anything with the footers until today, and wonder why they do not show as they do in the Ethos theme that I used, which is Agency (http://theme.co/x/demo/expanded/agency).

BTW, the page attributes are all set as Blank – No Container | Header, Footer.

I’ll provide site and login info in the next reply.
Thanks

[tomrogersParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for writing in! You can set the background colors from Customize > Ethos – http://prntscr.com/a3ujis

Note : Customize the appearance of various items below and take note that some of these accent colors will be used for additional elements. For example, the “Navbar Background Color” option will also update the appearance of the widget titles in your sidebar and Topbar background will be reflected on Footer too.

If you want to control the Footer backgrounds manually, you can add this under Custom > CSS in the Customizer.

.x-colophon.top {
  background-color: #333;
}

.x-colophon.bottom {
  background-color: #222;
}

Hope this helps.

Cheers!

[tomrogersParticipant]

Thanks, that did make a difference. WordPress footers are not my favorite thing:)

I decided to keep it simple for now and just go with the lower footer which contains the copyright info, and a footer menu.

I’ve tweaked the CSS so it’s about right, but have one nagging thing that I can’t seem to adjust. I have it so all the text is white, but I’d like the menu links to turn light green (#83c15d) on hover.

This is what I have for code in the Customizer:

/*
//Footers
*/
.x-colophon.top {
background-color: #345b38;
}
.x-colophon.bottom {
background-color: #002c00;
color:#FFFFFF;
font-size:14px;
text-align:left;
text-transform:none;
}
.x-colophon.bottom .x-colophon-content {
color:#FFFFFF; 
text-transform:none; 
font-size:14px;
}
.x-colophon.bottom .x-nav li a {
color:#ffffff;
text-decoration:none;
}
.x-colophon.bottom .x-nav li a:hover{
color:93c15d;
}

I suspect some of this is redundant, but it’s working, with the exception of the hover property.

[John EzraMember]

Hi there,

Thanks for writing in! You are missing the # in your hover color hex code CSS, that’s why it is not working.

It should be:

.x-colophon.bottom .x-nav li a:hover {
    color:#93c15d;
}

Alternatively, you can also try the following:

.x-colophon.bottom .x-nav a:hover {
    color: #93c15d;
}

Hope this helps – thanks!

[tomrogersParticipant]

OMG! Thanks!!

[RupokMember]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Cheers!

[Author]

Posts