Jump to content

Exclude site wide CSS for gradient background on home page

Go to solution Solved by Web_Solutions,

Recommended Posts

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

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;}

 

-------- > 👆 <---------- 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
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:

 

ScreenShot2023-10-26at1_11_14AM.thumb.png.ca4bcbdebd166d9b788d60781b603173.png

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 by jbellissimo
Clarity
Link to comment
  • Solution
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:

 

ScreenShot2023-10-26at1_11_14AM.thumb.png.ca4bcbdebd166d9b788d60781b603173.png

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;
  }
}

 

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.