New to Vibr8 Bros.? Don't panic. Get our RSS Feed.

In this tutorial, you learn how to enhance the link appearance on your WordPress blog. Using simple CSS, this post covers what you need to know in order to pretty up your blog in 4 simple steps.

Have you noticed the little “8″ gracing every link on our site? We styled our links this way in order to distinguish them from the other content. It’s also a branding issue - our mark appears with every link on the page ;)

We did this using simple CSS. You also need to have the image (or icon) to use this feature. You can easily apply this “enhancement” to your own blog, too.

As we’re running a WordPress powered blog, we will show you how we added this feature to Vibr8bros.com.
This is how we did it:

1. Create the image you’d like to appear with each link

You can use Illustrator or Photoshop for this. You simply create a small enough image that you think looks good and that’s also not too intrusive. After all, it will adorn all of your main content links. We made our image 11×14 pixels large and used a light grey. Save it as a GIF file.

2. Open up your theme’s single.php

Before we apply a style to our links and make them look flashy, we have to take care that we limit the appearance of our new link icon to the entry content only. Open up this file in your favorite HTML editor (you can also use Notepad or any other ASCII program): wp-content/themes/your_theme/single.php. Unless you want your icon to appear with each and every link, including sidebars and post titles, this step is necessary.

In your theme’s single.php, look for something like this:

...
<?php the_title(); ?>
<div class="YOUR_DIV_CLASS">
<?php the_content('Read the rest of this entry'); ?>
...

YOUR_DIV_CLASS is what you have to look out for. What’s written there? This is the class name of your entry content DIV. Now that you know where how your entries are styled, let’s move on:

3. Go to your Theme Sylesheet

Open up the CSS file of your blog theme. It’s usually located in wp-content/themes/your_theme/ and called style.css.

Now scroll down to the end of your style.css and copy&paste the following code:

.YOUR_DIV_CLASS a {
background: url(images/YOUR_LINK_ICON.gif) no-repeat top right;
padding: 0 13px 0 0;
}

Do the following:

• Replace YOUR_DIV_CLASS with the name of your entry content DIV (we found that out in step 2)
• Replace YOUR_LINK_ICON.gif with the name of your icon
• Adjust the padding of the link. We set ours to 13 pixels to the right. That’s because our link icon, in this case, is 11 pixels wide. In the second line of code, we positioned it to the top right, and we want it to be slightly shifted to the right. If you created a link icon that has other dimensions than our 11×14 pixels, you’ll just have to experiment with this setting to achieve the most pretty result. For example, if your icon is only 7 pixels wide, try to replace the 13 in the above code with a 9.

4. Upload & Enjoy the New Pretty!

Now, all you have to do is save your CSS file. Upload it to your theme folder, replacing the old one. Also, if you haven’t done so already, upload your gif file to your theme’s images folder. That’s it! You have pretty links now. That is, if your icon is pretty in the first place ;)

A few tips:

• Don’t make your link icon too bold or colorful. It will only distract from the content.
• Don’t make it too big, either. Keep it small and classy.
• Experiment with these settings, like dimensions and padding, until you find the best one for you
• In case of emergency, or if it doesn’t work for you: ask, and thou shall be helped!
• If you’ve installed this and use it on your site, you can link to your site from here by placing a comment below!

You want more? You want more. Subscribe!