Jump to content

Rounding image corners

Recommended Posts

On 12/10/2021 at 6:03 PM, MoonMama said:

Can you help to get the thumbnails on the side of the photo?

Edit the design of a product and change the Gallery Thumbnail Placement to side.

1852760637_ScreenShot2021-12-13at11_33_03AM.png.e86d1ba1aa2dc8a5fb7263512b06e212.png

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 12/10/2021 at 6:03 PM, MoonMama said:

Also to remove the arrows?

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>
  
  .tweak-product-basic-item-gallery-design-slideshow .ProductItem-gallery-carousel-controls {
  
    display : none;
    
    }
    
  </style>

Let us know how it goes.
 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 2 months later...
2 hours ago, plan-a said:

I copied your code for the rounded corners, it works amazing, maybe too well 😛

Done!

I have updated my cited code in my March 11, 2021 post earlier in this thread.

Thank you for reporting that bug!

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 2 weeks later...

I have updated my cited code in my March 11, 2021 post earlier in this thread.

The code now uses LESS's Parametric Mixins feature to be able to turn on and off some of which images get rounded corners.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 month later...
1 minute ago, HunterD said:

How can I round all my blog thumbnails corners at once?

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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
50 minutes ago, creedon said:

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.

@creedonSure, here's the site: https://www.mashaborak.com/work - Thanks!

Link to comment
1 hour ago, HunterD said:

Sure, here's the site

Install my cited code mentioned earlier in this thread then in the code set most of the areas to false, leave .blog-list set to true.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 2 months later...
On 1/28/2021 at 1:45 PM, Corizona said:

Hi,

Here is an expanded version of @creedon's message that fixes images in blogs too.

// This adds a radius to most of the images
.products .grid-image-wrapper,
.image-block-wrapper,
.ProductItem-gallery-slides-item.selected,
.sqs-gallery-design-grid-slide .image-slide-anchor
.image-overlay  {    border-radius: 12px;    }
// This adds a radius to the images when under a colored field
img {
border-radius: 12px; 
}
// This adds a radius to the BLOB/article images
a {
border-radius: 12px
}

hi there, Most of this worked great on this Brine site https://www.handyhaynets.com/allproducts with the exception of those shop items. Could you help? I'd like to include these for design continuity. I tried myself using inspect but couldn't target all the right classes.

Link to comment
On 6/11/2022 at 4:14 AM, jaisequoia said:

hi there, Most of this worked great on this Brine site https://www.handyhaynets.com/allproducts with the exception of those shop items. Could you help? I'd like to include these for design continuity. I tried myself using inspect but couldn't target all the right classes.

Try this CSS

figure.ProductList-outerImageWrapper {
    border-radius: 20px;
}

 

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
11 hours ago, jaisequoia said:

Actually @tuanphan 
I can see now the only thing missing is rounding the suggested products on product pages? Can you help with that one too please? 

Use this new code

figure.ProductList-outerImageWrapper, .ProductItem-relatedProducts-innerImageWrapper {
    border-radius: 20px;
}

 

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
  • 2 weeks later...
26 minutes ago, djsend said:

But it's not rounding the corners of images inserted in the design on the home page.

It appears you've not set the four variables near the top of the code.

  @border-color : red;
  @border-radius : 25px;
  @border-style : solid;
  @border-width : 2px;

You can of course set the values to meet your needs.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 7 months later...

I have updated my cited code in my March 11, 2021 post earlier in this thread. The following issues were addressed.

  * fix summary block image border
  * add support for product blocks
  * add support for fluid engine

Let me know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 6 months later...

I found this thread from a few years ago and it's been very helpful. I've added @creedon's code (see below):

// This adds a radius to most of the images

.products .grid-image-wrapper,

.image-block-wrapper,

.ProductItem-gallery-slides-item.selected,

.sqs-gallery-design-grid-slide .image-slide-anchor

.image-overlay  {    border-radius: 12px;    }

// This adds a radius to the images when under a colored field

img {

border-radius: 12px;

}

// This adds a radius to the BLOB/article images

a {

border-radius: 12px

}

Thank you for that @creedon, that code has done a great job and rounded the corners perfectly everywhere except for on our page we've added our Instagram feed images to. On that page some images have rounded corners and some don't. The images without rounded corners are video posts, however there are also some video posts with rounded corners, so I'm a bit stumped. Here's a screenshot from this page - https://www.terratag.com.au/visuals:

WohOkleso7.thumb.png.fd5fcc04a148dfe583caf18ffab14edd.png

 

If anyone has any suggestions to get the square corners rounded that'd be much appreciated. I did try the site wide image borders however that left even more images without rounded corners. 

Thanks all. 🙂 

Link to comment
7 hours ago, Terratag said:

I did try the site wide image borders however that left even more images without rounded corners.

The site wide image borders code evolved out of my other, older, code. The older code was a ham-fisted approach before I had a better handle on some of the subtleties of putting borders around images.

First not all images can have borders around them because of how the HTML is structured or other factors.

My site wide code does have holes in it and will always have them. Others may be just because I'd not run into that particular element and have not written code for it.

The Intragram issue you are having is because of how my old code handles borders. Targeting the img element is not adequate.

Here we can see a working image border.

ScreenShot2023-09-01at12_24_52PM.thumb.png.3b33b93e63054677acce8b1c87fc2db4.png

Noticed the dimmed image. It is square and fits in its slot.

Here is an image where the border doesn't work.

ScreenShot2023-09-01at12_26_10PM.thumb.png.782820d83c9ccb51b5cad39b8ca970c9.png

Notice how the dimmed image is outside it's slot. This is something SS does. This is why the border appears not to be there. It is but outside the slot so can't be seen.

These types of issues are what my site wide code attempts to address. Instead of ham-fistedly targeting the image element everywhere I attempt to target elements like the slot so that a border gets applied.

In my site wide code I list the know areas where the code won't work.

If there are elements were the code is not working I'm willing to either update my code or add new CSS to address elements I may be missing. I would need to know what those elements are. A link to a URL and pointer to the element would be useful.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Thank you so much for your help @creedon I was able to fix the remaining rounded corners with the below custom CSS I found on a different thread. I've removed the section ID number from between the quotes:

section[data-section-id=""] .sqs-video-wrapper .sqs-video-overlay {
    border-radius: 12px;
}
section[data-section-id=""] .sqs-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor img {
    border-radius: 12px;
}

 

Have a great day. 🙂

Link to comment
  • 5 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.