HOW TO ADD A BACKGROUND COLOR TO THE FOOTER?

HI,

HOW CAN I ADD A COLOR BACKGROUND TO MY FOOTER?

THANK YOU!!!

Hi, you can do it just by editing a page, scrolling down to footer, and editing the footer block. Then select colours and a colour from your colour themes.

Or, if you want a different colour to what's in your colour themes then add the below custom code if you have a 7.1 template:

footer,
footer *
 {
 background-color: green!important;
}

Replacing green with whatever hex colour you want: https://htmlcolorcodes.com/

Or do you have a 7.0 template?

Hi,

I tried using this code but there was no change to my footer...

Hi, have you got a link to your site, I assume you're using a 7.0 template?

Thanks! Erika

dinosandyoung.squarespace.com

Password: dinosandyoung2021

Ah okay is:

footer#footer {
    background: #F1ECC2;
}

And if you wanted your footer full width:

#footer {
  background: #F1ECC2;
  max-width: 100%;
}

On 3/9/2021 at 6:15 AM, Sladey16 said:

dinosandyoung.squarespace.com

Password: dinosandyoung2021

Add to Design > Custom CSS

/* Footer background */
footer#footer {
    background: red;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    padding-left: 40px;
    padding-right: 40px;
}

Hi there! Further to the above, can I have a different colour background for each page's footer?

18 hours ago, Iwan said:

Hi there! Further to the above, can I have a different colour background for each page's footer?

Edit each page >> Add a Code Block at bottom of page >> Paste this code

<style>
  /* Footer background */
footer#footer {
    background: red;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    padding-left: 40px;
    padding-right: 40px;
}
</style>

How do I apply this code to only change the colour of the 'Footer Middle Blocks'?

21 hours ago, Iron_Hayden said:

How do I apply this code to only change the colour of the 'Footer Middle Blocks'?

What is your site url? We can adjust code easier

On 1/28/2023 at 1:05 AM, tuanphan said:

What is your site url? We can adjust code easier

I have used the code you provided, but footer's background color does not change. Could you help me? 

https://www.shiqius.com/work/newsaction

On 2/8/2023 at 11:54 AM, byebarcelona said:

I have used the code you provided, but footer's background color does not change. Could you help me? 

https://www.shiqius.com/work/newsaction

You mean Footer, or this section?

If footer, use this code

<style>
  footer.sections .section-border, footer.sections .section-background, footer.sections {
    background-color: #000 !important;
}
</style>

Hey Tuanpan, 

Thank you for answering my questions. I don't know why but it still does not work. Could you help me?

On 2/24/2023 at 2:01 AM, byebarcelona said:

Hey Tuanpan, 

Thank you for answering my questions. I don't know why but it still does not work. Could you help me?

Try save & reload the site

If it doesn't work, let me know, we will adjust the code to you can add it to CSS box

Hey Tuanphan, 

No. I saved and reloaded. It just couldn't work. Thank you so much for your help.

On 3/2/2023 at 12:21 AM, byebarcelona said:

Hey Tuanphan, 

No. I saved and reloaded. It just couldn't work. Thank you so much for your help.

 

Can you take a screenshot of "footer"? or you mean Pagination Section? Above code for Footer, not Pagination