Hi there

You can use custom css feature. Have you tried it first?

Thank you

I tried, but I’m not sure what code to use.

I tried several code additions in this snippet but nothing changed…

/**
* sangar-pagination-type-image
*/
[ss-id] ul.sangar-pagination-type-image > li.sangar-pagination-active {
background: none;
}

[ss-id] ul.sangar-pagination-type-image > li.sangar-pagination-active > div:before {
border: 2px solid #fff;
}

[ss-id] ul.sangar-pagination-type-image > li:hover {
background: none;
}

Hi

Can I see your website? So I can help you with custom CSS 🙂

Thank you

Hi there, please try these css :

.sangar-slideshow-container .sangar-pagination-wrapper.wrapper-content-horizontal {

    height: 100px !important;

}

.sangar-slideshow-container .sangar-wrapper .sangar-pagination-type-image > li.sangar-pagination-active > div {

    height: 100px !important;

    width: 100px !important;

}

Please change number "100px" with anything you want 🙂

Hope it helps

Thank you

Can I use a percentage? I really want them to be evenly spaced across the container.

I’d also like to take the layer of opacity off the inactive thumnbails. How do I do that?

Thank you!

Yes, you can use percentage instead 🙂

And for opacity, you can use this CSS :

.sangar-slideshow-container .sangar-wrapper .sangar-pagination-type-image > li.sangar-slideshow-nav-pagination > div {

    opacity: 1 !important;

}

Hope it helps

Thank you

The opacity worked great!

I’m still having issues with the size of the thumbnails. I’ve linked to a screenshot of what I want it to look like. If you can help me with the css that would be great. Like I mentioned before I would like to use percentages instead of pixels so the dimensions stay the same when the screen size gets smaller.

Thank you,

Jeremy B.

Hi Jeremy!

Please try these codes :

.sangar-slideshow-container .sangar-pagination-wrapper ul.sangar-pagination-content-horizontal {

    width: 100% !important;

}

.sangar-slider-136.sangar-slideshow-container ul.sangar-pagination-type-image > li.sangar-pagination-active {

    width: 24.5% !important;

}
.sangar-slideshow-container .sangar-wrapper ul.sangar-pagination-type-image > li {

    width: 24.5% !important;

}
.sangar-slideshow-container .sangar-wrapper .sangar-pagination-type-image > li.sangar-pagination-active > div {

    width: 100% !important;

}

Hope it’s what you expected 🙂

Thank you