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.
/* START OF Change Footer Background, Border, Font/Color/Size, Alignment */
/* Change Background, Border, Font/Color as needed */
footer#footer .colophon {
background: none repeat scroll 0 0 blue;
border-top: 12px solid red;
}
/* Change font-size, alignment as needed */
footer#footer .colophon p, footer#footer .colophon a {
color: red;
font-size: 1em ;
text-align: center;
line-height: 1.2em ;
}
/* Change color/padding of Social Icons */
footer#footer .colophon .social-block a {
color: red;
padding: 0px ;
}
/* Change font-size/color of BackToTop */
footer#footer .colophon a.back-to-top {
font-size: 1em;
color: red;
}
/* END OF Change Footer Background, Border, Font/Color/Size, Alignment */
30 thoughts on “Change Footer Background, Border, Font/Color/Size, Alignment”
Still can’t get any results changing the color background color on site http://www.rodwellbuildingservices.com, Dave;
Here is my existing code: I know my color code #7FFF00. I notice the code doesn’t say ProCustomizr. Please help.
<footer id="footer" class="”>
Thank you,
Hi, hopefully it’s not too late to ask a question!
I’ve just tried using this snippet on my page, and it works fine on resolutions above 980px. On smaller screens it doesn’t seem to make a difference. Am I missing something?
Thanks in advance!
Kasia
Hello Kasia,
it’s not too late 😀
The problem is that you have an unclosed media query in your child-theme style.css, so basically all the following rules scope will be limited to that.
That’s the culprit:
/********************************************** BULLET POINTS IN MENU **********************************************/ @media screen and (min-width: 980px) { .nav > li:last-child > a:after { content: ""; } .nav > li > a:after { color: #becf9e; content: " \2022"; margin-left: 16px; }As you can see it misses a closing `}` .
Hope this helps.
p.s.
for further issues could you please open a new topic on the customizr forum?
Thanks 😉
I would like to add a simple snippet to just change font in the footer. I was able to change the color to black, but the font is hard to read. My site is http://www.oksilly.com for reference.
Sharon
Hi Sharon,
You’ll also want to try the Customizr support forum if you need help on your website customizations.
Thanks and enjoy the theme!
Hi,
I would like to change page height (or footer position) of one page on my site, that when user open/close drop menu of the integrated form, height of the page don’t cut part ot if.
Here for example, http://3id2plus.com/form3/
opening the “Entête – Façade immeuble” section, you can see taht you can’t fill the form because page doesn’t show the “next” button.
Can you help me?
Thank’s a lot.
I’ve added a 4th footer and need to know if there is a way to place html boxes side by side in it? I want to add multiple widgets to it, but not have them all in a single line up and down – any ideas? Thanks.
I recognise your gravatar. Did you get this fixed in the Forum? Best place to get a response.
No I didn’t – haven’t got an answer that works. 🙁
I discovered the answer – text has to be marked with or for this to work. WP doesn’t seem to add or assume this markup.
I have added this and the text is unchanged (white and left aligned) although the background is light gray. Something wrong?
footer#footer {
background: none repeat scroll 0 0 #d9d9d9;
}
footer#footer p, footer#footer a {
padding: 0px ;
font-size: 1em ;
color: #585858;
text-align: center;
line-height: 1.2em ;
}
Hi,
I’v been looking for a snippet that would allow me to change the background color behind the credits below the footer. Something you can help me with?
Thanks a bunch, Annika
This is the one, Annika!
Try the first block of code above, change the #83C0E5 to a color you want
Corrected the mistake: Added .colophon to the first sample.
Thanks to those pointing it out.
Oh, minutes later solved. Added the color to the styles:
/* Change font-size, alignment as needed */
footer#footer p, footer#footer a {
padding: 0px ;
font-size: 1em ;
text-align: center;
line-height: 1.2em ;
color: #585858;
}
/* Change font-size of Titles */
footer#footer h3{
font-size: 1em ;
line-height: 1.2em ;
color: #585858;
}
This works ! Great !
Thanks for sharing your solution Michael!
Hi,
thanks for this great theme. Just also bought the FP unlimited extension.
But I’m stuck in changing the color of the font in the footer.
I tried this snippet:
/* Change Background, Border, Font/Color as needed */
footer#footer {
background: none repeat scroll 0 0 #83C0E5;
border-top: 12px solid #E9EAEE;
color: #83C0E5 !important;
padding: 0;
}
The Background changed, but the font color is still white…I’d like to get it black.
Thanks a lot !
Greetings
michael
I’m curious: Could this functionality be added in as part of the drop down customizations already present, instead of having to code it in? It would make things a bit easier.
Hi Erik, Thanks for this feedback.
I agree, it might be interesting to make this customization simpler from admin.
Greetings,
/* Change font-size, alignment as needed */
footer#footer p, footer#footer a {
font-size: 15px ;
text-align: right;
}
Text-align doesn’t seem to have an affect when applied with custom css, stays centered no matter what i tried
Is there a snippet to add a full background image not just Hex color code to the footer?
Thank You:)
I’ve just added a new Snippet this week to address changing skins, which goes in the direction you’ve taken. However, if all you’re doing is changing one or a few features then it is a bit of a hack, and the Child Theme is the better way to go to avoid Update Failure.
I assume you’ve seen this Snippet about Child Themes?
You should end up with a folder (customizr-child) containing 2 files: style.css & maybe functions.php. You’ll add CSS code to style.css and it will not be wiped out by next update.
I’m hoping to write another Snippet soon that will create the skin change in a Child Theme which will need both CSS and PHP code.
I did a search/replace on the GREY.CSS file and replaced a color to more closely match my needs. Of course after update the css file was replaced. Is it possible to add this color file to child theme somehow – so it would remain semi-permanent ? I’m a noob so I’m still not sure how or where to call specific files into action using child themes.
Unfortunately, after trying since yesterday, waiting for the email with the password, and setting up multiple accounts. I never got a password email so I can’t post on the wordpress.org site. Sorry. But if it is still possible to answer my question, that would be greatly appreciated.
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.
Include a link to your site, if possible.
First fo all thank you for your support!
Can you help me sticking the footer to the bottom?
I am not experienced in CSS/PHP, tried unhooking it from the index.php.
Experimenting with custom CSS code in the child theme didn’t work either.
I read the source in the inc folder but I couldn’t figure out the right way.
Pages with very little text now look silly. 🙂
Maybe the width fix for high resolution screens is shaking up my code.
Please show me the right way to do it.
Thank you!
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.
However, I’ve seen this raised before and I’m not sure it’s a good idea. Sticky Header seems to work, but working on a variety of devices, I’d encourage you to rethink this one.
I am trying to suppress the standard footer in order to use the footer putter,but the white box still remains. Now I am stuck with a white box spanning the bottom above the footer. Is it possible to remove that?
Hi Sherica, could you please ask this request in the WordPress user forum as it is plugin related and might interested many users?
Thanks!
http://wordpress.org/support/theme/customizr
If you didn’t figure this out yet, I did the following and it completely changes the footer background color:
ORIGINAL: (above)
/* Change Background, Border, Font/Color as needed */
footer#footer {
background: none repeat scroll 0 0 #83C0E5;
border-top: 12px solid #E9EAEE;
color: #5A5A5A !important;
padding: 0;
}
You need to add “.colophon” to the footer call like this:
footer#footer .colophon {
background: none repeat scroll 0 0 #83C0E5;
border-top: 12px solid #E9EAEE;
color: #5A5A5A !important;
padding: 0;
}
Works fine for me. It’s possibly a FireFox issue. I’m not sure.