Add rounded corners and outline to Gallery Slideshow

Hi! Trying to added rounded corners and an outline to a couple of gallery slideshow blocks on one page of my website to make the images feel more cohesive with the design of the site. The corners and outline would be similar to the text card overlaid on top of these three galleries

PAGE: https://www.poster-child.com/festivals

Blocks: stage designs, festival merch, website/app/etc

This is my first time asking a question so let me know if you need more info from me!

Thanks so much

@Lesum thank you!!! worked like a charm, thanks for the speedy solution!

@Lesum by chance could you also help me... I'd like to make all these arrows opaque instead of transparent and then opaque on hover. Got any tips? Thanks so much!

@posterchild Sure, you can add this code snippet:

.user-items-list-carousel__arrow-icon-background-area {
    opacity: 1 !important;
}
.user-items-list-carousel__arrow-icon-background-area:hover {
    opacity: 0.7 !important;
}

On 9/17/2023 at 6:53 PM, Lesum said:

@posterchild You can add this code snippet within the Custom CSS panel: 

.sqs-gallery-design-stacked-slide {
    border-radius: 10px !important;
    border: 1px solid #000 !important;
}

I replicated the rounded corners and outline to match the text blocks of stage designs, festival merchandise, websites, apps, etc. You can make changes in the code to match your design.

Hi, I tried this code on my website and it works for my homepage, but not for the https://thenooksrilanka.squarespace.com/stay page (pw is nook). I tried to add the collection and section components, and it will work for the border, but the corners just won't become round (there's literally a rectangle image inside a rounded border). Any clue what this can be? 

On 9/26/2023 at 9:55 AM, charlineca said:

Hi, I tried this code on my website and it works for my homepage, but not for the https://thenooksrilanka.squarespace.com/stay page (pw is nook). I tried to add the collection and section components, and it will work for the border, but the corners just won't become round (there's literally a rectangle image inside a rounded border). Any clue what this can be? 

Can you check password again? It is incorrect

then we can help easier

On 9/26/2023 at 3:55 AM, charlineca said:

Hi, I tried this code on my website and it works for my homepage, but not for the https://thenooksrilanka.squarespace.com/stay page (pw is nook). I tried to add the collection and section components, and it will work for the border, but the corners just won't become round (there's literally a rectangle image inside a rounded border). Any clue what this can be? 

Hey, I had the same issue as you when attempting to use the code, the reasons appear to be that it adds a border and then rounds it off. To correct it you can increase the width of the border, but this forces the gallery off centre which wasn't what I wanted.

After playing around with the code a bit I found the following solution:

.sqs-gallery-design-stacked-slide img {
    border-radius: 10px !important;
}
.sqs-gallery-block-slideshow .slide.loaded .meta {
	border-radius: 10px !important;
}

I was using image titles and descriptions in some of my galleries as well, so I added the additional snippet to the bottom to round off the transparent layer that's generated around the text.

Unfortunately there appears to be a very, very faint transparent outline where the corners are that I couldn't figure out how to remove. 

On 10/4/2023 at 7:53 PM, Square-Spacer said:

Hey, I had the same issue as you when attempting to use the code, the reasons appear to be that it adds a border and then rounds it off. To correct it you can increase the width of the border, but this forces the gallery off centre which wasn't what I wanted.

After playing around with the code a bit I found the following solution:

.sqs-gallery-design-stacked-slide img {
    border-radius: 10px !important;
}
.sqs-gallery-block-slideshow .slide.loaded .meta {
	border-radius: 10px !important;
}

I was using image titles and descriptions in some of my galleries as well, so I added the additional snippet to the bottom to round off the transparent layer that's generated around the text.

Unfortunately there appears to be a very, very faint transparent outline where the corners are that I couldn't figure out how to remove. 

Can you share link to page where you have problem?

did we ever figure out how to remove the ghosted square edges in the background to this?

Hi, I'm running into the same problem and haven't had success with any of the code posted in this thread. I want to make each image in the banner slideshow have rounded corners.

Under 'Program Areas' https://www.esperanzacommunityhousing.org/

This is the code I'm using:

.sqs-gallery-design-stacked-slide img {
    border-radius: 12x !important;
}
.sqs-gallery-block-slideshow .slide.loaded .meta {
	border-radius: 12px !important;
}

On 6/20/2024 at 3:50 AM, ForestFern said:

Hi, I'm running into the same problem and haven't had success with any of the code posted in this thread. I want to make each image in the banner slideshow have rounded corners.

Under 'Program Areas' https://www.esperanzacommunityhousing.org/

This is the code I'm using:

.sqs-gallery-design-stacked-slide img {
    border-radius: 12x !important;
}
.sqs-gallery-block-slideshow .slide.loaded .meta {
	border-radius: 12px !important;
}

 

You can use this CSS code

section[data-section-id="66243a793a84b06cbf18a23c"] .slide-media-container {
    border-radius: 30px;
}

That worked great! Thanks as always!

Hi, I'm running into this problem again, with a simple gallery grid. Here's the code I've tried:

.sqs-gallery-grid-item img {
  border-radius: 12px !important;
}
  .sqs-gallery-block-grid .slide.sqs-gallery-design-grid-slide {
	border-radius: 12px !important;
}

The site is ianlane.pro, no password. I'm trying to round the corners of the gallery under "About Coach Ian."

14 hours ago, ForestFern said:

Hi, I'm running into this problem again, with a simple gallery grid. Here's the code I've tried:

.sqs-gallery-grid-item img {
  border-radius: 12px !important;
}
  .sqs-gallery-block-grid .slide.sqs-gallery-design-grid-slide {
	border-radius: 12px !important;
}

The site is ianlane.pro, no password. I'm trying to round the corners of the gallery under "About Coach Ian."

Use this CSS code

div#block-yui_3_17_2_1_1725477114222_41029 .slide .content-fill {
    border-radius: 12px;
}

Amazing!!! Thank you as always @tuanphan! Much appreciated!

Hi! I'd like to round the corners of a masonry gallery and also my blog feature images. Can you show me where you got the div block above in case I need to recreate this in the future? 

https://tapestrymind.squarespace.com/

https://tapestrymind.squarespace.com/inspirations
 

15 hours ago, leighmaneri said:

Hi! I'd like to round the corners of a masonry gallery and also my blog feature images. Can you show me where you got the div block above in case I need to recreate this in the future? 

https://tapestrymind.squarespace.com/

https://tapestrymind.squarespace.com/inspirations
 

You can use this CSS code

figure.gallery-masonry-item img {
    border-radius: 30px;
}