Rounding image corners

This worked a treat, however I have a faint grey overlay after applying the code? Would greatly appreciate any assistance for this! Thank you! 

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

3 hours ago, creedon said:

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

The site is www.ec-dp.com and it's just on the home page there. 

@Millok

Add the following to Design > Custom CSS.

.sqs-gallery-block-slideshow {

  background-color : unset;
  
  }

This is for v7.0 using the Brine template family.

Let us know how it goes.

On 10/20/2020 at 5:49 PM, creedon said:

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

 

I am trying this code on my site to make my product photos rounded corners.  It did make them rounded, but if you hover over an image you can see it switch back to hard corners and then back again to rounded.  Can you help?

@Jrich58

Please post the URL for the page your site where you want rounded corners.

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.

1 hour ago, creedon said:

@Jrich58

Please post the URL for the page your site where you want rounded corners.

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.

thank you!  https://www.redlinedesigns.org/shop

temp password is tyKryf-potgyh-rezro3

7 hours ago, creedon said:

@Millok

Add the following to Design > Custom CSS.

.sqs-gallery-block-slideshow {

  background-color : unset;
  
  }

This is for v7.0 using the Brine template family.

Let us know how it goes.

INCREDIBLE! Worked like a charm. Thank you SO very much, greatly appreciated. 

On 5/6/2021 at 7:05 PM, Millok said:

INCREDIBLE! Worked like a charm. Thank you SO very much, greatly appreciated. 

Wish it worked on my phots that switch?  When the pics change, so does the border from square to round and its slow and noticeable, ugh!

@Jrich58

Are you trying to round all the corners of images on your site and the current code just doesn't cover the hovered image state?

Or are you just wanting to round the corners on your product grid images in both hovered and un-hovered states?

1 hour ago, creedon said:

@Jrich58

Are you trying to round all the corners of images on your site and the current code just doesn't cover the hovered image state?

Or are you just wanting to round the corners on your product grid images in both hovered and un-hovered states?

Actually both I guess.  Id like all photos rounded which it does, except when one block has a photo that switches when hovering....then you can see the square shape and watch it turn into rounded...so it doesn't look great.  Possible to stop it from doing that when hovering over?

@Jrich58

Got ya. I was just trying to figure out if I should try to update my previous code or make some new code.

I'll look into updating my code.

@Jrich58

It appears you solved the issue?

19 hours ago, creedon said:

@Jrich58

It appears you solved the issue?

No it still does it when hovering.  Any idea on how to fix?

@Jrich58

I'm confused. I can see that the store product grid page is rounding both images. And there is code installed on your site to do it.

.products .grid-image-wrapper,.image-block-wrapper,.ProductItem-gallery-slides-item.selected,.sqs-gallery-design-grid-slide .image-slide-anchor {
    border-radius: 13px
}

The following screenshots just taken from your site.

21 minutes ago, creedon said:

@Jrich58

I'm confused. I can see that the store product grid page is rounding both images. And there is code installed on your site to do it.

.products .grid-image-wrapper,.image-block-wrapper,.ProductItem-gallery-slides-item.selected,.sqs-gallery-design-grid-slide .image-slide-anchor {
    border-radius: 13px
}

The following screenshots just taken from your site.

Yes it does look like that, until I hover over it and the image changes, then the new image is square and changes to rounded and you visually watch it happen.  It keeps doing this for all images in my shop that change when hovering.

@Jrich58

The second image I posted is the hovered image and it has rounded corners. That is what I'm seeing both images rounded.

When you are looking at the images are you in Preview (editing mode)? Have you looked at your shop in Full Preview or Private Browsing?

21 hours ago, creedon said:

@Jrich58

The second image I posted is the hovered image and it has rounded corners. That is what I'm seeing both images rounded.

When you are looking at the images are you in Preview (editing mode)? Have you looked at your shop in Full Preview or Private Browsing?

Yeah Ive done both as far as viewing.  I do see they are both rounded, but when you first hover you see the square edges of the second photo, then it switches to rounded.  Looks horrible.  I don't want to be able to see it switch....possible?

@Jrich58

If I could see the square I'd be happy to see if there is a fix. I'm just not seeing any square anywhere. So I'll step back and perhaps someone else can give you a hand.

@creedon is there a way to round background images too?

@brianbyrne7

Please post the URL for a page with a background image on your site you want rounded corners. I don't know if it can be done.

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 sure, my website is public - www.meshsecurity.io

As an example, on this page, the red banner towards the bottom I want to change to something larger, like the image I've attached.  https://www.meshsecurity.io/ransomware

This is a background image and ideally I'd like to round it. I know I could round the image before uploading, but I'm actually finding it difficult to find a rounded shape that I can add a gradient to in Canva - so that doesn't seem like an option.

Appreciate the help 🙂

@brianbyrne7

I have updated my Mar. 11th code post. Change the line .section-background ( false ); to .section-background ( true ); for background image rounding.

Let us know how it goes.

@creedon Thanks. I suspect I'm doing something wrong - this is what I'm pasting and nothing is changing

 // section background
  
  .section-background ( @section-background ) when ( @section-background = true ) {
  
    .has-background .section-background {
    
      border-radius : @site-wide-image-radius;  }
 }

@brianbyrne7

Please paste all the code in my Mar 11th post. You've only pasted part of the code.

If you installed the code previously you'll need to remove that old code. Make a copy somewhere for safe keeping.