Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Rounding image corners


Peterotoole

Question

Recommended Posts

  • 1
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 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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 1
Posted (edited)

@Millok

Probably need to turn off the default overlay setting.

Please post the URL for the page of the image you posted from 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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
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.

Edited by creedon
version 3 of CSS

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
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!!

 

 

Link to comment
  • 0

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
}
Edited by Corizona
Link to comment
  • 0
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!

Link to comment
  • 0

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 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!

Link to comment
  • 0

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

@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.

827327070_ScreenShot2021-03-11at6_31_29PM.thumb.png.c95138856e5e61a19e7246b21563d29b.png

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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!

Screen Shot 2021-03-15 at 4.50.23 PM.png

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...