Posted by mwm on August 30, 2010 at 1:20pm
2 followers
Jump to:
| Project: | Views Cloud |
| Version: | 6.x-1.2 |
| Component: | User interface |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Issue Summary
For whatever reason, the views clouds that I've created never look anywhere near as good as the screenshot on the project page. The attached image shows how the taxonomy/term view looks with the Garland theme in Firefox 3.5. This is the same view that came with the module, except that I enabled displaying the count.
As you can see, the terms are left-justified rather than centered, the lines overlap, the count's font size is too large, and the terms are too close to each other horizontally. If I were to turn the count off, the terms would be so close together that you couldn't tell the difference between two terms and a two word term.
Am I supposed to do some custom CSS to make this look better? Thanks for any help!
| Attachment | Size |
|---|---|
| views_cloud_garland_3.jpg | 17.21 KB |
Comments
#1
Yes you will need to override the CSS that comes with the module.
Here is my version, I think the important one is to change the line-height but I have also limited the maximum size of a tag.
You might find it looks better if you sort by count, so the tag sizes progress from large to small or vice versa.
Firebug is an easy was to play with the CSS in Firefox.
/*
* Size of tag cloud
*/
div.views-cloud {
line-height: 1.1;
text-align: center;
}
.views-cloud-size-1 {
font-size: 1em;
}
.views-cloud-size-2 {
font-size: 1.2em;
}
.views-cloud-size-3 {
font-size: 1.4em;
}
.views-cloud-size-4 {
font-size: 1.6em;
}
.views-cloud-size-5 {
font-size: 1.8em;
}
.views-cloud-size-6 {
font-size: 2em;
}
.views-cloud-size-7 {
font-size: 2.2em;
}
.views-cloud-size-8 {
font-size: 2.4em;
}
.views-cloud-size-9 {
font-size: 2.6em;
}
.views-cloud-size-10 {
font-size: 2.8em;
}