Hi kbishop,
You can use the text-mode for the navigation, so that you see the words “next” and “previous” and fiddle around with CSS and use background in conjunction with text indent, eg. like this
.sep {
display: none; /* makes the separator invisble */
}
.slideshow-nav a.slideshow-prev {
position: relative; /* relative positioning, so that left and top will work */
z-index: 10;
left: -30em; /* allows to reposition the next and prev navigation */
top: 15em;
height: 3.125em; /* height of the prev.png - equals 50px in this case*/
width: 3.125em; /* width of the prev.png - equals 50px in this case*/
background-image: url('images/prev.png'); /* here we define the image that should be used. Replace images/prev.png with whatever path and image that you have. The image folder should be placed within the themes folder */
background-repeat: no-repeat;
background-position: center center;
text-indent: -99em; /* this moves the word "previous" to the left, so we don't see it anymore, just the background graphic is visible */
display: inline-block;
}
.slideshow-nav a.slideshow-next{
position: relative;
z-index: 11;
right: -30em;
top: 15em;
height: 3.125em;
width: 3.125em;
background-image: url('images/next.png');
background-repeat: no-repeat;
background-position: center center;
text-indent: -999em;
display: inline-block;
}