Posts Tagged 'thumbnail'

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.

Code:

.ngg-navigation {
padding-top:35px;

}

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

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

Back End Example:

Your dashboard should look something like this.