The next / prev click buttons on an albm is show at the edge of the screen and often the user ignores it thinking it has only one image.. However, it is show perfectly on the image on smaller devices such as cell phones.
Is it possible to bring the next / prev buttons closer to images on larger devices (laptop etc)? thanks in advance!
Sticking them to the edge of the image is tricky without a big mod as the arrows work on a different layer to the image. It looks good on a mobile browser because the image fills the whole screen and the arrows are at the edge, giving the impression that they are part of the image.
You can make a minor modification which will have the effect of bringing the arrows in from the edge a little so they stick out more.
In the themes main style sheet (style.css) edit the image-viewer-navigation subsection. Add the following after line 98.
So the whole of that section should then go from this .....
Code:
.image-viewer-navigation {}
.image-viewer-navigation a {
z-index: 3;
}
To this ....
Code:
.image-viewer-navigation {}
.image-viewer-navigation a {
z-index: 3;
margin: 0 5% 0 5%;
}
This will bring the arrows in from the edge a little bit and make them stand out more, rather than them sitting right on the edge of the screen.
You could also add ...
Code:
color: [a darker colour];
To that section as well, for example ...
Code:
.image-viewer-navigation {}
.image-viewer-navigation a {
z-index: 3;
margin: 0 5% 0 5%;
color: #000;
}
Which will override the colour of the arrow icon. #000 will make it very dark, so you can see it more easily.
Within the hover attributes underneath, you can override the colour again, just for effect, so if you use a dark colour to stand out, add a lighter colour (like #FFF), so that the arrow turns white when the background colour of the navigation colour goes grey.
