You can personalize the 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, add the following CSS code in your WordPress dashboard > Appearance > Customize > Additional CSS.
.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 in your WordPress dashboard > Appearance > Customize > Additional CSS.
.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.
