Arrows design via UI or CSS for slider layout

Ask the Community Customization
1

Would be nice to be able to change the design of arrows, mainly background color.

1 Like
3

Hi there @A_a and welcome to the Community :wave:

Sure! I’ve shared your request with the devs and will let you know once they provide the code :slightly_smiling_face:

4

@A_a Thank you for waiting!

Please try to add this code to the Custom CSS field on the Style tab of your widget’s settings and let me know if it worked for you:

.global-styles,
[class*="ArrowControl__ArrowControlContainer-sc"] {
	fill: rgba(255, 0, 0, 0.8) !important;
	background-color: rgba(255, 255, 0, 0.8) !important;
	transition: background-color 0.3s ease !important;
}

.global-styles,
[class*="ArrowControl__ArrowControlContainer-sc"]:hover {
	background-color: rgba(255, 255, 0, 1) !important;
}

fill - changes arrow color

background-color in the 1st part of the code - changes arrow background color

background-color in the 2nd part of the code - changes arrow background color on hover

1 Like