lookkook Posted May 26, 2022 Share Posted May 26, 2022 Site URL: https://lettuce-azalea-k7l4.squarespace.com/ Hi! I am trying to get my footer to adopt the background of the page and also have it be fixed. Is this possible since the footer is its own block? I am trying to practice recreating this site in Squarespace: https://toqa.tv/ This is mine: https://lettuce-azalea-k7l4.squarespace.com/ (pw: footerhelp) Link to comment
tuanphan Posted May 26, 2022 Share Posted May 26, 2022 Try adding to Design > Custom CSS /* 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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
lookkook Posted May 28, 2022 Author Share Posted May 28, 2022 Hi @tuanphan I added that, but it didn't seem to do anything for the homepage. Am I missing something? Link to comment
tuanphan Posted May 29, 2022 Share Posted May 29, 2022 I thought your site is 7.1. Use this new code /* Footer transparent */ body.homepage footer.Footer { position: absolute; bottom: 0; left: 0; z-index: 999; width: 100%; background-color: transparent !Important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
lookkook Posted June 20, 2022 Author Share Posted June 20, 2022 Awesome! Thank you so much! That worked! Link to comment
ellipon Posted April 26, 2023 Share Posted April 26, 2023 Hi @tuanphan ! Working in 7.1 Have tried the above code and some others floating around the internet and can't seem to get the transparent background to work (fixed footer works no problem). Any thoughts? site url: https://ukulele-chiton-zbz6.squarespace.com/ pass: sqspace Thanks! Link to comment
tuanphan Posted April 29, 2023 Share Posted April 29, 2023 On 4/26/2023 at 9:41 AM, ellipon said: Hi @tuanphan ! Working in 7.1 Have tried the above code and some others floating around the internet and can't seem to get the transparent background to work (fixed footer works no problem). Any thoughts? site url: https://ukulele-chiton-zbz6.squarespace.com/ pass: sqspace Thanks! Change last code body.homepage footer.sections section, body.homepage footer.sections .section-background { background: transparent; } to this body.homepage footer.sections section, body.homepage footer.sections .section-background, body.homepage footer.sections .section-border { background: transparent !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
JacobRosenvinge Posted October 10, 2023 Share Posted October 10, 2023 This code has helped me great - but is only working on the frontpage. Is it possible to make it work on all pages? Link to comment
tuanphan Posted October 13, 2023 Share Posted October 13, 2023 On 10/11/2023 at 3:25 AM, JacobRosenvinge said: This code has helped me great - but is only working on the frontpage. Is it possible to make it work on all pages? Just remove body.homepage from the code Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
JacobRosenvinge Posted October 13, 2023 Share Posted October 13, 2023 10 hours ago, tuanphan said: Just remove body.homepage from the code Sorry for being a newcomer here... I removed body.homepage from the code - but now its not working at all... What did i do wrong? /* Footer transparent */ { position: relative; } footer#footer-sections { position: absolute; bottom: 0; left: 0; z-index: 999; width: 100%; } footer.sections section, footer.sections .section-background, footer.sections .section-border { background: transparent !important; } Link to comment
Web_Solutions Posted October 13, 2023 Share Posted October 13, 2023 (edited) On 10/13/2023 at 6:24 PM, JacobRosenvinge said: Sorry for being a newcomer here... I removed body.homepage from the code - but now its not working at all... What did i do wrong? /* Footer transparent */ { position: relative; } footer#footer-sections { position: absolute; bottom: 0; left: 0; z-index: 999; width: 100%; } footer.sections section, footer.sections .section-background, footer.sections .section-border { background: transparent !important; } You should stay the body. You can remove (.homepage). Edited October 15, 2023 by Web_Solutions tuanphan, JacobRosenvinge and Ainul 2 1 If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks MD Rofik Website Designer and Digital Marketer ☕Am I helpful? Want to offer me a coffee? ✉ Send me a message if needed any help. I'll try to reply as soon as possible. Link to comment
JacobRosenvinge Posted October 23, 2023 Share Posted October 23, 2023 Thanks for helping me through! Link to comment
hannahnowlan Posted March 23 Share Posted March 23 Hi, I'd also like my footer to be transparent on all pages to follow colour of each page. I'd tried implementing code 7.1 without .homepage but it doesn't seem to work, instead it tweaks other elements of the footer but not the background colour to tranparent as desired. Any help would be appreciated site URL is landerse.au Link to comment
tuanphan Posted March 26 Share Posted March 26 On 3/23/2024 at 12:59 PM, hannahnowlan said: Hi, I'd also like my footer to be transparent on all pages to follow colour of each page. I'd tried implementing code 7.1 without .homepage but it doesn't seem to work, instead it tweaks other elements of the footer but not the background colour to tranparent as desired. Any help would be appreciated site URL is landerse.au What is password? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
tuanphan Posted March 31 Share Posted March 31 On 3/29/2024 at 3:48 PM, hannahnowlan said: Hi @tuanphan Password: red Use this CSS code /* 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; } body.homepage .section-border * { opacity: 0; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
hannahnowlan Posted April 1 Share Posted April 1 Thanks @tuanphan this code works great. Do you have a similar code to target specific footer sections on other pages (not the homepage) transparent too? Link to comment
tuanphan Posted April 3 Share Posted April 3 On 4/1/2024 at 4:26 PM, hannahnowlan said: Thanks @tuanphan this code works great. Do you have a similar code to target specific footer sections on other pages (not the homepage) transparent too? You can remove .homepage from the code Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment