thesoulfulentrepreneur Posted October 17, 2022 Share Posted October 17, 2022 (edited) Site URL: https://www.thesoulful.squarespace.com Hello! Site URL: https://www.thesoulful.squarespace.com Pass: livesoulfully I am interested in using CSS to apply borders to the images on a website as efficiently as possible. I referenced the solutions in this thread, however, none seemed to do the trick: I got seemingly close with this: .sqs-block-image { border: 1px solid #d1a556 !important; padding: 10px !important; } However, two issues arise: 1. There are several images I do not wish to target. I assume that requires us to get more specific with targeting, like using the section ID, like this (this is for the home header): section[data-section-id="6328d3a483fd37bbf384a8f6"] .sqs-block-image { border: 1px solid #d1a556 !important; padding: 10px !important; } 2. In some cases, the padding doesn't apply evenly, for example, there may be more/less padding on the top/bottom of the image depending on the screen width. I have attached some examples for visual reference. I tried to solve this by switching the design setting of the image block from 'fit' to 'fill', but that introduces other proportion-related issues across screen sizes, which I'd like to avoid. Does anyone have any thoughts as to how to implement? Thanks in advance! Edited October 17, 2022 by stellaehabib Added additional details for further clarity ilseS 1 Link to comment
tuanphan Posted October 19, 2022 Share Posted October 19, 2022 I recently settled for a member, it took quite a while to find the right code. You want to do this for Image Blocks only or Image Block, Summary Image, Blog Image... or? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
tuanphan Posted October 22, 2022 Share Posted October 22, 2022 On 10/20/2022 at 12:47 PM, thesoulfulentrepreneur said: @tuanphan 🙂 just image blocks. the challenge is, on some pages, it will not be all image blocks. for example, let's take the home page. that's an instance where all image blocks will have frames. comparatively, if you visit a client page, like this, i'm looking to add it to just the header and laptop mockup with the scrolling website. or the tools page, like this, i'm looking to add it to just the header - not the logo images. Try adding this to Design > Custom CSS /* Image frame */ .fluid-image-container, .sqs-video-wrapper { border: 3px double black; } .sqs-image, .sqs-image div { overflow: visible; } .image-block .content-fill, .image-block .content-fit, .content-fit img { width: calc(~"100% - 10px") !important; height: calc(~"100% - 10px") !important; top: 5px !important; left: 5px !important; } .content-fit img { object-fit: cover !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
thesoulfulentrepreneur Posted October 22, 2022 Author Share Posted October 22, 2022 (edited) @tuanphan thank you very much. i have added it. the good news, it seems to solve one part of the problem noted above. the other, about how to not target some images, still remains. here are a couple of examples: - the logos on this page: https://thesoulful.squarespace.com/tools. - the header images on pages like this: https://thesoulful.squarespace.com/about. is there any way to exclude images? Edited October 23, 2022 by thesoulfulentrepreneur updated to remove some content Link to comment
tuanphan Posted October 26, 2022 Share Posted October 26, 2022 On 10/22/2022 at 10:30 PM, thesoulfulentrepreneur said: @tuanphan thank you very much. i have added it. the good news, it seems to solve one part of the problem noted above. the other, about how to not target some images, still remains. here are a couple of examples: - the logos on this page: https://thesoulful.squarespace.com/tools. - the header images on pages like this: https://thesoulful.squarespace.com/about. is there any way to exclude images? You want to remove code on images on these pages or? If remove, use this code /* remove images border */ /* tools */ .fe-6324cd03f1e6fc893fae5f01 * { border: none !important; } With about, you mean top section images? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
thesoulfulentrepreneur Posted October 26, 2022 Author Share Posted October 26, 2022 @tuanphan ah ok, thank you - that makes sense in cases where I want to remove frames from all images in a section. With the top section images, I'm referring to the first image on this page, for example: https://thesoulful.squarespace.com/pre-made-brands-websites (there are a few other pages, like this, where the top image already has a custom frame that's more complex than just a border). Another example of a 'specific' image that I may want to remove a frame from is the scrolling desktop mockups that you see in the 'our identities' section. So in those situations, what's the best way to target a single image? Would it be like this (this is for the first image on the above referenced page)? #block-632883d2f88d78b13986a0e0 .fluid-image-container { border: none !important; } Link to comment
tuanphan Posted October 31, 2022 Share Posted October 31, 2022 On 10/26/2022 at 10:39 AM, thesoulfulentrepreneur said: @tuanphan ah ok, thank you - that makes sense in cases where I want to remove frames from all images in a section. With the top section images, I'm referring to the first image on this page, for example: https://thesoulful.squarespace.com/pre-made-brands-websites (there are a few other pages, like this, where the top image already has a custom frame that's more complex than just a border). Another example of a 'specific' image that I may want to remove a frame from is the scrolling desktop mockups that you see in the 'our identities' section. So in those situations, what's the best way to target a single image? Would it be like this (this is for the first image on the above referenced page)? #block-632883d2f88d78b13986a0e0 .fluid-image-container { border: none !important; } You can use some code like this #block-id * { border: none !important; } Use this tool to find block id https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
thesoulfulentrepreneur Posted November 8, 2022 Author Share Posted November 8, 2022 @tuanphan thank you 🙂 generally speaking, this solved almost all issues. I noticed one small thing. On the tools page: https://www.thesoulful.squarespace.com/tools, I applied the following code to remove the frames from the logos: Quote section[data-section-id="6324cd0347714e92a18a1541"] .fluid-image-container { border: none !important; } Prior to doing so, I noticed that the Flodesk logo is cut off, along the bottom. I believe it's due to this code, from the solution above: Quote .image-block .content-fill, .image-block .content-fit, .content-fit img { width: calc(~"100% - 20px") !important; height: calc(~"100% - 20px") !important; top: 10px !important; left: 10px !important; } because when I remove it, it's fine. Any thoughts on what to do here? Would it be easiest if we just manipulate the img file to add more white space around it? Link to comment
thesoulfulentrepreneur Posted November 8, 2022 Author Share Posted November 8, 2022 (edited) @tuanphan thank you - that worked 🙂 The good news, mostly everything has been addressed. Just this remains: Circular Boders Is it possible to apply the frames with padding to images in testimonial slider blocks? For an example, please refer to the home page, under the 'our clients' block. I tried the following code: Quote .user-items-list-carousel__media-inner { border: 1px solid black; } However, the issue arises with padding: since we use the Fluid editor to crop the images in Squarespace, so the original images are actually square. Is there a code solution for this or would it be better for us to upload the images as circles? Arch Borders On a somewhat similar note, is it possible to add gold frames to arch shaped images? For example, like the first image on this page. Thank you! Edited November 8, 2022 by thesoulfulentrepreneur Added one more question Link to comment
tuanphan Posted November 9, 2022 Share Posted November 9, 2022 First, try using square images Next, use this CSS .user-items-list-carousel__media-inner { overflow: visible !important; border: 1px solid red; padding: 5px !important; height: auto !important; border-radius: 50% !important; } .user-items-list-carousel__media-inner img { border-radius: 50%; position: static !important; } For this image? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
thesoulfulentrepreneur Posted November 9, 2022 Author Share Posted November 9, 2022 @tuanphan thank you! that does the trick. yes correct, that image. Link to comment
tuanphan Posted November 11, 2022 Share Posted November 11, 2022 On 11/9/2022 at 10:38 PM, thesoulfulentrepreneur said: @tuanphan thank you! that does the trick. yes correct, that image. I think you should use a normal image, then we will use CSS to make curve on top left top right corners. I did an example with image at bottom of page' div#block-efff2a01b90cc35816e9 .image-block-wrapper { border: 1px solid #d1a556; padding: 10px; border-top-left-radius: 300px; border-top-right-radius: 300px; } div#block-efff2a01b90cc35816e9 img { border-top-left-radius: 300px; border-top-right-radius: 300px; } ilseS and thesoulfulentrepreneur 1 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ilseS Posted November 15, 2022 Share Posted November 15, 2022 On 11/11/2022 at 1:31 AM, tuanphan said: I think you should use a normal image, then we will use CSS to make curve on top left top right corners. I did an example with image at bottom of page' div#block-efff2a01b90cc35816e9 .image-block-wrapper { border: 1px solid #d1a556; padding: 10px; border-top-left-radius: 300px; border-top-right-radius: 300px; } div#block-efff2a01b90cc35816e9 img { border-top-left-radius: 300px; border-top-right-radius: 300px; } This is fantastic @tuanphan I've been going round and round trying to give a border to image shapes that don't end up a square around an oval -impossible! This is a great workaround. Many thanks for posting. thesoulfulentrepreneur 1 Link to comment
thesoulfulentrepreneur Posted November 16, 2022 Author Share Posted November 16, 2022 On 11/10/2022 at 8:31 PM, tuanphan said: I think you should use a normal image, then we will use CSS to make curve on top left top right corners. I did an example with image at bottom of page' div#block-efff2a01b90cc35816e9 .image-block-wrapper { border: 1px solid #d1a556; padding: 10px; border-top-left-radius: 300px; border-top-right-radius: 300px; } div#block-efff2a01b90cc35816e9 img { border-top-left-radius: 300px; border-top-right-radius: 300px; } Thank you very much @tuanphan - I so greatly appreciate your support. I had to add !important to the border property but, it did the trick! 🙂 tuanphan 1 Link to comment
thesoulfulentrepreneur Posted July 21, 2023 Author Share Posted July 21, 2023 Hello @tuanphan - I'm back, sometime later, with another dilemma related to these gold frames. This time, it's with the first testimonial block which you will find here. I am able to add the gold border, however, when I add the padding value - the result looks like this: This is the code without the padding value: #collection-6452ac9c917bdf36311b4be3 { .user-items-list-carousel__slide { flex-direction: row !important; } .user-items-list-carousel__media-container { width: 30% !important; margin-right: 50px; } .user-items-list-carousel__media { width: 100% !important; } } section[data-section-id="6452aca66bb4183fdbf6d4da"] .user-items-list-carousel__media-inner { overflow: visible !important; border: 1px solid #d1a556; } Do you have any idea what we might be missing? Thank you! Link to comment
Solution tuanphan Posted July 22, 2023 Solution Share Posted July 22, 2023 Use this CSS to add space inside image. This code will change width to 100% - 8px, height to 100% - 8px, then move image to right 4px (so it will have left/right space = 4px), and move down 4px (so top/bottom space = 4px) #collection-6452ac9c917bdf36311b4be3 section[data-section-id="6452aca66bb4183fdbf6d4da"] .user-items-list-carousel__media-inner img { width: calc(~"100% - 8px") !important; height: calc(~"100% - 8px") !important; left: 4px !important; top: 4px !important; } paul2009 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
thesoulfulentrepreneur Posted July 24, 2023 Author Share Posted July 24, 2023 @tuanphan ohhhh got it - thank you! that worked 🙂 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