HI, I have gone through the support and found a few CSS solutions to changing the footer colour, but none are working for me. Please can you help?
www.bowfiddle.org/dir
Hello Sarah,
Thanks for writing in! Is the custom css you had added in your site was working with the other users? Judging at your custom css, I have a hunch that there is an invalid entry which created a conflict affecting other css not to work. Please take your custom css and load it up in css lint (csslint.net) to check which line contains the error.
If you are having a hard time figuring out, please post all your custom css in your next reply so that we will check it.
Regards.
Hi,
I tried this.
.x-colophon.bottom {
border-top: 0;
background-color: #ffffff;
}
then this
footer.x-colophon.bottom {
background-color: rgb(186, 40, 46);
}
just to see if anything changed. It didn’t. Please can you help.
Hey Sarah,
Before providing some guidance for this and the needed tweak, I’d first like to clarify that you’re currently using Ethos and it’s a dark theme. That means you should be using a dark header and footer color. Please first watch this screencast at https://youtu.be/B65iowSsAhI to guide you in making an informed decision before you proceed with further tweaks.
The reason why your code does not work is because you have this code in Appearance > Customize > Additional CSS. That overpowers your other CSS so you need to remove that or add a selector to your other CSS.
.x-colophon.top, .x-colophon.bottom {
background: #333 !important;
}
I’ll also paste the code I used in the video below. But, please note that custom coding is outside the scope of our support. This is only an example or a guide to get you started tweaking Ethos. In case issues arise from using the code or if you have further enhancements needed, you should learn CSS or forward this to a third party developer.
.x-colophon.bottom .x-colophon-content,
.x-colophon.bottom .x-colophon-content a,
.x-colophon.bottom .x-nav li a {
color: black;
}
.x-colophon.bottom .x-colophon-content a:hover,
.x-colophon.bottom .x-nav li a:hover {
color: blue;
}
.x-social-global a,
.x-topbar .p-info {
color: gray;
}
.x-btn-navbar.collapsed {
color: black;
}
.x-btn-navbar.collapsed:hover {
color: red;
}
.x-btn-navbar {
color: gray;
}
.h-widget,
.widget ul li a, .widget ol li a {
color: black;
}
Hope that helps and thank you for understanding.
Hi, thanks so much. That worked.
You’re most welcome!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.