Thumbnail Navigation

edited July 2014 in Slideshow Gallery plugin
Hi - great plugin! Just wondering if it's possible to change the color of the left and right navigation arrows on the thumbnails so there's just the arrow but not the black rectangle?

URL is here -
I am using the newest version of WordPress and your plugin.

Thank you!


  • 5 Comments sorted by
  • Vote Up0Vote Down

    Thank you for your post.

    Yes, you can change the left/right arrows.

    They are actually images loaded with CSS so you can either change the CSS or swap out the images under "slideshow-gallery/images/" folder.

    Let me know if this helps.
  • Vote Up0Vote Down
    Thanks for the reply. Unfortunately we can't find any image in that folder that looks like the image - any ideas what the image is called?
  • Vote Up0Vote Down
    Hi Mel

    The images are in slideshow-gallery/views/default/images/
    Image names left.gif and right.gif

    Let me know if this helps?

  • Vote Up0Vote Down
    Sorry, I think my original question might have been altered over the course of this conversation ... I'm actually trying to remove or change the color of the black rectangle that appears behind the navigation arrows. Is that possible? The images names you have listed above are the actual arrows. Sorry if I haven't explained correctly.
  • Vote Up0Vote Down
    Hi Mel

    No problem. To change the colour behind the arrows you need to edit the following styles. Change the background-color.
    slideshow-gallery/views/default/css.php - for non responsive gallery and for responsive gallery slideshow-gallery/views/default/css-responsive.php
    <pre lang="php">
    #<?php echo $styles['wrapperid']; ?> #slideleft<?php echo $unique; ?> { float:left; width:20px; height:<?php echo ((int) $styles['thumbheight'] + 14); ?>px; background:url('images/scroll-left.gif') center center no-repeat; background-color:#333; }
    #<?php echo $styles['wrapperid']; ?> #slideleft<?php echo $unique; ?>:hover { background-color:#333; }
    #<?php echo $styles['wrapperid']; ?> #slideright<?php echo $unique; ?> { float:right; width:20px; height:<?php echo ((int) $styles['thumbheight'] + 14); ?>px; background:#333 url('images/scroll-right.gif') center center no-repeat; }
    #<?php echo $styles['wrapperid']; ?> #slideright<?php echo $unique; ?>:hover { background-color:#333; }

Sign In or Register to comment.