jbellissimo Posted October 25, 2023 Posted October 25, 2023 Hello! I'm using a gradient on all of the pages on my website generated using CSS: .section-border{opacity:0!important} .site-wrapper{background: linear-gradient(#101010, #080808)!important;} .page-section, .section-background{background:transparent!important;} But I would like to omit this on my homepage to feature a background video. The video is in place, but the CSS code blocks it. Any help is appreciated. Thanks, Jay
melody495 Posted October 25, 2023 Posted October 25, 2023 You can use the not selector. Put the relevant id from homepage. .section-border:not(#section-id){opacity:0!important} .site-wrapper:not(#collection-id){background: linear-gradient(#101010, #080808)!important;} .page-section, .section-background{background:transparent!important;} jbellissimo 1 -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd When I have time, I like to help on the Forum, but if you need my full attention, please send your request here. Tools I use (affiliate links😞 📅Blog Date Format plugin (Free by BeyondSpace) ⏬Lazy Load Summary Block plugin (by Squareswebsites) 📜Privacy Policy & Cookie Consent plugin (10% off by Termageddon) 📈SEO plugin for Squarespace (by SEOSpace) ☕ Did I help? I like coffee (Thank you)
jbellissimo Posted October 26, 2023 Author Posted October 26, 2023 (edited) 6 hours ago, melody495 said: .section-border:not(#section-id){opacity:0!important} .site-wrapper:not(#collection-id){background: linear-gradient(#101010, #080808)!important;} .page-section, .section-background{background:transparent!important;} Thank you so much! It's not quite working, but I can tell we're hot on the trail! This is how I interpreted and implemented what you provided with the appropriate IDs in place: .section-border:not(#section[data-section-id="65393dcae0880046ad5fd22a"]){opacity:0!important} .site-wrapper:not(#collection-65393603c19fc514aa0b48bc){background: linear-gradient(#101010, #080808)!important;} .page-section, .section-background{background:transparent!important;} This is my site, so you wanted to see how it's currently behaving with this code in place: https://www.bellissimoeditorial.com And here's a screenshot of the relevant IDs revealed: I'm showing the background video in this example image so you can see the section I'd like to reveal, but it's not currently displaying. I hope this all makes sense and that whatever is in error is easily solved. Thanks again for your help! Jay Edited October 26, 2023 by jbellissimo Clarity
Solution Web_Solutions Posted October 26, 2023 Solution Posted October 26, 2023 3 hours ago, jbellissimo said: Thank you so much! It's not quite working, but I can tell we're hot on the trail! This is how I interpreted and implemented what you provided with the appropriate IDs in place: .section-border:not(#section[data-section-id="65393dcae0880046ad5fd22a"]){opacity:0!important} .site-wrapper:not(#collection-65393603c19fc514aa0b48bc){background: linear-gradient(#101010, #080808)!important;} .page-section, .section-background{background:transparent!important;} This is my site, so you wanted to see how it's currently behaving with this code in place: https://www.bellissimoeditorial.com And here's a screenshot of the relevant IDs revealed: I'm showing the background video in this example image so you can see the section I'd like to reveal, but it's not currently displaying. I hope this all makes sense and that whatever is in error is easily solved. Thanks again for your help! Jay Replace the code with the code below body:not(.homepage) { .section-border{ opacity:0!important; } .site-wrapper{ background: linear-gradient(#101010, #080808)!important; } .page-section, .section-background{ background:transparent!important; } } Ainul, jbellissimo and melody495 3 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.
jbellissimo Posted October 26, 2023 Author Posted October 26, 2023 10 hours ago, Web_Solutions said: Replace the code with the code below That worked! Thank you so much. I appreciate everyone's help!
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment