Posts Tagged 'tutorial'

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.

How to Change Your K2 Background Color

Finished Look:

Here is what it will look like when you are done.

Go to:

Dashboard / Appearance / Editor / style.css

Code:

body {
background: #222;
}

Back End Example:

Your dashboard should look something like this.

How to Center Your Blog Title and Description

Finished Look:

This is what your blog will look like.

Go to:

Dashboard / Appearance / Editor / style.css

Code:

.blog-title{
text-align: center;
}

.description{
text-align: center;
}

Back End Example:

Your dashboard should look something like this.