tag cloud display like native k2

Hello,

I am using the 3.0 News Template and have started from the demo.

I want my K2 tag cloud to look like a tradtional tag cloud...like it does in the regular k2 module...in a cloud like formation rather than a single column list.

I can't find the css that overrides the native css - other than the line indicating the star bullet image.

Can you tell me how I can get it to display like a traditional tag cloud?

Thank you!

Hi,
first of all you have to remove tag.php from templates/gk_news/html/mod_k2_tools/ becasue this file override regular k2 tags view. Then you need remove css rules from templates/gk_news/css/k2.css

1. Enable override.css in template settings.
2. Edit file: /templates/gk_news/css/override.css and add at the end:

Code: Select all

.k2TagCloudBlock a { display: inline-block !important; background: none; padding: 4px;}


wow, speedy! Thank so much both of you. I will give it a go.

Konrad's reply will give You controll over font size of tag cloud elements (bigger/smaller etc), mine will only put them next to each other, but without size variable.
You could also mix them together

Hi,
first of all you have to remove tag.php from templates/gk_news/html/mod_k2_tools/ becasue this file override regular k2 tags view. Then you need remove css rules from templates/gk_news/css/k2.css

Hi... when you say remove css rules form templates/gk_news/css/k2.css is there a particular line you can show that needs to be removed. I'm not as good at identifying the correct code and I don't want to adversely affect something else.

You should comment those 2 lines:

Code: Select all

.k2TagCloudBlock a {
   background: url(../images/style1/tag_bullets.png) no-repeat 0 8px;
   display: block;
   line-height: 1.8;
   padding-left: 20px
}

.k2TagCloudBlock a:hover {
   background-position: 0 -303px
}


to comment in css place /* in beginning of comment and */ at end so the block looks like:

Code: Select all

/*
.k2TagCloudBlock a {
   background: url(../images/style1/tag_bullets.png) no-repeat 0 8px;
   display: block;
   line-height: 1.8;
   padding-left: 20px
}

.k2TagCloudBlock a:hover {
   background-position: 0 -303px
}
*/


also You should add one thing to override.css:

Code: Select all

background-image: none;
}


to get ride of the stars.