Rounding image corners

@creedon

It works, but unfortunately it leaves a dark colour in the corners. I tried changing the colours of the section so that the background is white before adding the background image, but it didn't make a difference - the corners are still dark.

Any ideas?

@brianbyrne7

Here is what is happening. SS apparently uses whatever background color is set for the Lightest 1 theme as the background color behind sections with background image. Of course normally that isn't a problem because SS doesn't do rounded corners. And you can't blame SS as they didn't intend or account for rounded corners.

So you have two options. Change the background color for Lightest 1. Weather that will work in your situation only you can decide.

The other option is use some CSS.

:not( .has-background ) .section-background {

  background-color : white;
  
  }

Let us know how it goes.

I have updated my Mar. 11th code post. Following are the changes.

• fix for Safari transition/transform square corner issue
• added coverage for blogs
• added coverage for store product detail

On 3/12/2021 at 10:10 AM, creedon said:

An important thing to note folks. There are some differences between being in the editor mode and viewing your site externally. When us folks that help out give you a solution it is in many cases from the external point of view. That is why you may see differences in behaviour.

For your site I recommend you replace what you have for the rounded corner effect with the following.

Please see Site Wide Rounded Image Corners.

This is for v7.1 and specific to the poster's need.

If you need to extend the ruleset to cover more cases let me know. I'm building up a new set of rules for a site-wide effect.

Let us know how it goes.

Hi,

This worked well for me! Now how do I add a thin black border around it? I tried another ccs and the line didn't wrap around the border. 

I'm still on a trial site to see if this works.

Thanks

@ch_url

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 is not a security breach. 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.

9 hours ago, creedon said:

@ch_url

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 is not a security breach. 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.

Hi,
The url is https://chipmunk-ruby-kctr.squarespace.com/shop and the password is: password

Also can you help me -- how do I reduce the width of the sidebar of categories? Ive attached a photo.

Thank you

@creedon
Posting here as it's relevant to this post's question 🙂

I tried the code you wrote up there - it works like a charm!  However it turns all images into rounded corners. Is there anyway to turn just the pictures in specific sections into rounded corners on a specific page, but not others? E.g. on https://www.mikagu.me/work/instalment-only-card, I'd like to have round corners on only the phone mockups but not others. 

Really appreicate your help, creedon!!

5 hours ago, stawberryey said:

Is there anyway to turn just the pictures in specific sections into rounded corners on a specific page, but not others?

It is possible to target more specific elements of the page. Can you isolate phone mockups into page sections of their own? When I say isolate, not have any other non-mock up images that you don't want to get rounded corners in the same sections. Text and other elements is fine of course. Isolating the mockups in this way would allow for us to target CSS to those specific sections.

The other more tedious way would be to target specific image blocks.

15 hours ago, creedon said:

It is possible to target more specific elements of the page. Can you isolate phone mockups into page sections of their own? When I say isolate, not have any other non-mock up images that you don't want to get rounded corners in the same sections. Text and other elements is fine of course. Isolating the mockups in this way would allow for us to target CSS to those specific sections.

The other more tedious way would be to target specific image blocks.

Thanks so much for your reponse Creedon!

Hmm I tried adding new section but the padding on top and bottom is too wide that it looks disconnected with the rest of the article (https://www.mikagu.me/work/instalment-only-card). I am trying to round the corners of the two gifs in the "Designing for trust and confidence" section, mainly bc i thought rebuilding gifs would take much more time than coding it in squarespace. 

is there a way to target specific image blocks?

1 hour ago, stawberryey said:

is there a way to target specific image blocks?

Add the following to Design > Custom CSS.

/*

  begin images blocks round some image corners
  
  Version       : 0.1d0
  
  SS Version    : 7.1
  
  Dependancies  : LESS
  
  Notes         : this is a snippet of code adapted from Site Wide Rounded Image
                  Corners < https://bit.ly/3tlUQ4x >, < https://bit.ly/3l0zqWV >
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  @site-wide-image-radius : 25px;
  
  // for the following selectors each line ends with a comma except the last
  
  #block-yui_3_17_2_1_1630864230979_26348,
  #block-yui_3_17_2_1_1630864230979_33943
  
    {
    
      .intrinsic {
      
        .image-block-wrapper, // inline
        .image-inset // card, collage, overlap, poster, stack
        
          {
          
            border-radius : @site-wide-image-radius;
            z-index : 1;
            
            }
            
        .image-overlay {
        
          border-radius : @site-wide-image-radius;
          
          }
        }
        
      }
      
  // end round some images blocks

This is for a v7.1 site.

I have started you off with a couple of block ids. To find the others check out Heather Tovey's most excellent looking Squarespace ID Finder.

Let us know how it goes.

On 9/4/2021 at 6:50 AM, ch_url said:

how do I add a thin black border around it?

Something like the following?

Would this be for just product grid images?

On 9/6/2021 at 12:26 PM, creedon said:

Add the following to Design > Custom CSS.

/*

  begin images blocks round some image corners
  
  Version       : 0.1d0
  
  SS Version    : 7.1
  
  Dependancies  : LESS
  
  Notes         : this is a snippet of code adapted from Site Wide Rounded Image
                  Corners < https://bit.ly/3tlUQ4x >, < https://bit.ly/3l0zqWV >
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  @site-wide-image-radius : 25px;
  
  // for the following selectors each line ends with a comma except the last
  
  #block-yui_3_17_2_1_1630864230979_26348,
  #block-yui_3_17_2_1_1630864230979_33943
  
    {
    
      .intrinsic {
      
        .image-block-wrapper, // inline
        .image-inset // card, collage, overlap, poster, stack
        
          {
          
            border-radius : @site-wide-image-radius;
            z-index : 1;
            
            }
            
        .image-overlay {
        
          border-radius : @site-wide-image-radius;
          
          }
        }
        
      }
      
  // end round some images blocks

This is for a v7.1 site.

I have started you off with a couple of block ids. To find the others check out Heather Tovey's most excellent looking Squarespace ID Finder.

Let us know how it goes.

Perfect - this is so clear and worked like a charm. Thanks so much Creedon!

On 9/7/2021 at 2:11 AM, creedon said:

Something like the following?

Would this be for just product grid images?

Yes like that! Just for product grid images.

@ch_url

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  .products.collection-content-wrapper .grid-image-wrapper {
  
    border : solid thin;
    
    }
    
  </style>

This is for a v7.1 site.

Let us know how it goes.

13 hours ago, creedon said:

@ch_url

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  .products.collection-content-wrapper .grid-image-wrapper {
  
    border : solid thin;
    
    }
    
  </style>

This is for a v7.1 site.

Let us know how it goes.

Looks great!! Thank you very much.

Hi, 

I want to get my product images and additional product images to look like this:

would any of the above codes work? I have a paid site https://www.tribeandsol.com and also a site that I'm editing https://ellipse-prism-hf54.squarespace.com pw moonmama 

23 hours ago, MoonMama said:

I want to get my product images and additional product images to look like this:

Please post the exact URL for the product you show.

19 hours ago, creedon said:

Please post the exact URL for the product you show. I couldn't find it.

Hi @creedon, 

Here is the link to the image

https://www.garmentory.com/sale/st-agni/dresses-day/1376220-st-agni-straight-neck-dress

@MoonMama

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  /*
  
    begin store product detail image corners round
    
    Version     : 0.1d0
    
    SS Version  : 7.1
    
    Notes       : this is a snippet of code adapted from Site Wide Rounded Image
                  Corners < https://bit.ly/3tlUQ4x >, < https://bit.ly/3l0zqWV >
    
    By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    .ProductItem-gallery-slides {
    
      --site-wide-image-radius : 25px;
      
      }
      
    /* do not change anything below, there be the borg here */
    
    /* store product detail */
    
    .ProductItem-gallery-slides-item {
    
      border-radius : var( --site-wide-image-radius );
      z-index : 1;
      
      }
      
    /* end store product detail image corners round */
    
  </style>

<style>

  /*
  
    begin store product detail additional info image corners round
    
    Version     : 0.1d0
    
    SS Version  : 7.1
    
    Notes       : this is a snippet of code adapted from Site Wide Rounded Image
                  Corners < https://bit.ly/3tlUQ4x >, < https://bit.ly/3l0zqWV >
    
    By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    .ProductItem-additional {
    
      --site-wide-image-radius : 25px;
      
      }
      
    /* do not change anything below, there be the borg here */
    
    /* additinal info image block */
    
    .ProductItem-additional .sqs-block-image .intrinsic .image-block-wrapper, /* inline */
    .ProductItem-additional .sqs-block-image .intrinsic .image-inset, /* card, collage, overlap, poster, stack */
    .ProductItem-additional .sqs-block-image .intrinsic .image-overlay {
    
      border-radius : var( --site-wide-image-radius );
      z-index : 1;
      
      }
      
    /* end store product detail additional info image corners round */
    
  </style>

Let us know how it goes.

@MoonMama

For the rounded thumbnail images effect please see Store Product Detail Gallery Thumbnails Pill Segmented.

Let us know how it goes.

38 minutes ago, creedon said:

@MoonMama

For the rounded thumbnail images effect please see Store Product Detail Gallery Thumbnails Pill Segmented.

Let us know how it goes.

Hi, 

When I put in the code for images it worked but then when I put the code for thumbnails it looks like it changed the product image back to square. 

I also have css for thumbnails at the bottom instead of on the side can you have a look and tell me whet needs to be removed?  https://www.tribeandsol.com

@MoonMama

It appears the code has been installed in Settings > Advanced > Code Injection > HEADER. I recommended another location in my post. Also one style tag has been placed inside another which breaks the code.

6 minutes ago, creedon said:

@MoonMama

It appears the code has been installed in Settings > Advanced > Code Injection > HEADER. I recommended another location in my post. Also one style tag has been placed inside another which breaks the code.

The thumbnail instructions and the custom css you submitted both have the same location Settings > Advanced > Code Injection > HEADER as you can see the screen shot here. What was the other place?

@MoonMama The directions in the post above say Store Settings > Advanced > Page Header Code Injection. this is a different location than Settings > Advanced > Code Injection > HEADER.

Hi @creedon

Thanks for clearing that up, my apologies. I did it the correct way. Can you help to get the thumbnails on the side of the photo? Also to remove the arrows?

I think there's a code in my css that puts it on the bottom but I don't remember which one.