Customize formatting of dot indicators in slider pagination element

Hello,
I would like to change the appearance of the list dots in the slider pagination element, so that:

  • the dots have a border when inactive
  • the dots have transparent fill when inactive
  • the dots have a different color border on hover
  • the dots are no longer transparent on hover.
    I cannot find any reference to this in the themeco docs, and have been unsuccessful in implementing custom css. Your help is appreciated!

Hello @fevcap,

Thanks for writing to us.

In order to format the pagination dots please add this custom CSS code on the pagination element —>Customize —>Element CSS.

/* pagination hover */
$el.x-slide-pagination li:hover {
    border: 2px solid #ffeb3b;
    background-color: #ffc107;
}
/* pagination inactive */

$el.x-slide-pagination li {
    border: 2px solid #2196f3;
    background-color: transparent;
}
/* pagination active */

$el.x-slide-pagination li.is-active {
    border: 2px solid #ffc107;
    background-color: #ffc107;
} 

Please feel free to change the color code as per your design. The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case if you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

Perfect! Thank you so much for your help, it is working perfectly.

Hello @fevcap,

Glad that we were able to help you. Please feel free to open a new thread if you have any more concerns.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.