Can I Change The Color/Darken the previous/next arrows?

[Patrice Williams]

When using slides in the hero section, the < and > buttons are real light – hard to see. Where can I edit the color for those controls? What is it called?

Thanks so much.

[Bill Robbins]

You can change those. Here’s how:

1. Go to the Theme Options page and select the Advanced tab.
2. Scroll down to the Custom CSS box and paste this:

   
   a.flex-next,
   a.flex-prev {
   	opacity: .1;
   	color: #ffffff;
   }
   
   .flexslider:hover a.flex-next,
   .flexslider:hover a.flex-prev,
   .flexslider:active a.flex-next,
   .flexslider:active a.flex-prev {
   	opacity: .3;
   }
   
   .flexslider a:hover.flex-next,
   .flexslider a:hover.flex-prev {
   	opacity: .6;
   }
   

   What these three styles do is set the opacity of the arrows. The top one is the default state. The middle one is when you’re hovering over the hero section. The last one is when you’re hovering over the actual arrows. You can change the opacity from 0 (completely transparent) to 1.0 (completely opaque). You can adjust those values to match.

   The default color is white (#ffffff) but you can change that by to a different color by swapping out the #ffffff in the snippet above for the color code you’d like to use there.

3. Update your settings.

If you have any questions or trouble, let me know.

Have a great week,
Bill

[Patrice Williams]

Excellent. Thank you for your awesome tech support.

[Author]

Posts