jonuehring Posted March 29 Share Posted March 29 I'm using this CSS from Ghost Plugins to add a shadow to image blocks on my new site (not published yet). Is there a way to exclude it from certain image blocks? There are a few image blocks on my website that I don't want a shadow on, can I use the #block code to exclude in CSS? // IMAGE BLOCK - SOLID BOX SHADOW STYLE - GHOST // .sqs-block-image .design-layout-fluid .sqs-image { border: 1px solid #000 !important; border-radius: 10px !important; box-shadow: 5px 5px #000 !important; } Link to comment
WCS Posted March 29 Share Posted March 29 @jonuehring It might be easier to specify which blocks, or what sections, youʻd like the effect applied to. If you can share: your url and password which blocks you want the drop shadow on I can give you the code. If you want to source that yourself, I highly recommend getting the Chrome plugin Squarespace ID Finder. Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. Meghan | Westerly Creative Studio 🍪 Still need your website policies? Termageddon makes it easy. Get 10% off your first year! (< affiliate link) Link to comment
jonuehring Posted March 29 Author Share Posted March 29 (edited) @WCS I haven't published the site yet so it's still private and unpublished without my content on it yet. Would you be able to provide code without seeing the site? I do know which sections I want to include the drop shadow. Is that helpful? section[data-section-id="654571c2ded6710668652c59"] section[data-section-id="64daff6293656e1849bb6b68"] section[data-section-id="64daff6293656e1849bb6b6e"] Edited March 29 by jonuehring Link to comment
Solution WCS Posted March 29 Solution Share Posted March 29 @jonuehring Yes, that works great! Try the below code and let me know if it works. Just so you know though, you can also make your site available for view — even if you havenʻt paid for it yet. Settings > Website > Site Availability > Password Protected (then set a password) // Label which image it is section[data-section-id="654571c2ded6710668652c59"] .sqs-block-image .design-layout-fluid .sqs-image { border: 1px solid #000 !important; border-radius: 10px !important; box-shadow: 5px 5px #000 !important; } // Label which image it is section[data-section-id="64daff6293656e1849bb6b68"] .sqs-block-image .design-layout-fluid .sqs-image { border: 1px solid #000 !important; border-radius: 10px !important; box-shadow: 5px 5px #000 !important; } // Label which image it is section[data-section-id="64daff6293656e1849bb6b6e"] .sqs-block-image .design-layout-fluid .sqs-image { border: 1px solid #000 !important; border-radius: 10px !important; box-shadow: 5px 5px #000 !important; } ghostplugins 1 Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. Meghan | Westerly Creative Studio 🍪 Still need your website policies? Termageddon makes it easy. Get 10% off your first year! (< affiliate link) Link to comment
jonuehring Posted April 13 Author Share Posted April 13 @WCS sorry for the late reply - that worked, thanks so much! And good to know! WCS 1 Link to comment
WCS Posted April 13 Share Posted April 13 @jonuehring Oh good!! Thank you for marking the solution and happy designing ☺️ Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. Meghan | Westerly Creative Studio 🍪 Still need your website policies? Termageddon makes it easy. Get 10% off your first year! (< affiliate link) Link to comment
ellen_b Posted July 9 Share Posted July 9 (edited) Hi @WCS! I have a similar question, although I am not able to separate out by section. Is it possible to exclude certain image blocks from CSS styling? You can see in the screenshot that I've added a few of these collage-style images that I don't want the outline (or need the radius) on. I suspect there will be 4-6 of these total. The website: https://thesucculentstudio.squarespace.com/?password=new Here is the code I'm using: // Adds radius and border to image blocks // .sqs-image img { border-radius: 30px; } .content-fill::after, .content-fit::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 30px; border: 1.5px solid #000; } Any advice would be much appreciated! Edited July 9 by ellen_b Link to comment
WCS Posted July 10 Share Posted July 10 @ellen_b There is but I wasn't able to figure out how to apply it to your CSS. @tuanphan Do you have any insight? Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. Meghan | Westerly Creative Studio 🍪 Still need your website policies? Termageddon makes it easy. Get 10% off your first year! (< affiliate link) Link to comment
WCS Posted July 16 Share Posted July 16 @ellen_b Thank you for sharing! ☺️ Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. Meghan | Westerly Creative Studio 🍪 Still need your website policies? Termageddon makes it easy. Get 10% off your first year! (< affiliate link) 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