Ten10 Posted June 24, 2020 Share Posted June 24, 2020 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 Beyondspace Posted June 24, 2020 Solution Share Posted June 24, 2020 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); } tuanphan 1 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 HighlighterIf 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
Ten10 Posted June 26, 2020 Author Share Posted June 26, 2020 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! Beyondspace 1 Link to comment
Werny Posted March 9, 2021 Share Posted March 9, 2021 Nice, I want to add a custom css on ALL pages exept of one (page-id-1583). How can I do that? Link to comment
tuanphan Posted March 20, 2021 Share Posted March 20, 2021 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
jfmedia Posted April 2, 2021 Share Posted April 2, 2021 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
creedon Posted April 2, 2021 Share Posted April 2, 2021 @jfmedia Try the following. body:not( #collection-6052a1a2fbb7162bd0766ac9 ) .sqs-block-image img { border-radius : 25px; } This is for v7.1 and specific to the poster's need. Let us know how it goes. tuanphan 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! 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