0
Under review

How do you change the colors of the arrows and the slide dots in a slider?

chrisgeorgev 3 years ago updated 3 years ago 2

I saw a similar thread but I want the arrows to be green (not a green background).  I would also want the slide dots to be red. Is this possible?

Under review

For the Normal Slider, there really isn't a way to do that. You could replace this file with the color png that you choose.

wp-content/plugins/wp-review-slider-pro/public/css/imgs/slider_arrow.png

The slide dots are a little easier. Just add this to the custom CSS for the slider.

.wprs_unslider-nav ol li {
border: 1px solid #cc1818;
}

.wprs_unslider-nav ol li.wprs_unslider-active {
background: #cc181885;
}

The Advanced Slider is also pretty difficult. It uses a special font to display the arrow so there really isn't an easy way to do it.

You can change the dots like so...

.slickwprev-dots li button:before {
color: red;
}

.slickwprev-dots li.slickwprev-active button:before {
color: red;
}

Thanks... I ended up figuring it out, and used this:

.slickwprev-next:before, .slickwprev-prev:before {
color: green;
opacity: 1.0;
}

.slickwprev-dots li button:before {
color: red;
opacity: 1.0;
}

.slickwprev-dots li.slickwprev-active button:before {
color: #6b998c;
opacity: 1.0;
}