As part of our free web graphics section of the blog, we recently released an Icon Set for Bloggers. In the comments of that post, folks asked us if we’d explain how to use them into a theme.
Easy to Implement with the Genesis Framework
If you are running any of your sites on the Genesis Framework, using the icon set for bloggers is quite simple – and only requires a few steps.
First, let’s take a look at where the icon set for bloggers can even be used. There are two sections within the Genesis Framework where you can utilize these fine graphics – the post info section, and the post meta section.
The Post Info Section
Traditionally in all Genesis child themes the post info section can be found underneath the post title. Here’s an example taken from the Minimum child theme:
You’ll see that there is an icon immediately to the left of the date and also the comments. Both of those show up as a result of CSS that is defined in the Minimum child theme’s style.css file. Here’s what that looks like:
[css].time {
background: url(images/icon-time.png) no-repeat;
padding: 2px 0 2px 21px;
}
.post-comments {
background: url(images/icon-comments.png) no-repeat;
margin: 0 0 0 10px;
padding: 2px 0 2px 22px;
}[/css]
The Post Meta Section
Similarly in all Genesis child themes the post info section can be found at the bottom of each post, mostly likely directly above the author box. Here’s an example taken from the Minimum child theme:
You’ll see that there is an icon immediately to the left of the categories and also the tags. Both of those show up as a result of CSS that is defined in the Minimum child theme’s style.css file. Here’s what that looks like:
[css].categories {
background: url(images/icon-categories.png) no-repeat;
padding: 2px 0 2px 22px;
}
.tags {
background: url(images/icon-tags.png) no-repeat;
margin: 0 0 0 10px;
padding: 2px 0 2px 20px;
}[/css]
Implementing the New Icons
As you can see from the CSS above, each icon is saved as an image – icon-categories.png, icon-comments.png, icon-tags.png and icon-time.png. If you want to replace the icons shown in the examples above with ones from the icon set for bloggers, all you need to do is rename each of the new icons with the file name from the style.css file. (Alternatively, you could change the image file name in the style.css file to match that of the file name of each corresponding icon.)
Upload Files to Your Server
Once you have that sorted, all you need to do is simply upload each of the icon files to the child theme’s images folder on your server. You may need to overwrite the default files from the theme if you chose the method of renaming the icons from our pack to icon-categories.png, icon-comments.png, icon-tags.png and icon-time.png.
If you choose to change the image file name in the style.css file to match that of the file name of each corresponding icon, make sure you upload the style.css file to your child theme’s folder.
If you have have any questions with this, feel free to ask in the comments below.