PDA

View Full Version : Forum Home Enhancements - Nexia's HowTo: Colored Tags Cloud


05-12-2009, 10:00 PM
The actual Tags Cloud from vBulletin (http://www.vbulletin.com/forum/tags.php) is kinda boring to look at. no color, wrong sizes (obsolete font-sizes...)

99101

So as usual, i decided to rehearse the look of something really useful, and that's the result, a new look for the Tags Cloud...

99102

you can also see it in the footer of the forumhome page on http://vbEnhancer.com, as i use THIS GREAT PRODUCT (https://vborg.vbsupport.ru/showthread.php?t=200917)... from TheCatcher!

you already can edit these details inside the proper template of vB, but nobody does it, because nobody knows it's possible... i just popup the possibility to enhance the view!

if you prefer making the edit yourself, without a product, here is how to:


** code removed as mod in the graveyard **

The version of CSS you see above give the same result as in the colored screenshot.

Theater
05-12-2009, 10:56 PM
Dude, nice. :)

abouahmed
05-12-2009, 11:15 PM
nice work dude.

Theater
05-13-2009, 02:09 AM
If you want to do this for your blog's tag cloud then the template is called blog_css. You have to be smarter with your edit though since you can't just overwrite everything in that particular template. Easy enough though, and it looks good to have both clouds match.

nexialys
05-13-2009, 10:47 AM
oh, thanks for the reminder Theater, i'll add the blog's cloud in the making... i'll see how that template runs and provide a fix for it... :)

Chadi
05-13-2009, 09:40 PM
I have no idea why, but my changes are not getting picked up at all (did a hard refresh, etc)

my template is this:

<style type="text/css">
a.tagcloudlink:link, a.tagcloudlink:visited { text-decoration:none; }
a.tagcloudlink:hover, a.tagcloudlink:active { text-decoration:underline; background-color: #4D528C; color: white; }
a.level1 { font-size: 11px; color: #B7BCE2;}
a.level2 { font-size: medium; color: #7b81cd; }
a.level3 { font-size: large; }
a.level4 { font-size: x-large; color: #ffc1de; }
a.level5 { font-size: xx-large; color: #FF4400; }
</style>

Everything works except the color css portion in the level 1 through level 5 lines. Even my own modification on the 2nd line of adding a hover background color and font color change works fine, but for some reason none of the 5 levels variables work.