Transparent Footer in 7.1

Site URL: https://evanedinger.com

Alright, so when it comes to creating a transparent header, Squarespace makes that very simple and provides the option within the Pencil design section. Amazing! The header is transparent on top of the background image. Great.

When it comes to the footer, squarespace have not allowed this functionality. And no matter what custom css I try to input into the design>custom css, or into the header, or into a code block... I cannot for the life of me remove the opaque black background to my footer. Is there a better workaround here? If you can tell, I'm not extra proficient with CSS. Only knew basic HTML back in the day.

Code I've tried that did not do anything:

.header-announcement-bar-wrapper.light.shrink {
    background: transparent !important;
}

The custom CSS page does say it won't work on "cover pages" but I don't know if my homepage is a "cover page." If it is, I'm sure there's SOME sort of workaround. Just wanted my contact information hovering in the bottom right corner but it's proving to be difficult to do! 

Hi , Eavn you do it with css but I recommend you to just hide the footer on your home page and put the contact under the buttons you created this way you can get the desired look you want.

to hide footer on home page just add code block on homepage and type in the following code in it.

<style>
  footer{
   display:none !important; 
  }
</style>

Hope it helps 🙂

13 minutes ago, humxahafeex said:

Hi , Eavn you do it with css but I recommend you to just hide the footer on your home page and put the contact under the buttons you created this way you can get the desired look you want.

 

to hide footer on home page just add code block on homepage and type in the following code in it.

 

<style>
  footer{
   display:none !important; 
  }
</style>

 

Hope it helps 🙂

Hello! 

Well, if I wanted to hide the footer I could always just... delete the footer block rather than use code 😛

But I don't want to delete the footer, and I don't want to put the contact under the buttons; I want the contact at the very bottom of each page in the bottom right corner. At the very least just on the homepage. 

Thanks for trying to help!

On 2/12/2021 at 10:32 PM, EvanEdinger said:

Hello! 

Well, if I wanted to hide the footer I could always just... delete the footer block rather than use code 😛

But I don't want to delete the footer, and I don't want to put the contact under the buttons; I want the contact at the very bottom of each page in the bottom right corner. At the very least just on the homepage. 

Thanks for trying to help!

Do you still need help on this?

On 2/14/2021 at 12:12 PM, tuanphan said:

Do you still need help on this?

Yes I do! I still cannot find a way to make the footer transparent on the homepage. It's an option for the header, but not the footer

On 4/8/2021 at 1:49 AM, EvanEdinger said:

Yes I do! I still cannot find a way to make the footer transparent on the homepage. It's an option for the header, but not the footer

Try adding to Design > custom CSS > Then save & reload your site

/* Footer transparent */
body.homepage {
    position: relative;
}
body.homepage footer#footer-sections {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
}
body.homepage footer.sections section, body.homepage footer.sections .section-background {
    background: transparent;
}

On 4/12/2021 at 2:36 AM, tuanphan said:

Try adding to Design > custom CSS > Then save & reload your site

/* Footer transparent */
body.homepage {
    position: relative;
}
body.homepage footer#footer-sections {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
}
body.homepage footer.sections section, body.homepage footer.sections .section-background {
    background: transparent;
}

 

Hey @tuanphan

How do I make this effect ONLY on desktop and not on mobile? It's affecting my mobile menu. Thanks!

On 8/4/2021 at 2:42 AM, katcollins said:

Hey @tuanphan

How do I make this effect ONLY on desktop and not on mobile? It's affecting my mobile menu. Thanks!

Use this

@media screen and (min-width:768px) {
/* Footer transparent */
body.homepage {
    position: relative;
}
body.homepage footer#footer-sections {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
}
body.homepage footer.sections section, body.homepage footer.sections .section-background {
    background: transparent;
}
}

On 4/12/2021 at 2:36 AM, tuanphan said:

Try adding to Design > custom CSS > Then save & reload your site

/* Footer transparent */
body.homepage {
    position: relative;
}
body.homepage footer#footer-sections {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
}
body.homepage footer.sections section, body.homepage footer.sections .section-background {
    background: transparent;
}

 

@tuanphan thank you for helping out here. This has no effect on my site (using latest Safari 15.5 or Chrome 103). I have tried adding backup code to make the transparent style more robust, but it still has no effect.

body.homepage footer.sections section, body.homepage footer.sections .section-background {
     background: transparent;
     background: rgba(255, 0, 0, .0);
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#00ff0000', EndColorStr='#00ff0000')";
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#00ff0000', EndColorStr='#00ff0000');
           zoom: 1 !important;
}

(The red color is just for debugging the transparency.)

Do you have any suggestion for this?

My aim, more or less like the OP, is to get a full-bleed video background to look actually full-bleed instead of "half-bleed" 🤨.

Thank you!

14 hours ago, EricF said:

@tuanphan thank you for helping out here. This has no effect on my site (using latest Safari 15.5 or Chrome 103). I have tried adding backup code to make the transparent style more robust, but it still has no effect.

body.homepage footer.sections section, body.homepage footer.sections .section-background {
     background: transparent;
     background: rgba(255, 0, 0, .0);
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#00ff0000', EndColorStr='#00ff0000')";
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#00ff0000', EndColorStr='#00ff0000');
           zoom: 1 !important;
}

(The red color is just for debugging the transparency.)

Do you have any suggestion for this?

My aim, more or less like the OP, is to get a full-bleed video background to look actually full-bleed instead of "half-bleed" 🤨.

Thank you!

 

That code for Homepage (If you set page as homepage) only. If you use for other pages, it won't work.

Thank you!

FYI, I found that the transparency was still being overridden on some pages so for anyone else doing this you have to add !important:

/* delete .homepage if you want it on all pages */

body.homepage {
    position: relative;
}
body.homepage footer#footer-sections {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
}
body.homepage section, footer.sections .section-background {
     background: transparent !important;
     background: rgba(255, 0, 0, .0) !important;
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#00ff0000', EndColorStr='#00ff0000')";
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#00ff0000', EndColorStr='#00ff0000');
           zoom: 1 !important;
}

Hello,

I would like to make the Footer on my homepage "Adaptive." In other words, I would like the Footer to be transparent and to include the background image from the section immediately above the Footer (the image of the planet). I tried the code already mentioned in this thread, but it did not work.

website: https://iguana-clementine-r6hb.squarespace.com/

Would you please help?

Kind regards,

On 6/17/2024 at 8:00 PM, KnoweRata said:

Hello,

I would like to make the Footer on my homepage "Adaptive." In other words, I would like the Footer to be transparent and to include the background image from the section immediately above the Footer (the image of the planet). I tried the code already mentioned in this thread, but it did not work.

website: https://iguana-clementine-r6hb.squarespace.com/

Would you please help?

Kind regards,

 

You can use this code to Website Tools (under Not Linked) > Custom CSS

body.homepage {
& {
    position: relative;
}
footer#footer-sections {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    margin: 0 !important;
}
footer.sections section, footer.sections .section-background, .section-border {
    background: transparent !important;
}
div#siteWrapper {
    position: relative;
}}

Hi tuanphan,

Thank you!