Solved: How to Change Your Footer Color...Solved

mysalontouch · ‎03-28-2017

I thought I would post what I found on how to change your footer background color on a responsive theme. After reseaching the forum for answers, none seem to work for me, inclduing adding the HTML code in the SEO header and or Footer settings sections. And searching through all the CSS files for my theme, nothing stood out for changing the background color and almost everything seemed to used variables.

So that's the approach I took. For my theme, Birdseye, I editied the variable_light.less CCS since that was the color scheme I choose. There is also a variables_dark.less too. In the file you will see the line @shade: rgba (0, 0, 0, .05) (or similar). I simply increase the value of 0.05 to a higher value that did the trick. Just note that this value not only changes the background footer color, it also changes the color of the thin bar along the bottom of the menu as well as the highlight of the menu choices. As long as you are aware of this you can find a suitable color choice.

I personally feel it would be beneficial if Weebly support would post or make available steps on how to make subtle, common changes like background colors, in the future. Just the basics that people like to make.

Regards,

M

mysalontouch · ‎03-29-2017

After futher experimetation with the CSS I did find out where to to put the line of code that will change the footer background color. This should work on any theme.

This piece of code is from the _gloabl.less CSS file, around line 187 or so in my theme, Birdseye. I bolded the line of code I inserted. Of course you can choose any color you want.

I had done this before but I never saved the CSS file so my changes never showed up. I was under the impression that when the "refresh" option is checked when in the CSS file, you will see the changes you made after the refresh, this is not true for footer. Once you add the line of code you will need to save the changes to see the color change.

/* Footer */

.footer-wrap {
width: 100%;
font-size: 14px;
background-color: #333333;
.wsite-footer {
padding: 60px 40px;
}

View Best Answer >

Adam7 · ‎03-28-2017

Thanks for sharing, @mysalontouch! If you'd like us to add your suggestion feel free to post that to our Vote on Features board if you haven't yet.

jeremyleediaz · ‎06-24-2019

Does anything from the 'Vote on Features' board ever actually get made or am I just paying for nothing?

Bernadette3 · ‎06-25-2019

We are constantly working to improve the platform for our users, although it is nearly impossible to follow through with every single request we receive. The teams have to prioritize based on the number of users affected and our own path of growth. I promise you the teams are working every single day to give you all the best experience.

We are happy to log feature requests and forward the information on to the product managers, but we are rarely able to provide timelines or guarantees.

Johnny51 · ‎02-24-2021

paying for nothing

mysalontouch · ‎03-29-2017

After futher experimetation with the CSS I did find out where to to put the line of code that will change the footer background color. This should work on any theme.

This piece of code is from the _gloabl.less CSS file, around line 187 or so in my theme, Birdseye. I bolded the line of code I inserted. Of course you can choose any color you want.

I had done this before but I never saved the CSS file so my changes never showed up. I was under the impression that when the "refresh" option is checked when in the CSS file, you will see the changes you made after the refresh, this is not true for footer. Once you add the line of code you will need to save the changes to see the color change.

/* Footer */

.footer-wrap {
width: 100%;
font-size: 14px;
background-color: #333333;
.wsite-footer {
padding: 60px 40px;
}

Jay16 · ‎06-28-2017

Thank you @mysalontouch! You quickly solved an issue I was having.

indigox · ‎08-21-2017

Thank you! I kept changing the code but wasn't seeing the changes until you suggested SAVING it. By the way, I emailed Weebly's Customer Support and they said it couldn't be done... I hope they become more knowledgeable in the future.

KateHM · ‎10-26-2017

Thank you! Tried several other posted solutions and only this one worked.

RaSu · ‎08-03-2018

Thanks! They dont tell you that you have to save. They say Auto Preview will show it, which it doesnt. I spent a lot of time on this. Thank you

lovechild · ‎10-25-2018

Where and how exactly do we change the code?

AshleyGarrett88 · ‎05-20-2019

I used this code:

}
/* Footer */
.footer-wrap {
width: 100%;
border-top: 0px solid #dcdcdc;
background: rgb(0,140,204);
background: linear-gradient(90deg, rgba(0,140,204,1) 35%, rgba(0,82,146,1) 100%);
}

Use this website to create the colors: https://cssgradient.io/

ArtistsEleven · ‎10-14-2019

ALMOST! Problem - this worked for me, except it changed the header background from black to white.

I changed the default footer background from white to black on the same theme (Birdseye 2), and it was successful. However, I liked the header background black when I scroll down, and now it's white with black lettering.

Does anyone know how to change the footer background without it affecting the header at all? Not sure why it's doing this.

Thanks in advance!

Bernadette3 · ‎10-15-2019

Weebly employees are not able to assist with code edits, but if you post a link to your site another user may be able to help you out. I don't know a lot about the code for this theme (or code in general) but I know when you switch from dark to light under Theme>Theme Options it will affect both the header and footer area.

Hardy1 · ‎04-10-2020

So Awesome, thank you -- I have a black background and the white footer looked like an un-tucked t-shirt! Now it fits right in. It was line 197 in mine -- it was blank so I just copied in "background-color: #020202;" (no quotes) and that worked.

lynzberry · ‎08-01-2018

Thank you so much for the help with this. I can usually find where to place/change code in the old Weebly templates with html CSS, but I didn't know which file to use in the new theme (I'm using Unite). This worked perfectly!

vinnie1 · ‎11-08-2018

I have an issue with the code showing over the top of color change. How do I remove the code?