Classic Slider Arrows Background

[Almusan]

How can i put a circle instead of a square on the background of the arrows of a classic slider ?

[Prasant]

Hello Almusan,

Thanks for reaching out.

Please add following CSS under Pro > Theme Options > CSS:

.flex-direction-nav a {
    border-radius: 20px;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[Almusan]

it looks like an egg I need it like a circle

Also i need it without transparency

[friech]

Hi Almusan,

Please update the given code to this:

.flex-direction-nav a.flex-next,
.flex-direction-nav a.flex-prev {
    background-color: red;
    border-radius: 100em;
    padding: 5px 5px;
    width: 40px;
    height: 40px;
}

Feel free to change the red with the background color you desire.
You might need to adjust the width and height to give the circle a proper height, and the padding to center the arrows.

Hope it helps,
Cheers!