Viewing 1 replies (of 1 total)
  • francishunger

    (@francishunger)

    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;
    }
Viewing 1 replies (of 1 total)
  • The topic ‘Can I change the "Prev" and "Next" links to images?’ is closed to new replies.