+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / How to reduce font size of tag cloud

How to reduce font size of tag cloud

4 posts, 0 answered
  1. Pravat
    Pravat avatar
    59 posts
    Registered:
    22 Jun 2010
    30 Jun 2011
    Link to this post
    Hi,
        How to reduce font size of tag cloud. Please help.....


    Thanks & Regards,
    Pravat Sharma
  2. Mike
    Mike avatar
    208 posts
    Registered:
    10 Dec 2007
    30 Jun 2011
    Link to this post
    I ended up rewriting a lot of the TagsList control, so that I could change some of the basic functionality, but changing the font size is pretty easy.  In my case, the tag cloud is wrapped in a div.tagsControl, so you can drop that part from the CSS below.

    If you want to change the points at which the font sizes change, (or in my case, the client wanted to only show tags where there was at least two or more items), you'll have to write your own tag cloud, inheriting from

    Telerik.Cms.Engine.WebControls.Tags.TagList


    Regards,
    Mike Sharp

    /* Tag Cloud */
      
      
    div.tagsControl ul
    {
        list-style:none;
        margin:0 0;
        padding:0 0;
        font-size:.9em;
          
    }
    div.tagsControl ul li
    {
        margin:0 0;
        padding:0 0;
    }
      
    div.tagsControl ul.tagCloud
    {
        list-style:none;
        margin:0 0;
        padding:0 0;
    }
    div.tagsControl ul.tagCloud li
    {
        display:inline;
        margin:0 0;
        padding:0 0;
    }
    div.tagsControl ul.tagCloud li a.tagCloudItem
    {
        line-height:85%;
    }
    div.tagsControl ul.tagCloud li a.tagCloudItem1
    {
        font-size:250%;
    }
    div.tagsControl ul.tagCloud li a.tagCloudItem2
    {
        font-size:200%;
    }
    div.tagsControl ul.tagCloud li a.tagCloudItem3
    {
        font-size:175%;
    }
    div.tagsControl ul.tagCloud li a.tagCloudItem4
    {
        font-size:135%;
    }
    div.tagsControl ul.tagCloud li a.tagCloudItem5
    {
        font-size:100%;
    }
    div.tagsControl ul.tagCloud li a.tagCloudItem6
    {
        font-size:85%;
    }


  3. Pravat
    Pravat avatar
    59 posts
    Registered:
    22 Jun 2010
    01 Jul 2011
    Link to this post
    Hi Mike,
                  Thanks for your help. can you tell me how to write own tag cloud? please send me some sample.

    Thanks
    Pravat Sharma
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    01 Jul 2011
    Link to this post
    Hello Pravat,

    You should use Tags API to build the cloud. The build-in control supports TagCloud mode - DisplayMode property.

    Greetings,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Register for webinar
4 posts, 0 answered