Jump to content

CSS on all pages except one

Go to solution Solved by Beyondspace,

Recommended Posts

Site URL: https://www.thirstforallah.com

Hey all, currently I have the following CSS applying a gentle fade on all pictures on my site upon hover. I would like to exclude my splash page, as there is a image block there that I do not want fading. 

img {
   transition: all ease-in-out 500ms !important;
}
.sqs-block-image:hover img, .slide:hover img, img:hover {
  -webkit-filter: brightness(0.7) !important;
  filter: brightness(0.7) !important;
}
img {
  -webkit-backface-visibility: hidden;
  transform: translate3d(0px,0px,0px);
}

Rather than manually enter every single collection id prior to the code (I plan on dramatically expanding the site) - how can I apply to all other pages and exclude the splash. This is the collection ID for the splash page: collection-5e8c158b6e74072ae107edaa

I'm still learning here. Thanks!

Link to comment
  • Solution
Just now, Ahmed77 said:

Site URL: https://www.thirstforallah.com

Hey all, currently I have the following CSS applying a gentle fade on all pictures on my site upon hover. I would like to exclude my splash page, as there is a image block there that I do not want fading. 


img {
   transition: all ease-in-out 500ms !important;
}
.sqs-block-image:hover img, .slide:hover img, img:hover {
  -webkit-filter: brightness(0.7) !important;
  filter: brightness(0.7) !important;
}
img {
  -webkit-backface-visibility: hidden;
  transform: translate3d(0px,0px,0px);
}

Rather than manually enter every single collection id prior to the code (I plan on dramatically expanding the site) - how can I apply to all other pages and exclude the splash. This is the collection ID for the splash page: collection-5e8c158b6e74072ae107edaa

I'm still learning here. Thanks!

You can do like this

body:not(#collection-5e8c158b6e74072ae107edaa) img {
   transition: all ease-in-out 500ms !important;
}
body:not(#collection-5e8c158b6e74072ae107edaa) .sqs-block-image:hover img, 
body:not(#collection-5e8c158b6e74072ae107edaa) .slide:hover img, 
body:not(#collection-5e8c158b6e74072ae107edaa) img:hover {
  -webkit-filter: brightness(0.7) !important;
  filter: brightness(0.7) !important;
}
body:not(#collection-5e8c158b6e74072ae107edaa) img {
  -webkit-backface-visibility: hidden;
  transform: translate3d(0px,0px,0px);
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 6/23/2020 at 11:27 PM, bangank36 said:

You can do like this


body:not(#collection-5e8c158b6e74072ae107edaa) img {
   transition: all ease-in-out 500ms !important;
}
body:not(#collection-5e8c158b6e74072ae107edaa) .sqs-block-image:hover img, 
body:not(#collection-5e8c158b6e74072ae107edaa) .slide:hover img, 
body:not(#collection-5e8c158b6e74072ae107edaa) img:hover {
  -webkit-filter: brightness(0.7) !important;
  filter: brightness(0.7) !important;
}
body:not(#collection-5e8c158b6e74072ae107edaa) img {
  -webkit-backface-visibility: hidden;
  transform: translate3d(0px,0px,0px);
}

 

This worked BEAUTIFULLY. Thank you for your help!

Link to comment
  • 8 months later...
  • 2 weeks later...
On 3/9/2021 at 9:52 PM, Werny said:

Nice, I want to add a custom css on ALL pages exept of one (page-id-1583).
How can I do that?

Add this to Design > Custom CSS

body:not(#page-id-1583) * {
	font-family: yourfontname !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

I cannot get this to work, any tips on how to use it to exclude this code from one page on my site? Thank you

The code:

.sqs-block-image img {
    border-radius: 25px;
}

The page:

https://www.greywatercorps.com/projects

#collection-6052a1a2fbb7162bd0766ac9

On 3/19/2021 at 10:39 PM, tuanphan said:

Add this to Design > Custom CSS


body:not(#page-id-1583) * {
	font-family: yourfontname !important;
}

 

 

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.