Rounding image corners

Site URL: https://horse-onion-layz.squarespace.com

I’d like to be able to round all the image corners on my site, could someone please help with with the coding and where to put it exactly? I’d imagine there might be different locations for galleries and thumbnails etc?

Thanks very much!

Please set up a site-wide password. Post the password here.

We can then take a look at your issue.

Hi Creedon, I just did that there.

Site URL:https://horse-onion-layz.squarespace.com/

Password: SquareSpace2020

Thanks so much!

On 10/18/2020 at 12:26 PM, Peterotoole said:

I’d imagine there might be different locations for galleries and thumbnails etc?

You are exactly right. You'll need to build up CSS selectors to take care of each kind of image you want to have rounded corners on.

Here is a start. Add the following to Design > Custom CSS.

.products .grid-image-wrapper,
.image-block-wrapper,
.ProductItem-gallery-slides-item.selected,
.sqs-gallery-design-grid-slide .image-slide-anchor

  {
  
    border-radius: 25px;
    
    }

This is for a v7.1 site. You can change the 25 to suit.

If you want different border radiuses for different types of images then you'll need to create additional rule sets.

Let us know how it goes.

17 hours ago, creedon said:

You are exactly right. You'll need to build up CSS selectors to take care of each kind of image you want to have rounded corners on.

Here is a start. Add the following to Design > Custom CSS.

.image-block-wrapper,
.sqs-gallery-design-grid-slide .image-slide-anchor

  {
  
    border-radius: 25px;
    
    }

This is for a v7.1 site. You can change the 25 to suit.

If you want different border radiuses for different types of images then you'll need to create additional rule sets.

Let us know how it goes.

Creedon! absolute legend! thanks that actually fixed my issue everywhere with the exception of my shop items here: https://horse-onion-layz.squarespace.com/config/pages/5f8cca7c0d6cfe10fbc21610/categories/5f8cca7c0d6cfe10fbc21616

Do you have any idea what code to use for these items?

Thanks again!!

I've updated the CSS in my previous post.

1 hour ago, creedon said:

I've updated the CSS in my previous post.

Just tried that new CSS Creedon and it doesn't appear to change the shop items.

Updated previous post again. I had a copy/paste mishap last time! 🙂

2 minutes ago, creedon said:

Updated previous post again. I had a copy/paste mishap last time! 🙂

 

ABSOLUTE GENIUS Creedon!! Thanks so much man!! Seriously appreciate it! Everything is nicely rounded! thanks again!!

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
}

On 1/28/2021 at 9: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
}

Hey there! thanks a million for this, I was actually going to post another question to find out how to round some of the other images but this has solved it! appreciate your help!

This is great. Can someone suggest what lines of code I can add to also include rounding image corners on Blog images and all summary blocks in 7.0? Thanks!

@malyssa

Please post the URL for 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.

It is likely that the code above won't work for you because it is for a v7.1 site. We would need to come with a new set of selectors specific for your template on v7.0.

Hi @creedon,

Thank you so much for the suggestion! I was able to use the code you showed for my site, but for some reasons I could not get it to work on the block image poster. It would only round the corner when I'm editor mode but nothing would change on the live site. Do you happen to know what I could add so I could have the image block poster rounded as well?

Thank you!

@hnrytran

Please post the URL for the page on your site where this issue is occurring. Please also have the code installed, as long as it's not causing a problem, so we can examine it.

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.

@creedon

https://www.h-tran.com/

Here is the link to my home page, where I am having trouble to round the corner of the image on the left (poster), and your code works fine the the image on the right (inline)

But the corner is rounded when I entered editor mode. And this is what I am trying to do here by the way

Thank you!

On 3/11/2021 at 4:24 PM, hnrytran said:

But the corner is rounded when I entered editor mode. And this is what I am trying to do here by the way

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 Image Borders.

This is for v7.1 and covers many of the image border use cases but not all.

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.

Thank you so much @creedon  It worked perfectly!! 

One little thing I noticed that the hyperlinks appear with double underlines like this after I applied the code. Do you know anyway I could reset it to the default?

Thank you!

@hnrytran

Take the code out for a moment. Save, reload the page, let us know what happens. When I removed the code from your page locally, the double lines were still there.

If you find the same thing I think it may be related to an update SS has been releasing since apparently earlier today. Lots of folks talking about underlines reappearing that had been turn off but perhaps the double underline is a variation on that.

Here you can see code removed and no rounding but double lines remain.

@hnrytran

Confirmed?

Gotcha, do you know if it will be removed eventually?

But thanks so much for all your help!

On 3/11/2021 at 6:37 PM, hnrytran said:

do you know if it will be removed eventually?

It can't speak for SS. It does seem like a bug! Given that I've seen like a dozen underline related posts today, I'm thinking that rushing now to fix something that may be resolved soon is wasted effort. Personally I'd live with it for a couple of days and then start thinking about fixing it if nothing changes.

It has been updated back to normal. Thank you so much! @creedon

I am having another problem with the text on the image blocks on the home page. Is there anyway I can keep the titles and button at the same location, no matter the size of the image block? And also my full width images would get super small and the text get overflown in mobile view. Is there anything I can do about that?

Here is the code I am using for the titles:

.design-layout-poster .image-card-wrapper  {
  padding: 2vw;
  
  }.design-layout-poster .image-card-wrapper .image-button  {
     padding-top: 15%;
  }

I also attached the screenshots of the mobile view.

Thank you so much!

@creedon

https://www.h-tran.com/case-studies-1

Also the link to the live site! 

@hnrytran

I don't have an answer for you at this time. Hopefully someone else can help you with this one.