BLACK FRIDAY SALE 40% OFF on new purchases, early renewals, or upgrades. Click here to apply Discount
- Home
- Knowledge Base
- Custom CSS Customizations
- Customizing Slider Dots and Arrows Colors
Customizing Slider Dots and Arrows Colors
You can personalize Modula Slider by changing the colors of the slider dots and navigation arrows. This guide provides simple CSS code snippets to help you achieve the desired color adjustments for both elements.
Customizing Slider Dots:
If you want to change the color of the slider dots, use the following CSS code:
.slick-dots li button::before {
border: 2px solid white !important;
}
This code modifies the border color of the dots. You can replace ‘white’ with your preferred color.
Customizing Slider Arrows:
To alter the color of the navigation arrows, apply the following CSS code:
.modula-slider .modula-items .slick-next, .modula-slider .modula-items .slick-prev, .modula-slider .modula-slider-nav .slick-next, .modula-slider .modula-slider-nav .slick-prev {
color: white !important;
}
This code ensures that the arrows are displayed in the specified color. Replace ‘white’ with the color of your choice.
With these CSS code snippets, you can easily customize the slider dots and arrow colors to match your website’s design or branding.
About The Author

Mihaela has a strong affinity for literature - from the classical to the contemporary, she finds great solace in the written word. She is a dog enthusiast and has a particular fondness for spending time with her furry friends.