Change NEXT Gen Gallery Thumbnail Spacing

Finished Look:

Here is the before and after of what the gallery will look like.

Go to:

Dashboard / Plugins / Installed Plugins / Find NEXT Gen Gallery and hit Edit

Then scroll down to ‘nextgen-gallery/css/nggallery.css‘ under the list of Plugin Files and click it.

Scroll down til you see /* ———– Gallery style ————-*/ and change overflow of the .ngg-galleryoverview to visible. Also add in a height value for .ngg-gallery-thumbnail-box (this will tell NEXT Gen how much space to use for the thumbnails in its image gallery. I used 60px and it pretty much eliminated all the extra space between the rows. As Steffen pointed out the navigation was hidden behind the thumbnails after the height was changed so add in the padding-top 35px for the .ngg-navigation.


.ngg-navigation {


.ngg-galleryoverview {
overflow: visible;
margin-top: 10px;
width: 100%;
display:block !important;

.ngg-gallery-thumbnail-box {
float: left;
height: 60px;

Back End Example:

Your dashboard should look something like this.


3 Responses to “Change NEXT Gen Gallery Thumbnail Spacing”

  1. 1 Steffen August 1, 2011 at 6:16 pm

    Hey guys,
    this is working! But you need to adjust one more thing (otherwise the navigation buttons are behind the pictures.):

    .ngg-navigation {

  2. 3 Stéphane Bidouze June 6, 2012 at 12:51 am

    Thank you very much, it’s works for me too!!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 3 other followers


%d bloggers like this: