ATTENTION: ALL OTHER TUTORIALS WILL BE POSTED TO SHAUNGUARINI.COM

I will no longer be posting tutorials to this site. If you want to see other tutorials by me and want to request some please visit my site at http://www.shaunguarini.com . You can find all of the tutorials posted here and many more. Cheers.

How to Change the Sidebar Font Color

This tutorial will help you change color of the text in the sidebar. To learn how to change the color of title of the sidebar click here.

Finished Look:

The highlighted section will be changed.

Go to:

Dashboard / Appearance / Editor / style.css

Code:

.secondary a {
color:#000000;
}

Back End Example:

Your dashboard should look something like this.

How to Widen Page Area

Finished Look:

This will be your website with the new widths in place.

Go to:

Dashboard / Appearance / Editor / style.css

Code:

.columns-two #page {
width: 900px;
}

.columns-two #primary {
position: top left;
width: 600px;
padding: 10px;
}

Back End Example:

Your dashboard should look something like this.

How to Make Your Banner (Header) a Link

This tutorial will help you turn your banner into a link by editing the header.php file. Most sites use this as a convenience for visitors helping them navigate back to the home page.

Finished Look:

The highlighted section will be a link to your chosen URL.

Go to:

wp-content / themes  / k2 / header.php

Scroll to around line 38 and you should see this code <div id=”header”>. Replace this code with the one below.

Code:

<div id=”header” role=”banner” onclick=”location.href=’http://www.YOURDOMAINHERE!!!.com/’;” style=”cursor: pointer;”>

Back End Example:

Your header.php file should look something like this.

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 Remove ‘Comments Are Currently Closed’ in WordPress

If you choose to disable your post comments WordPress leaves behind some ugly text in that space. This technique will remove the ’0 responses’ and ‘comments currently closed’ text from your post footer.

Finished Look:

The highlighted section will be removed.

Go to:

Dashboard / Appearance / Editor / style.css

Code:

.comments {
display:none
}

Back End Example:

Your dashboard should look something like this.

TIP: CSS Background Reference

TIP:

Use this as a general guide when editing your background. Every time you use another property it will change your theme making it unique. To learn more about CSS click here.

CSS Background Properties:

• background
• background-attachment
• background-color
• background-image
• background-position
• background-repeat
• background-clip
• background-origin
• background-size