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

Rounding image corners


Peterotoole

Question

  • Answers 52
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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.

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

Posted Images

Recommended Posts

  • 0

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

Screen Shot 2021-05-06 at 12.11.17 pm.png

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

Link to post
  • 0
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?

Link to post
  • 0

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

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

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

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

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

Link to post
  • 0
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?

Link to post
  • 0

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

1995567297_ScreenShot2021-05-09at3_39_11PM.png.264f707e1762eb2e0fc4c41018198d1b.png1238509466_ScreenShot2021-05-09at3_39_19PM.png.b02b910c3f2881ebc1d9407ea069d302.png

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

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

1995567297_ScreenShot2021-05-09at3_39_11PM.png.264f707e1762eb2e0fc4c41018198d1b.png1238509466_ScreenShot2021-05-09at3_39_19PM.png.b02b910c3f2881ebc1d9407ea069d302.png

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.

Link to post
  • 0
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?

Link to post
  • 0

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

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

Link to post
  • 0

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

image.thumb.png.50d0e223ffd712b7aedce85bb2aa11d9.png

Link to post
  • 0

@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;  }
 }

Link to post
  • 0

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

 

image.thumb.png.6a6b1f7509f73631561b1dda554adbf8.png

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...