ellen_b Posted July 9 Share Posted July 9 Hi, I am trying to use css to make it so every image on my website has a border radius of 30px plus a 1.5px black outline with the same radius. I used the code below, but it has only added a radius to the outline, not the image itself. Is there a different property for the image itself that I need to use? Thank you! .sqs-block-image { border: 1.5px solid black !important; border-radius: 30px; } Link to comment
derricksrandomviews Posted July 9 Share Posted July 9 .image-block { border-radius: 25px 25px 25px 25px; ] Link to comment
Solution Lesum Posted July 9 Solution Share Posted July 9 @ellen_b Hi! You can add this code under Website > Pages > Website Tools > Custom CSS to add a site wide border radius and outline on images. .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; } If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
ellen_b Posted July 9 Author Share Posted July 9 (edited) @Lesum Success! Thanks so much. One follow up question: Is it possible to exclude a few specific image blocks from this styling? I've started adding in a few collage-type images that don't work with the outline. The majority of the images across the site I do want the radius and outline. It's just maybe 4-5 image site-wide that I'd like to exclude. Sorry to complicate things 🤪 and thank you so much for your help. Edited July 9 by ellen_b Link to comment
Lesum Posted July 9 Share Posted July 9 (edited) You're correct. The code in my previous comment applies to images added with image block only For summary block, you can add this code: .summary-thumbnail { border-radius: 30px; border: 1.5px solid #000; } For blog item thumbnails, you can add this code: .blog-item a.image-wrapper { border-radius: 30px; border: 1.5px solid #000; } For products block, .products .grid-image-wrapper { border-radius: 30px; border: 1.5px solid #000; } For individual product page, /* Product slides image */ .ProductItem-gallery { border: 1.5px solid #000; border-radius: 30px; } /* Product thumbnail image */ .ProductItem-gallery-thumbnails-item { margin-right: 1.5px; } img.ProductItem-gallery-thumbnails-item-image { border-radius: 30px; border: 1.5px solid #000; } Let me know if I missed anything else. Thanks! Edited July 10 by Lesum ellen_b 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Lesum Posted July 9 Share Posted July 9 @ellen_b Can you share the site URL? Also please let me know which images to exclude. If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
ellen_b Posted July 9 Author Share Posted July 9 @Lesum Here is the url: https://thesucculentstudio.squarespace.com/?password=new I haven't finished designing so all the final images aren't in there yet. But for testing purposes, you could use: #block-yui_3_17_2_1_1720561014139_90469 #block-yui_3_17_2_1_1720561014139_93451 #block-yui_3_17_2_1_1720561014139_95938 #block-yui_3_17_2_1_1720561014139_99079 Thank you! Link to comment
Lesum Posted July 10 Share Posted July 10 @ellen_b You can add this code. For any images you want to exclude, just add their block ID followed by a comma. #block-yui_3_17_2_1_1720561014139_90469, #block-yui_3_17_2_1_1720561014139_93451, #block-yui_3_17_2_1_1720561014139_95938, #block-yui_3_17_2_1_1720561014139_99079 { .content-fill::after, .content-fit::after { display: none !important; } } ellen_b 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
ellen_b Posted July 10 Author Share Posted July 10 @Lesum Woww, you are a code hero! Are you available to hire hourly for coding assistance by any chance? Link to comment
Lesum Posted July 10 Share Posted July 10 21 minutes ago, ellen_b said: @Lesum Woww, you are a code hero! Are you available to hire hourly for coding assistance by any chance? Thank you! 😊. Just sent you a message. If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
ellen_b Posted July 10 Author Share Posted July 10 @Lesum I'm back again on this one. 😬 I just saw the list of all the CSS for adding borders and radius on images in a bunch of different places. Thank you so much! I've applied them all and have a few follow-up questions: 1. On the individual shop page, the outlines are doing something funny... They aren't appearing on the right side only. (See screenshot). 2. Is it possible to add this styling to images that appear within an individual blog post? I know that is not fluid editor in there so maybe it works differently. 3. Finally, I've added an Instagram feed to the homepage and the styling isn't working quite right there. The outline shows up but the radius isn't applying. The website url again is: https://thesucculentstudio.squarespace.com/?password=new If you have any tips I would really appreciate it! Will happily send another coffee your way 🙂 Link to comment
Lesum Posted July 10 Share Posted July 10 (edited) @ellen_b Hi! You can remove the previous code for individual product pages and add the following: For individual product page: .ProductItem-gallery { border: 1.5px solid #000; border-radius: 30px; } .sqs-image-shape-container-element { border-radius: 30px; } For instagram block: .instagram-block img { border-radius: 30px; } For individual blog post page: .sqs-image-shape-container-element::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 30px; border: 1.5px solid #000; } Edited July 10 by Lesum If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
ellen_b Posted July 11 Author Share Posted July 11 (edited) THANK YOU @Lesum!! The only place remaining where it isn't working is when I insert one single product block into a regular page. This is the code that I thought would target that, but maybe I'm misunderstanding? Maybe that selector is for a summary block of products? /* Product blocks */ .products .grid-image-wrapper { border-radius: 30px; border: 1.5px solid #000; } https://thesucculentstudio.squarespace.com/?password=new Edited July 11 by ellen_b Link to comment
Lesum Posted July 11 Share Posted July 11 @ellen_b Hey, the code you mentioned was for product collection pages. For a product block on a regular page, you can add this code: .product-block img { border-radius: 30px; border: 1.5px solid #000; } ellen_b 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
ellen_b Posted July 11 Author Share Posted July 11 @Lesum That worked! Thank you! Now I am noticing this happening on the product gallery on mobile... 🤔 And that product title is so close to the bottom of the image. Not sure if that's related? Link to comment
Lesum Posted July 11 Share Posted July 11 @ellen_b Not related to the code, but on mobile, the product gallery images on individual product pages add spacing differently. You can use this code to address the issue: @media screen and (max-width: 767px) { #pdp .ProductItem-gallery { margin-bottom: 25px !important; padding-bottom: 0 !important; } } tuanphan and ellen_b 2 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
ellen_b Posted July 17 Author Share Posted July 17 @Lesum I ran into one more little snag with this one. I've found that if a product gallery only has one image (as opposed to a multi-image carousel) the border doesn't fit quite right. Maybe a further adjustment I need to make to the padding? (See screenshot) Single Image Product (doesn't fit) https://thesucculentstudio.squarespace.com/shop/p/4-inch-succulent-arrangement Multi-Image Product (fits) https://thesucculentstudio.squarespace.com/shop/p/disco-ball-succulent-arrangement Demo Site Password: "new" Any ideas? Thank you! Link to comment
Lesum Posted July 17 Share Posted July 17 @ellen_b Hi! You can add this code to ensure that product images inside a gallery always fit. #pdp img.ProductItem-gallery-slides-item-image { object-fit: cover !important; object-position: center center !important; } ellen_b 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
ellen_b Posted July 24 Author Share Posted July 24 Hello again @Lesum! I just connected a different Instagram account to this website I've been working on and unfortunately, it caused me to lose the radius on the Instagram feed again. At least on all but the first photo? 🤔 I tried deleting this part of the CSS and adding it back without success: /* Instagram block images */ .instagram-block img { border-radius: 30px; } Maybe there is a different selector I should be using? https://thesucculentstudio.squarespace.com/?password=kristy Do you have any ideas? Thank you so much! Link to comment
Lesum Posted July 25 Share Posted July 25 @ellen_b Hi! You can add this code to address the border radius issues in the Instagram feed. .instagram-block .sqs-video-wrapper .sqs-video-overlay { border-radius: 30px; } .instagram-block a.image-slide-anchor.content-fill { border-radius: 30px; } ellen_b 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? 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