It could indeed be convenient to have bigger button sizes, certainly when on a mobile device. The problem however, is that the bigger button area’s may overlap a slide with a URL or even the pagination.
At the moment you can of course work it out for yourself, using a custom stylesheet.
I see, I didn’t think as I don’t use URL or pagination.
What would I do to custom stylesheet to make the area just a strip?
I see it has some strange margin using -20
The images are centered vertically in the slideshow’s container with the ‘top: 50%;‘ CSS value. This will place the top of the button image in the center, but leaves the rest of the button below the center. The ‘margin-top: -20px;‘ pulls the button up half its height so it’s completely centered.
If you want to have buttons from top to bottom, you should do something like this:
.slideshow_container_0 .slideshow_button {
top: 0; /* Brings the buttons to the top. */
height: 100%; /* I'm not sure whether or not this works in all versions of Internet Explorer. */
width: 100px; /* Any width you'd like. */
background: url('URL to your image') no-repeat;
}
If you’re using the default image, you should probably use something like CSS background-position as well.
I got it
.slideshow_container .slideshow_button {
top: 0;
height: 100%;
width: 39px;
}
.slideshow_container .slideshow_previous {
background: url('%plugin-url%/images/SlideshowPlugin/light-arrows.png') no-repeat 20px 50%;
}
.slideshow_container .slideshow_next {
background: url('%plugin-url%/images/SlideshowPlugin/light-arrows.png') no-repeat -19px 50%;
}
