Customizing the ‘>>’ arrows is pretty simple with a little css. You’ll need to edit the shutter-reloaded.css file found at wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.css.
Before you get started, it would be a good idea to save a copy of the shutter-reloaded.css to something like shutter-reloaded_orig.css just in case you make a blunder and need to revert back to the original.
Modify the following lines in shutter-reloaded.css:
#shDisplay div#shNext{
float:right;
}
#shDisplay div#shPrev {
float:left;
}
to the following, but you may need to change the percentage based on the size of your photos: (Don’t forget to save and reload the gallery page in your browser.)
#shDisplay div#shNext {
bottom: 50%;
position: fixed;
right: 15%;
}
#shDisplay div#shPrev {
position: fixed;
bottom: 50%;
left: 15%;
}
Once you get those to work, you can add the [x]. Add the following lines of code immediately following the last example:
#shDisplay div#clbtn {
position: fixed;
top: 0%;
right: 0%;
margin-right: 10px;
margin-top: 10px;
}
Now, you’ll need to modify the shutter-reloaded.js file (found in the same directory). Again, not a bad idea to make a backup first. On line 125, add the following:
closebtn = '<a href="#" onclick="shutterReloaded.hideShutter();">[x]</a>';
Then change line 128 from:
NavBar = '<div id="shTitle"><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';
to:
NavBar = '<div id="shTitle"><div id="clbtn">' + closebtn + '</div><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';
That should render a nice [x] in the upper right hand corner. You can also customize the font sizes and other properties of your [x] and >> in the #shDisplay div#shTitle a { area of the shutter-reloaded.css file.
Good luck!
