Jump to content

Exclude site wide CSS for gradient background on home page

Go to solution Solved by Web_Solutions,

Recommended Posts

Posted

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

 

 

Posted

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 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)

Posted (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:

 

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
  • Solution
Posted
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.


 

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.