CSS – Styling a Tagcloud

On a lot of websites, this one including, you see tag-clouds. These are lists of most popular alphabetical sorted tags relevant to that website. This tutorial is about how to style a tag-cloud that is used in WordPress with css, a cascading style sheet.

Note:
This is not the widget that you can activate in your WordPress. This is a modification in your template witch allows you to modify the styles of your links via css. To prevent duplicate tag clouds remove the default widget in your WordPress dashboard.

The html

    Here the php code

The php

    if(function_exists('wp_tag_cloud')){
        wp_tag_cloud('smallest=8&largest=22');
    }

The css

#tagcloud a:link, #tagcloud a:visited {
	position: relative;
	float: left;
	margin: 2px;
	color: #999;
	text-decoration: none;
	}

#tagcloud a:hover {
	color: #EF7A06;
	}

.clear {
    clear: both;
    }

• Mootools 1.2 cvLinkSelect class 1.2 (0)
• Mootools 1.2 cvLinkSelect class 1.1 (0)
• Mootools 1.2 cvLinkSelect class (24)
• Mootools 1.2 cvElementAppear class (0)
• Mootools 1.2 cvNewsTicker class (8)
• Mootools 1.2 cvRelativeTop class (0)
• Mootools 1.2 password strength indicator (1)
• Add more style to your forms with Mootools 1.2 (0)

Leave a Comment

Get your own Gravatar!
Your email will never be published!