michaeluwagbai Posted July 17, 2020 Share Posted July 17, 2020 Hey Guys, How can I add a border around an image? I tried with custom css but only found a code for text. See attached photo please, Thank you. Link to comment
tuanphan Posted July 20, 2020 Share Posted July 20, 2020 All images? Add to Home > Design > Custom CSS img { border: 5px solid violet; } 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
Hannahmay Posted August 27, 2020 Share Posted August 27, 2020 @tuanphan I tried this here but got an expanded border. Do you have code for borders on images and also text boxes (that doesnt use the markdown box)? Just specific boxes and images not them all - #block-yui_3_17_2_1_1598373529135_8687 {border: 3px solid white;} https://loveintegrationyoga.squarespace.com/ password - loveintegrationyoga Link to comment
tuanphan Posted August 27, 2020 Share Posted August 27, 2020 1 minute ago, Hannahmay said: @tuanphan I tried this here but got an expanded border. Do you have code for borders on images and also text boxes (that doesnt use the markdown box)? Just specific boxes and images not them all - #block-yui_3_17_2_1_1598373529135_8687 {border: 3px solid white;} https://loveintegrationyoga.squarespace.com/ password - loveintegrationyoga Which boxes? Can you take a screenshot? 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
glidinsk Posted October 19, 2020 Share Posted October 19, 2020 Try adding #block-yui_3_17_2_1_1598373529135_8687{border: 3px solid white; background: white;} to the image! You might have to mess with the border sizes to make it even, but at least it gets rid of that pesky border gap. Link to comment
failbetter Posted February 22, 2021 Share Posted February 22, 2021 does anyone know how to have a border round an inline image but not its caption? Link to comment
creedon Posted February 22, 2021 Share Posted February 22, 2021 @failbetter Please post the URL for the page where your your image is located on your site. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works. We can then take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
tuanphan Posted March 5, 2021 Share Posted March 5, 2021 On 2/22/2021 at 8:28 PM, failbetter said: does anyone know how to have a border round an inline image but not its caption? Hi. Can you share site url? 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
Dee18 Posted April 12, 2021 Share Posted April 12, 2021 On 7/20/2020 at 9:55 AM, tuanphan said: All images? Add to Home > Design > Custom CSS img { border: 5px solid violet; } Hey there. I tried using this code and it only gives me a border on the left side and top of the image. Any suggestions? Link to comment
thewayfaringdesigner Posted January 5, 2022 Share Posted January 5, 2022 Hey! I am using this code to apply a bottom line to all images: img { border-bottom: 7px solid #f26522; } This works perfectly, however it is not applying to all images and is adding a bottom border to my site logo. I used exclusion code on the block ID (collection ID in this case) for the logo, but the ID for the logo is different on each page. #collection-61a7b201d6e16e3abab16244 .header-title-logo img {border-bottom: none !important} This is fine for set up, but once I hand it to my client, each time they add a new project to the blog, the exclusion code will need to be updated to include any new pages. Any suggestions? Thanks! Link to comment
rdilly Posted January 6, 2022 Share Posted January 6, 2022 This worked for me... .portfolio-grid-basic .grid-item .grid-image { border:1vw solid white; } Link to comment
tuanphan Posted January 10, 2022 Share Posted January 10, 2022 On 1/5/2022 at 7:26 AM, thewayfaringdesigner said: Hey! I am using this code to apply a bottom line to all images: img { border-bottom: 7px solid #f26522; } This works perfectly, however it is not applying to all images and is adding a bottom border to my site logo. I used exclusion code on the block ID (collection ID in this case) for the logo, but the ID for the logo is different on each page. #collection-61a7b201d6e16e3abab16244 .header-title-logo img {border-bottom: none !important} This is fine for set up, but once I hand it to my client, each time they add a new project to the blog, the exclusion code will need to be updated to include any new pages. Any suggestions? Thanks! Each template has a different structure, can you share link to your site? We can give new code easier 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
thewayfaringdesigner Posted January 10, 2022 Share Posted January 10, 2022 https://precision-aluminum.squarespace.com/ password: booyellowpages Thanks! Link to comment
tuanphan Posted January 11, 2022 Share Posted January 11, 2022 10 hours ago, thewayfaringdesigner said: https://precision-aluminum.squarespace.com/ password: booyellowpages Thanks! Use this code article img { border-bottom: 7px solid #f26522; } with some images in image blocks, eg 4 image boxes on homepage, you need to remove all space inside images first 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
Jordy_TheShop Posted February 9, 2022 Share Posted February 9, 2022 (edited) On 7/20/2020 at 11:25 PM, tuanphan said: All images? Add to Home > Design > Custom CSS img { border: 5px solid violet; } Hi Tuan, I tried your code however seem to run into problems with the border. It becomes cut off (see attached screenshot). Do you know of any other ways to get this to work? Thanks, Jordy 🙂 Edited February 9, 2022 by Jordy_TheShop Link to comment
tuanphan Posted February 18, 2022 Share Posted February 18, 2022 On 2/9/2022 at 4:47 PM, Jordy_TheShop said: Hi Tuan, I tried your code however seem to run into problems with the border. It becomes cut off (see attached screenshot). Do you know of any other ways to get this to work? Thanks, Jordy 🙂 Do you still need help? Can you share link to page in screenshot? 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
Cara2408 Posted May 23, 2022 Share Posted May 23, 2022 I am also only getting a border on the top & left side of image. I am trying to do this in list images, I am using the code: .list-item:hover .list-image {border: solid 1.4px #161616;} but can't get the border all the way around the image on hover. Can anyone help? Link to comment
creedon Posted May 23, 2022 Share Posted May 23, 2022 4 minutes ago, Cara2408 said: Can anyone help? Please post the URL for a page on your site where we can see your issue. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works. Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/. We can then take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
Cara2408 Posted May 23, 2022 Share Posted May 23, 2022 I figured out the problem - When image crop is turned on, the border crops off. Turn image crop on original. You will just have to pre-size your images before uploading BadlandsDesignCo and creedon 2 Link to comment
LauraLeeDesigns Posted August 4, 2022 Share Posted August 4, 2022 Hello, I want to be able to add borders to the product listings but I noticed our title also has a border added to it, how can I keep borders on our listings but not have a border added to our site title/logo ( see atached). Here is the website link: https://www.lauraleedesign.com/ We are currently working with squarespace version 7.0 - Montauk family (montauk template). Any help would be appreciated to help solve this issue ! Link to comment
creedon Posted August 4, 2022 Share Posted August 4, 2022 24 minutes ago, LauraLeeDesigns said: I want to be able to add borders to the product listings Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection. <style> #productList .product .product-image img { border : solid 10px; } </style> This is for v7.0 using the Montauk template family. Let us know how it goes. LauraLeeDesigns 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
nahlah Posted August 5, 2022 Share Posted August 5, 2022 On 2/18/2022 at 7:35 AM, tuanphan said: Do you still need help? Can you share link to page in screenshot? I am having this same problem with a code for a border on the product item page. I have tried 2 codes one does the cut off like the example in this photo the other code works perfect on desktop but on mobile doesn't wrap the image perfectly and leaves a large gap my site isn't finished but is public so I can get help faceoflove.squarespace.com Link to comment
nahlah Posted August 5, 2022 Share Posted August 5, 2022 Just now, nahlah said: I am having this same problem with a code for a border on the product item page. I have tried 2 codes one does the cut off like the example in this photo the other code works perfect on desktop but on mobile doesn't wrap the image perfectly and leaves a large gap my site isn't finished but is public so I can get help faceoflove.squarespace.com ALSO the borders around the images throughout my site seem to be off center in the mobile version designing with the new fluid feature I can't get the images to be centered even when I place them in the center they end up shifting Link to comment
LauraLeeDesigns Posted August 5, 2022 Share Posted August 5, 2022 On 8/4/2022 at 12:23 PM, creedon said: Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection. <style> #productList .product .product-image img { border : solid 10px; } </style> This is for v7.0 using the Montauk template family. Let us know how it goes. Thank you so much once again ! It worked out great for us, appreciate all your help. creedon 1 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