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: Asia/Hong_Kong (GMT+08:00)
Hi all,
1. I am referring to support ticket https://toolset.com/forums/topic/change-dimensions-of-image-slider-on-block-editor/
Waquar suggested the following CSS that is supposed to force the image to fit the slider's height even though it won't always cover the available space:
.tb-image-slider--crop .glide__slide img {
-o-object-fit: contain;
object-fit: contain;
height: 400px !important;
}
I placed the code in the Customizer and it didn't have any effect.
2. So I also tried other CSS changes related to the slider like changing the handles shape and this doesn't have any effect too.
.tb-image-slider .glide__arrow {
border-radius:8px;
}
My code is actually added to the CSS of the page, but it doesn't repace the original selector and is then deactivated (see attachment).
I supposed it was a cache issue but other changes on the same page have immediate effect so that cannot be. What am I missing ?
3. I also see that the handles are actually small SVGs from some library, is there a way to change those ? how ?
Thanks
Best Regards
Nicola
Q1) Please try to modify your custom CSS codes to:
.tb-image-slider--crop .glide__slide img {
-o-object-fit: cover;
object-fit: cover;
height: 400px !important;
}
It needs to setup a static value
It works fine in my chrome browser browser, see my screenshot fixed-height.jpg, I am not sure where you put your previous CSS codes, you can put the custom CSS codes into view block, see Q2)
Q2) I have tried the same CSS codes by putting into the view block directly, see my screenshot border-radius.jpg, it works fine in frontend:
hidden link
Q3) That icon CSS codes is defined by blow CSS codes, you can setup CSS codes to override it's background image settings:
.tb-image-slider .glide__arrow--left span.tb-slider-left-arrow {
display: inline-block;
width: 25px;
height: 25px;
background-image: url(data:image/svg+xml,%3Csvg xmlns='<em><u>hidden link</u></em>' viewBox='0 0 129 129' width='25' height='25'%3E%3Cg%3E%3Cpath d='m70,93.5c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2 1.6-1.6 1.6-4.2 0-5.8l-23.5-23.5 23.5-23.5c1.6-1.6 1.6-4.2 0-5.8s-4.2-1.6-5.8,0l-26.4,26.4c-0.8,0.8-1.2,1.8-1.2,2.9s0.4,2.1 1.2,2.9l26.4,26.4z' fill='%23666'/%3E%3C/g%3E%3C/svg%3E);
}
.tb-image-slider .glide__arrow--right span.tb-slider-right-arrow {
display: inline-block;
width: 25px;
height: 25px;
background-image: url(data:image/svg+xml,%3Csvg xmlns='<em><u>hidden link</u></em>' viewBox='0 0 129 129' width='25' height='25'%3E%3Cg%3E%3Cpath d='m51.1,93.5c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l26.4-26.4c0.8-0.8 1.2-1.8 1.2-2.9 0-1.1-0.4-2.1-1.2-2.9l-26.4-26.4c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l23.5,23.5-23.5,23.5c-1.6,1.6-1.6,4.2 0,5.8z' fill='%23666'/%3E%3C/g%3E%3C/svg%3E);
}
