jbellissimo Posted October 25, 2023 Share 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 Link to comment
melody495 Posted October 25, 2023 Share 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 Website Developer e: melody@melodylee.tech 💻 Can't figure something out and want to learn? 💁♀️ 1-2-1 Squarespace session 👩💻 Need some customisation for a design? 💁♀️ Custom Code help ☕ Did I help? 💁♀️ I like coffee (Thank you) Link to comment
jbellissimo Posted October 26, 2023 Author Share 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 Link to comment
Solution Web_Solutions Posted October 26, 2023 Solution Share 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. Link to comment
jbellissimo Posted October 26, 2023 Author Share 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! 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