Every so often I like to refresh the look of my gallery which is built using the NextGEN gallery plugin. My latest update was to customise the NextGEN CSS to change the way it displays the gallery thumbnails when using the album shortcodes.

I like the gridview effect that shortcode [album id=n template=compact] provides but have been finding that it now feels a little tired. The thumbnails are small and enlarging them causes issues with the stepped border thats placed around them.

So, my question was, how to improve the look of the template=compact gridview appearance without doing anything complicated. The answer was to use the shortcode [album id=n template=extend] which provides larger thumbnails and then just tweak the CSS.

By modifying the NextGEN CSS it was possible to change the default listview appearance of the shortcode to my preferred gridview and then ‘pimp’ it a little to get a bolder appearance.

NextGen Album Extend before CSS changes

NextGen Album Extend Display after CSS changes

The following CSS changes were used to produce the layout in the right-hand image above. Depending on what you’d like to acheive you may wish to use all or some of them. Variables such as the height, width and colour may/would need to be adjusted for your own implementation. The theme I use with NextGEN gallery is Suffusion which comes which a facility to include custom CSS changes so I don’t need to edit CSS files. My changes therefore override rather than overwrite any CSS and are also therefore always carried forward when upgrading the NextGEN plugin. If you are editing CSS files directly then be sure to save a copy of the original in case of problems.

(1) Remove bolding from the titles and center them.

/* --- start customisation of album thumbnails --- */
.ngg-albumtitle {
/* style the album titles */
font-weight: normal;
text-align: center;
}

(2) Customise the container that holds the title, thumbnail and caption.

.ngg-album {
/* setup the box to hold the album title, image and description */
height: 200px;
margin: 15px;
width: 200px;
float: left;
background: #F9F9F9;
box-shadow: 10px 10px 5px #888888;
}

(3) Hide the album photo count as my page width caused it to wrap untidily. Increasing the album container width above wasn’t possible for me as that caused another issue. This change is optional depending on whether you want this information displayed or not and how it appears which will vary depending on the width of your page. Start off without doing this and see how it looks for you.

.ngg-description {
/* hide unwanted album photo count by setting colour to same as background in ngg-album */
color: #F9F9F9;
}

(4) Center the thumbnail within the container.

.ngg-thumbnail {
/* center album thumbnail within its container */
float: none;
}


To see the new layout in action you can visit my Japanese Arts Gallery website.