Online Tips for Web Developer/Designer

Let’s take a look at styling your tags on your blog. This article focus on the easy step to create a css driven class for your tags. Simply you can change it to any color, background color you want in it. Have fun with it.

Original PHP Code

Code to be changed, or you can search the_tags and replace your the_tags php code with the following code.

<?php the_tags( '<p>Tags: ', ', ', '</p>'); ?>

Replace with the following

The following code just simply added a div with tags class in it, so it will be easy for us to change the look and feel later on. Simply added a h6 tag for the Tags header, of course you can give any header as you prefer.

<?php the_tags( '<div class="tags"><h6>Tags: </h6>', '', '</div>'); ?>

CSS code to modify

Here is the code that make the style work

.tags {padding: 10px;background:#eeeeee; border:1px solid #E0E0E0;}
.tags h6 {font-size:1.3em; border-bottom:dotted 1px #CCC; margin:0 0 10px 0;padding:0;}
.tags a:link, .tags a:visited{color:#699eb6; text-decoration:none; display:inline-block; margin-bottom:5px;font-size:0.9em;}
.tags a:hover{color:#47798f; background:#d9d9d9; text-decoration:none;}
.tags a{background:#c6c6c6; padding:2px 7px; margin: 0; margin-right:5px; -moz-border-radius: 4px; -webkit-border-radius: 4px;}

I hope you have enjoyed this post, be sure to subscribe to my rss feed by click the subscribe button at the top.

Good Luck!