Footer Background

katharinaruess82 · Member · Apr 19, 2019 at 7:55 am
Copy link

Add topic to favorites
Hello,

I am beginner in designing websites. I am currently working with Edin theme. I want to change the color of the footer which is currently black. Can anybody please help me with this?

Thanks,
Innobude

The blog I need help with is: (visible only to logged in users)
vinnykaur · Staff · Apr 19, 2019 at 9:27 am
Copy link
Hi there,

Can you please try the following CSS to change the footer background color:

.footer-widget-area {
background: white;
}

Replace ‘white’ with any color you want.

Please let us know how it goes.

Thanks!
katharinaruess82 · Member · Apr 20, 2019 at 6:41 pm
Copy link
Hi,

Thanks fro the reply. I have tried using that in CSS, but it does not seem to change. It still shows black color.

Thanks
vinnykaur · Staff · Apr 21, 2019 at 11:04 am
Copy link
Hello,

It worked for me when I tried. Can you please let know what is the code that you applied and where?

Did you go to My sites > Customize > Additional CSS and then added the code there?
katharinaruess82 · Member · Apr 21, 2019 at 11:12 am
Copy link
Hi,

I used the following code-
.footer-widget-area {
background: #4bce22;
font-family: “Alegreya Sans”, sans-serif;
}

And it still shows black.
vinnykaur · Staff · Apr 21, 2019 at 3:14 pm
Copy link
Hi there,

I tried and it works just fine for me.
There might be some caching issue in your browser.

Make sure to publish after you add your CSS code.
Could you please try clearing your browser’s cache or maybe try in some other browser check?
https://en.support.wordpress.com/browser-issues/#clearing-your-browser-cache

Please let us know how that goes.

Thanks!
pdrw07 · Member · Apr 21, 2019 at 3:28 pm
Copy link
Hi there,

Could you try this and let us know how it works?

div#tertiary.footer-widget-area { background-color: #4bce22; }
katharinaruess82 · Member · Apr 21, 2019 at 4:34 pm
Copy link
Hi,

Thanks for the reply. It works when I use both the codes together-
.footer-widget-area {
background-color: #4bce22;
font-family: “Alegreya Sans”, sans-serif;
}
div#tertiary.footer-widget-area { background-color: #4bce22; }

It does not work if I remove either of them. I even cleared the browser’s cache but, do not understand why.

I want to change the color of “Navigation” from Grey to white. How can I do that?

Thanks,
Rajatha.
pdrw07 · Member · Apr 21, 2019 at 4:59 pm
Copy link
Hi,
That’s odd.. one of the CSS code should work though.
Anyway, moving on to the next customization:

Here is for the Widget title:

h2.widget-title { color: #ffffff; }

Here is the for the phone number from gray to white:

div.confit-phone { color: #ffffff; }
vinnykaur · Staff · Apr 21, 2019 at 5:24 pm
Copy link
Hello,

@pdrw07 thanks for helping out here :)

@katharinaruess82, In addition to what @pdrw07 suggested, you can also try including this to your existing code instead of adding two different codes:

div#tertiary.footer-widget-area {
background-color: #4bce22;
color: #ffffff; }

This will change both “Navigation” and phone number to white at once.

But if you want different styles for different widget areas then you should go ahead and add individual CSS to it.

Please let us know how that goes!

Thanks!
katharinaruess82 · Member · Apr 21, 2019 at 9:14 pm
Copy link
Hi,

That was helpful. Thank you so much!

The topic ‘Footer Background’ is closed to new replies.

WordPress.com forums

Footer Background