Jump to content

Add rounded corners and outline to Gallery Slideshow

Go to solution Solved by Lesum,

Recommended Posts

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

Link to comment
  • Solution

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

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

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

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
  • 2 weeks later...
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? 

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 

Edited by Square-Spacer
Typo
Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 months later...

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.