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

Rounding image corners


Peterotoole

Question

Recommended Posts

  • 0

@brianbyrne7

Here is what is happening. SS apparently uses whatever background color is set for the Lightest 1 theme as the background color behind sections with background image. Of course normally that isn't a problem because SS doesn't do rounded corners. And you can't blame SS as they didn't intend or account for rounded corners.

So you have two options. Change the background color for Lightest 1. Weather that will work in your situation only you can decide.

The other option is use some CSS.

:not( .has-background ) .section-background {

  background-color : white;
  
  }

Let us know how it goes.

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/12/2021 at 10:10 AM, creedon said:

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.

Hi,

This worked well for me! Now how do I add a thin black border around it? I tried another ccs and the line didn't wrap around the border. 

I'm still on a trial site to see if this works.

Thanks

Link to comment
  • 0

@ch_url

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 is not a security breach. 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.

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

Link to comment
  • 0
9 hours ago, creedon said:

@ch_url

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 is not a security breach. 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.

Hi,
The url is https://chipmunk-ruby-kctr.squarespace.com/shop and the password is: password

Also can you help me -- how do I reduce the width of the sidebar of categories? Ive attached a photo.

Thank you

Screen Shot 2021-09-05 at 12.17.16 PM.png

Link to comment
  • 0

@creedon
Posting here as it's relevant to this post's question 🙂

I tried the code you wrote up there - it works like a charm!  However it turns all images into rounded corners. Is there anyway to turn just the pictures in specific sections into rounded corners on a specific page, but not others? E.g. on https://www.mikagu.me/work/instalment-only-card, I'd like to have round corners on only the phone mockups but not others. 

Really appreicate your help, creedon!!

Link to comment
  • 0
5 hours ago, stawberryey said:

Is there anyway to turn just the pictures in specific sections into rounded corners on a specific page, but not others?

It is possible to target more specific elements of the page. Can you isolate phone mockups into page sections of their own? When I say isolate, not have any other non-mock up images that you don't want to get rounded corners in the same sections. Text and other elements is fine of course. Isolating the mockups in this way would allow for us to target CSS to those specific sections.

The other more tedious way would be to target specific image blocks.

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

Link to comment
  • 0
15 hours ago, creedon said:

It is possible to target more specific elements of the page. Can you isolate phone mockups into page sections of their own? When I say isolate, not have any other non-mock up images that you don't want to get rounded corners in the same sections. Text and other elements is fine of course. Isolating the mockups in this way would allow for us to target CSS to those specific sections.

The other more tedious way would be to target specific image blocks.

Thanks so much for your reponse Creedon!

Hmm I tried adding new section but the padding on top and bottom is too wide that it looks disconnected with the rest of the article (https://www.mikagu.me/work/instalment-only-card). I am trying to round the corners of the two gifs in the "Designing for trust and confidence" section, mainly bc i thought rebuilding gifs would take much more time than coding it in squarespace. 

is there a way to target specific image blocks?

Link to comment
  • 0
1 hour ago, stawberryey said:

is there a way to target specific image blocks?

Add the following to Design > Custom CSS.

/*

  begin images blocks round some image corners
  
  Version       : 0.1d0
  
  SS Version    : 7.1
  
  Dependancies  : LESS
  
  Notes         : this is a snippet of code adapted from Site Wide Rounded Image
                  Corners < https://bit.ly/3tlUQ4x >, < https://bit.ly/3l0zqWV >
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  @site-wide-image-radius : 25px;
  
  // for the following selectors each line ends with a comma except the last
  
  #block-yui_3_17_2_1_1630864230979_26348,
  #block-yui_3_17_2_1_1630864230979_33943
  
    {
    
      .intrinsic {
      
        .image-block-wrapper, // inline
        .image-inset // card, collage, overlap, poster, stack
        
          {
          
            border-radius : @site-wide-image-radius;
            z-index : 1;
            
            }
            
        .image-overlay {
        
          border-radius : @site-wide-image-radius;
          
          }
        }
        
      }
      
  // end round some images blocks

This is for a v7.1 site.

I have started you off with a couple of block ids. To find the others check out Heather Tovey's most excellent looking Squarespace ID Finder.

Let us know how it goes.

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 9/6/2021 at 12:26 PM, creedon said:

Add the following to Design > Custom CSS.

/*

  begin images blocks round some image corners
  
  Version       : 0.1d0
  
  SS Version    : 7.1
  
  Dependancies  : LESS
  
  Notes         : this is a snippet of code adapted from Site Wide Rounded Image
                  Corners < https://bit.ly/3tlUQ4x >, < https://bit.ly/3l0zqWV >
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  @site-wide-image-radius : 25px;
  
  // for the following selectors each line ends with a comma except the last
  
  #block-yui_3_17_2_1_1630864230979_26348,
  #block-yui_3_17_2_1_1630864230979_33943
  
    {
    
      .intrinsic {
      
        .image-block-wrapper, // inline
        .image-inset // card, collage, overlap, poster, stack
        
          {
          
            border-radius : @site-wide-image-radius;
            z-index : 1;
            
            }
            
        .image-overlay {
        
          border-radius : @site-wide-image-radius;
          
          }
        }
        
      }
      
  // end round some images blocks

This is for a v7.1 site.

I have started you off with a couple of block ids. To find the others check out Heather Tovey's most excellent looking Squarespace ID Finder.

Let us know how it goes.

Perfect - this is so clear and worked like a charm. Thanks so much Creedon!

Link to comment
  • 0

@ch_url

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  .products.collection-content-wrapper .grid-image-wrapper {
  
    border : solid thin;
    
    }
    
  </style>

This is for a v7.1 site.

Let us know how it goes.

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

Link to comment
  • 0
13 hours ago, creedon said:

@ch_url

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  .products.collection-content-wrapper .grid-image-wrapper {
  
    border : solid thin;
    
    }
    
  </style>

This is for a v7.1 site.

Let us know how it goes.

Looks great!! Thank you very much.

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