Rounding corners of images in Slide Show?

RV03 · Post by **RV03** » Thu Dec 21, 2023 12:47 am

Hello,
I am using Tool Box > Slide Show > Type: Sequence

Is there a way to round the images in a slide show and not just the boarder?

They way it is now, I have rectangular images with hard edges inside a slide show with rounded edges.

If I set the slide show style > boarder > width to 2 with a 6 radius, the 90 degree image corners poke out behind the rounded boarder of the slide show. That, or they are confined within the rounded rectangle showing the page behind. (The corners hit the round edges first, so there is a gap on the sides.)

I've tried to nest the slide show within another layout grid with the boarder width set to 2 and radius 6, but the unrounded image corners still poke out.

I searched the forums for an answer but couldn't find anything. Apologies if I'm posting in the wrong place, or I was unable to find a post that would address this issue. Any feedback is greatly appreciated!! Thanks!

crispy68 · Post by **crispy68** » Thu Dec 21, 2023 1:20 am

Which version of WB are you using? If I set the border of the slideshow in WB19 as you stated, the images are also rounded. They do not stick out as you have suggested. I am not able to make it fail. Do you have a demo project to look at?

RV03 · Post by **RV03** » Thu Dec 21, 2023 1:45 am

Thank you for reaching out! I'm using 19.0.2

Here is a link to my project: https://drive.google.com/file/d/1OMZUoA ... sp=sharing

BaconFries · Post by **BaconFries** » Thu Dec 21, 2023 1:50 am

What version of the software are you using?. If you need help please share a demo project so that youru settings can be viewed.

Before sharing please read the how following how share a project file see this FAQ:
viewtopic.php?f=10&t=82134

crispy68 · Post by **crispy68** » Thu Dec 21, 2023 2:19 am

After looking at our demo to mine, I wasn't putting it into a grid. Just placed in the workspace it works.

However, when placed in a grid there is some different html. Outside a grid, the images are placed in a <div> where the border-radius inherits the border-radius of the slideshow. However, when it's placed in a gird, the images are placed within <li> tags inside a <div>. The images inherit the border-radius of the <li> tag which is square. The border-radius tag needs to be added to the <li> tag also. So unless Pablo decides to change this, the you would need to add some additional css like such between the <head> tags:

Code: Select all

<style>
#SlideShow1 li{border-radius:inherit;}
</style>

Change the ID above to match the ID of your slideshow.

Keep in mind this may not look good due to the fact the image is farther in than the border so it may make more sense to set the border of the image to something less:

Code: Select all

<style>
#Slideshow1 li{border-radius:10px;}
</style>

You would have to play with the px amount to get the look you want. For example, if i set the border-radius of the slideshow to 20px, setting the border-radius of the image to 10px to 12px looks better.

RV03 · Post by **RV03** » Thu Dec 21, 2023 2:37 am

Thank you so much for your feedback! I will try what you suggested. It's getting late where I am at. I'll come back fresh in the AM and give it a go!

I really appreciate your time!!!

www.wysiwygwebbuilder.com

Rounding corners of images in Slide Show?

Rounding corners of images in Slide Show?

Re: Rounding corners of images in Slide Show?

Re: Rounding corners of images in Slide Show?

Re: Rounding corners of images in Slide Show?

Re: Rounding corners of images in Slide Show?

Re: Rounding corners of images in Slide Show?