Rounding image corners

On 12/10/2021 at 6:03 PM, MoonMama said:

Can you help to get the thumbnails on the side of the photo?

Edit the design of a product and change the Gallery Thumbnail Placement to side.

On 12/10/2021 at 6:03 PM, MoonMama said:

Also to remove the arrows?

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>
  
  .tweak-product-basic-item-gallery-design-slideshow .ProductItem-gallery-carousel-controls {
  
    display : none;
    
    }
    
  </style>

Let us know how it goes.
 

19 hours ago, creedon said:

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>
  
  .tweak-product-basic-item-gallery-design-slideshow .ProductItem-gallery-carousel-controls {
  
    display : none;
    
    }
    
  </style>

Let us know how it goes.
 

Perfect thank you for all your help!

Hi @creedon, I copied your code for the rounded corners, it works amazing, maybe too well 😛
Is there a way to add an exception to the side header logo, please?

website: pug-clarinet-kly3.squarespace.com

pass: 1234

THANK YOU!!

2 hours ago, plan-a said:

I copied your code for the rounded corners, it works amazing, maybe too well 😛

Done!

I have updated my cited code in my March 11, 2021 post earlier in this thread.

Thank you for reporting that bug!

Let us know how it goes.

14 hours ago, creedon said:

Done!

I have updated my cited code in my March 11, 2021 post earlier in this thread.

Thank you for reporting that bug!

Let us know how it goes.

YES, amazing, thanks you 🙂

I have updated my cited code in my March 11, 2021 post earlier in this thread.

The code now uses LESS's Parametric Mixins feature to be able to turn on and off some of which images get rounded corners.

@creedonHow can I round all my blog thumbnails corners at once?

1 minute ago, HunterD said:

How can I round all my blog thumbnails corners at once?

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 does not allow anyone to alter your site. It only allows those with the password to see your site. 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.

50 minutes ago, creedon said:

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 does not allow anyone to alter your site. It only allows those with the password to see your site. 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.

@creedonSure, here's the site: https://www.mashaborak.com/work - Thanks!

@creedon Also, how can I add this decoration to my text? For a text box, or just for some word. Thank you so much!

1 hour ago, HunterD said:

@creedonHow can I round all my blog thumbnails corners at once?

Never mind, I found the answer in another post. Thanks! Just the text decoration I can't find.

1 hour ago, HunterD said:

Sure, here's the site

Install my cited code mentioned earlier in this thread then in the code set most of the areas to false, leave .blog-list set to true.

Let us know how it goes.

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

hi there, Most of this worked great on this Brine site https://www.handyhaynets.com/allproducts with the exception of those shop items. Could you help? I'd like to include these for design continuity. I tried myself using inspect but couldn't target all the right classes.

On 6/11/2022 at 4:14 AM, jaisequoia said:

hi there, Most of this worked great on this Brine site https://www.handyhaynets.com/allproducts with the exception of those shop items. Could you help? I'd like to include these for design continuity. I tried myself using inspect but couldn't target all the right classes.

Try this CSS

figure.ProductList-outerImageWrapper {
    border-radius: 20px;
}

9 hours ago, tuanphan said:

Try this CSS

figure.ProductList-outerImageWrapper {
    border-radius: 20px;
}

 

Tuan you rock as always! Worked perfectly thank you. I have a bit more to learn about finding appropriate classes on things. 🙂 

13 hours ago, tuanphan said:

Try this CSS

figure.ProductList-outerImageWrapper {
    border-radius: 20px;
}

 

Actually @tuanphan 
I can see now the only thing missing is rounding the suggested products on product pages? Can you help with that one too please? 

11 hours ago, jaisequoia said:

Actually @tuanphan 
I can see now the only thing missing is rounding the suggested products on product pages? Can you help with that one too please? 

Use this new code

figure.ProductList-outerImageWrapper, .ProductItem-relatedProducts-innerImageWrapper {
    border-radius: 20px;
}

Hello @creedon, I have tried your updated code on in the Design > CSS section on a website here:

https://neonrodeo.squarespace.com/

pass: neonrodeo

But it's not rounding the corners of images inserted in the design on the home page. Can you help?

26 minutes ago, djsend said:

But it's not rounding the corners of images inserted in the design on the home page.

It appears you've not set the four variables near the top of the code.

  @border-color : red;
  @border-radius : 25px;
  @border-style : solid;
  @border-width : 2px;

You can of course set the values to meet your needs.

Let us know how it goes.

I have updated my cited code in my March 11, 2021 post earlier in this thread. The following issues were addressed.

  * fix summary block image border
  * add support for product blocks
  * add support for fluid engine

Let me know how it goes.

I found this thread from a few years ago and it's been very helpful. I've added @creedon's code (see below):

// 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

}

Thank you for that @creedon, that code has done a great job and rounded the corners perfectly everywhere except for on our page we've added our Instagram feed images to. On that page some images have rounded corners and some don't. The images without rounded corners are video posts, however there are also some video posts with rounded corners, so I'm a bit stumped. Here's a screenshot from this page - https://www.terratag.com.au/visuals:

If anyone has any suggestions to get the square corners rounded that'd be much appreciated. I did try the site wide image borders however that left even more images without rounded corners. 

Thanks all. 🙂 

7 hours ago, Terratag said:

I did try the site wide image borders however that left even more images without rounded corners.

The site wide image borders code evolved out of my other, older, code. The older code was a ham-fisted approach before I had a better handle on some of the subtleties of putting borders around images.

First not all images can have borders around them because of how the HTML is structured or other factors.

My site wide code does have holes in it and will always have them. Others may be just because I'd not run into that particular element and have not written code for it.

The Intragram issue you are having is because of how my old code handles borders. Targeting the img element is not adequate.

Here we can see a working image border.

Noticed the dimmed image. It is square and fits in its slot.

Here is an image where the border doesn't work.

Notice how the dimmed image is outside it's slot. This is something SS does. This is why the border appears not to be there. It is but outside the slot so can't be seen.

These types of issues are what my site wide code attempts to address. Instead of ham-fistedly targeting the image element everywhere I attempt to target elements like the slot so that a border gets applied.

In my site wide code I list the know areas where the code won't work.

If there are elements were the code is not working I'm willing to either update my code or add new CSS to address elements I may be missing. I would need to know what those elements are. A link to a URL and pointer to the element would be useful.

Thank you so much for your help @creedon I was able to fix the remaining rounded corners with the below custom CSS I found on a different thread. I've removed the section ID number from between the quotes:

section[data-section-id=""] .sqs-video-wrapper .sqs-video-overlay {
    border-radius: 12px;
}
section[data-section-id=""] .sqs-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor img {
    border-radius: 12px;
}

Have a great day. 🙂

@creedon Hello! I used your code to round the corners of my portfolio grid and that worked fine! I am using a hover overlay, which does not round with the code. So, when I hover over the image the overlay is still sharp. Any suggestions?