Previous/Next Buttons

[Marjorie Cohen]

Hi Bill, for an image gallery/slideshow, is it possible to modify the Previous/Next Buttons?

They are quite small and dark, and hence not very visible.

http://www.mynameisvivienne.com/gallery/

Thanks,
Marjorie.

[Bill Robbins]

Margorie,

Here’s one easy way you could make the buttons stand out a bit more. Go to the Theme Options page and select the styling tab. Scroll down to the Custom CSS box and paste this:

.flex-direction-nav a {
	background-color: rgba(255, 255, 254, 0.5);
	bottom: 0;
	padding-top: 10px;
}

.flex-direction-nav .flex-next {
	background-position: 100% center; 
	left: 23px;
	opacity: 1;
}

.flex-direction-nav .flex-prev {
	left: 0;
	opacity: 1;
}

.flexslider:hover .flex-next:hover, 
.flexslider:hover .flex-prev:hover {
	opacity: .8;
}

That will add a semi-transparent white background behind the buttons so they are a bit more visible on different colored backgrounds.

Let me know if that doesn’t quite work for you,
Bill

[Author]

Posts