As requested on the NextGEN support fourm here is the setup used to produce the grid view layout for the NextGEN galleries on the Japanese Arts Gallery website.

Please note that the css below applies to the gallery thumbnails (eg http://japaneseartsgallery.com/gallery/woodblock-prints/osamu-sugiyama/) and does not alter the album grid view thumbnails (eg http://japaneseartsgallery.com/gallery/). The Japanese Arts Gallery site does have some very small custom PHP code changes in the NextGEN plugin but I don’t believe it affects how the css below works.

The NextGEN galleries are displayed using the standard NextGEN gallery caption shortcode.

[nggallery id=nn template=caption]

The following css is then used to tailor the standard NextGEN grid view into a custom view. I’m not a css coder or anything like that so the css was produced in part from posts on the NextGEN support forum and in part from experimentation.

The first two class definitions are to produce the custom effect – border, background colour, box shadow and so forth.

The last three class definitions are purely to center the thumbnails plus the height attribute in the “.ngg-gallery-thumbnail a” class definition which was added to cater for variable height thumbnails by aligning the captions. The height attribute is not needed there if you only have ‘landscape’ thumbnails.

Obviously the height and width settings, margins and padding will need to be tweaked if used on other sites.

For simplicity I’d recommend you start out getting the first two classes working ok and then move on to the bottom three which center the thumbnails.

/* --- start customisation of gallery thumbnails  --- */

.ngg-gallery-thumbnail-box {
/* style the box that holds the gallery title and image */
    background-color: #444444;
    border: 1px solid #CCCCCC;
    margin: 5px 5px 20px 5px;
    padding-top: 10px;
    padding-right: 5px;
    padding-left: 5px;
    font-size: 14px; 
    color: #FFFFFF;
    width: 175px; 
    height: 200px;
    box-shadow: 5px 5px 5px #888888;
}

.ngg-gallery-thumbnail img:hover {
/*  Change hover color from grey to black */
    background-color: #000000;
}

.ngg-gallery-thumbnail {
/*  Needed for thumbnail centering to work */
	width: 175px; 
	height: 200px; 
    	display: table; 
}

.ngg-gallery-thumbnail a {
/*  Needed for thumbnail centering to work */
    display: block; 
    vertical-align: middle;
    text-align: center;
    height: 125px; /* make descriptions align below thumbnails */
}
.ngg-gallery-thumbnail img {
/*  Needed for thumbnail centering to work */
	float: none;
	display: block; 
	margin: 0em auto;
}


/* --- end customisation of gallery thumbnails  --- */