The default Footer area can be easily modified – see Snippet.
I prefer to add to the default Footer with my own flexible footer widgets using the Footer Widget Area provided by Customizr.
You can add the standard WP Widgets in Appearance>Widgets and slide them across into Footer Widget Area One-Two-Three. For example, the ‘Text’ widget gives most flexibility as it allows any HTML to be added.
You may need to stylise the background color, text color and margin/padding by using:
/* START OF Change the Footer Widget Area */
/* Adjust colors as needed */
.footer-widgets {
background: none repeat scroll 0 0 #83C0E5;
color: #5A5A5A !important;
padding-top: 10px ;
}
/* END OF Change the Footer Widget Area */
And then to center the text in the 3 widget areas:
/* START OF Change the Footer Widget Area */
/* Center the widget text areas */
footer#footer {
text-align: center ;
}
/* Or left-center-right the widget text areas */
#footer_one {
text-align: left ;
}
#footer_two {
text-align: center ;
}
#footer_three {
text-align: right ;
}
/* END OF Change the Footer Widget Area */
Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.
25 thoughts on “Change the Footer Widget Area”
Hi ! I have add another language on my page worked with customizr theme ,i have done changed on text of my pages on my webside but i cant change the language on sidebar, widgets foot area and in the text of homepage. Can you pls help me out?
hello everyone i want to set white background for the footer and also black color for the widgets font but no one of the command works can anybody please help?
Hello Dave.
I don’t find the solution for my problem. I need change the font size of the widget area. I show you, this the web http://www.armeriacastro.es
as you can see in the footer area, the one it’s green, appear *nuestras tiendas *contacto *servicios *marcas *aviso legal. How I can do bigger the size of this letters? when I try with one of the snippet you share only comes bigger this simbol “>” but not the letters.
I apreciate if you can help me. Thanks in advance.
Doesn’t apply to this Snippet, but what you’re looking for is:
#footer .widget li a { font-size: 20px; /* Adjust */ }Thank you Dave.
Hi Dave,
I’m running my theme with 2 sidebars (right and left). When I tried to change the background of the footer widget to black, it only seemed to work for the center 4/6ths of it or so. There are about 2″ on both the right and left (under the sidebars, but not exactly lined up with them) that are still the original grey color.
Any thoughts on why this might be? Is that section of the footer widget technically something else? (Some kind of sidebar footer?)
Thanks! Sure appreciate your code snippets!
Andrea- did you find a solution to this issue? I am having the same problem!
Found the problem, you don’t need to use .footer-widgets use the footer#footer instead as below, just posting in case anyone else has this issue.
footer#footer { background: #092e4b; }Thanks for sharing!
So how would you change the text colour to black and the back ground to white please?
I can’t seem to remove the padding from the top of the footer? Between the top and the text. Any pointers? Bottom works fine.
Sorry for not responding sooner and for this standard reply:
I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.
I am using text widgets in my footer areas, but the problem is with the .png images. I want them smaller (like a thumbnail) but they keep being auto-sized to fit the widget width and look huge. I’ve tried everything I can think of to adjust the image sizes but nothing has worked.
Sorry for not responding sooner and for this standard reply:
I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.
What is the best way of moving the footer tag into the main-wrapper div?
Hi Adam. I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.
hi,
I wanted to change the footer and used the code above. Made this of it:
/* Adjust colors as needed */
.footer-widgets {
background: none repeat scroll 0 0 #83C0E5;
color: #5A5A5A !important;
padding-top: 10px ;
font-size: 12px;
text-align: left;
}
I placed it in the style.css in my child-theme. However…. nothing changed…. Can you pls help me out?
Sorry for not picking this up sooner. Is it still a problem?
Need a link to your site, but I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems.
Hi Dave,
Thanks for all your help!
I have tried this, but all it does is add a second footer. How would one go about getting rid of the original footer?
Sorry for not picking this up sooner. Solution is:
.colophon {display: none;}I just put blank text in the widget and it solved the issue for now 🙂
Which would have been my response 😉
Pls I need your help. How do I add multiple columns to footer?
Hi Roland,
Please open a new thread in the support forum about this : https://wordpress.org/support/theme/customizr
We’ll try to help 🙂
Cheers
Hi Dave! Thanks for ALL of your help! I’m looking at the footer widget area and would only like to use two – 1 on the right and 1 on the left. I removed any content from the second widget area thinking that’d do it, but it still put my “right” piece of info in the middle. Is there a way to get around having 3 widget areas in the footer?