Add padding and border around images presented on Image Slider block

This thread is resolved. Here is a description of the problem and solution.

Problem:
The user would like to customize the styles of the images inside a slider block.

Solution:
You can customize it using custom CSS code inside of the content template or the view. Check this reply https://toolset.com/forums/topic/add-padding-and-border-around-images-presented-on-image-slider-block/#post-2039933

This support ticket is created 4 years ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-	-	9:00 – 13:00
14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-	-	14:00 – 18:00

Supporter timezone: Africa/Casablanca (GMT+01:00)

This topic contains 2 replies, has 2 voices.

Last updated by nadavL 4 years ago.

Assisted by: Jamal.

Author

Posts

May 1, 2021 at 2:12 pm #2039097

nadavL

Hi,

I've added the Image Slider block and I'm unable to add a space\gap between the main large image to the thumbnail row below.
In addition, I would like to try adding a border to all images. The large one and the thumbnails.

You can see a sample page here: hidden link

May 2, 2021 at 4:49 pm #2039933

Jamal

Hello and thank you for contacting the Toolset support.

You can use custom CSS or Javascript to modify the styles of the main images and the thumbnails row. The main image is wrapped inside a glid__view class, and the thumbnails inside a glid__track class.

Add the following CSS code to your content template:

.glide__view{
    margin-bottom: 3px;
}

You can target the main image with:

.glide__view img {
    border-radius: 20px;
}

And the thumbnails with:

.glide__track img {
    border-radius: 10px;
}

I hope this helps. Let me know if you have any questions.

May 3, 2021 at 12:24 pm #2040923

nadavL

My issue is resolved now. Thank you!