iBodhi

学佛如初, Information about Buddhism

How to Style Tag Cloud Widget in WordPress

Published · Updated

How to Style Tag Cloud in Wordpress

WordPress offer Tag Cloud Widget which display all the tags from your website. However, the default style is quite basic, where it just display the tag in text form with varies font size depending on the tag number.

Original Tag Cloud Style
Original Tag Cloud Style

In iBodhi, we change the tag cloud style to a cleaner design by using CSS. The final design is as below, where we use the same font size for all the tag and added animation which darken the tag when the user hover over the tag.

New Tag Cloud Style
New Tag Cloud Style

First, go to Appearance -> Customize. Then go to Advanced options -> Additional CSS. Add the following line in the textbox:

.widget_tag_cloud .tagcloud a {
	background-color: #a2cdf2;
	border-radius: 3px;
	color: #000;
	display: inline-block;
	font-size: 16px !important;
	margin: 0 5px 5px 0;
	padding: 2px 5px;
	text-decoration: none;
}

You can change the background color by changing the value of background-color field. For example, if you want to change the background-color to red, just modify the code to background-color: red or background-color: #ff0000 (color code format). To know the color code, you can refer to HTML Color Codes.

If you would like to change the font-color, modify color field value with your desired color or color code. For example, for blue text, you can change it to color: blue or color: #0000ff

For font size, change the font-size field by increasing or decreasing the value. Let’s say you want to increase to font size to 20px. Change it to font-size: 20px

To add hover animation, add the following CSS code under the new line

.widget_tag_cloud .tagcloud a:hover {
	background-color: #327ab8;
	color: #fff;
	transform: scale(1.1);
}

Just as above, you can change the background color and text color when hover by tweaking the value for background-color and color respectively.

You can change the scale by tweaking the value in scale(1.1), which mean 10% increased in size when hover.

Full Additional CSS Code

.widget_tag_cloud .tagcloud a {
	background-color: ;
	border-radius: 3px;
	color: #000;
	display: inline-block;
	font-size: 16px !important;
	margin: 0 5px 5px 0;
	padding: 2px 5px;
	text-decoration: none;
}

.widget_tag_cloud .tagcloud a:hover {
	background-color: #327ab8;
	color: #fff;
	transform: scale(1.1);
}

Once you have done, click Publish to update the change. You would see your tag cloud widget style has changed.

Tags: