jbellissimo Posted October 25 Share Posted October 25 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 Share Posted October 25 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 Developer You dream it, I'll make it happen. Contact me: 💻 https://www.melodylee.tech ✉️ my email 📍 UK based. The great thing about the internet, we can work together from anywhere. #neverstoplearning ☕ I like coffee 😊 Link to comment
jbellissimo Posted October 26 Author Share Posted October 26 (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 by jbellissimo Clarity Link to comment
Solution Web_Solutions Posted October 26 Solution Share Posted October 26 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; } } jbellissimo, Ainul 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 Author Share Posted October 26 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