rwhall

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!