forecolor for Weight item

3 posts, 0 answers
  1. Venkatakrishna
    Venkatakrishna avatar
    22 posts
    Member since:
    Jul 2010

    Posted 09 Mar 2012 Link to this post

    Hi,

    We would like to change the forecolor of WeightItem of the tag cloud control, currently weightitem has been set with grey color, the issue is, we have background image(see the screen shot) for cloud control and it also has the grey color so weight item is not visible properly. we will be able to solve this if we can change the color of the weight item.

    Thanks
    Venkat
  2. Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 09 Mar 2012 Link to this post

    Hi,

    To change color of that element, you should change ,rctTagItem styles. I do not know which skin exactly you are using, so I give you an example with the Default one. If you are suing another skin, just change the way you need it:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .RadTagCloud
            {
             background: url(cloud.png);
             width: 420px;
             height: 295px;
             border: 0;
             text-align: center;
             padding-top: 50px;
            }
             
            div.RadTagCloud .rtcTagList
            {
                padding-top: 80px;
                width: 350px;
                margin: auto;
            }
             
            div.RadTagCloud_Default .rtcTagList .rtcTagItem
            {
                 color: #0a0ff6;
            }
            div.RadTagCloud_Default .rtcTagList .rtcTagItem:hover
            {
                 color: #f16bf6;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadTagCloud ID="RadTagCloud2" runat="server" RenderItemWeight="true" Enabled="true"
             Skin="Default">
            <Items>
                <telerik:RadTagCloudItem Text="ASP.NET" Weight="12" NavigateUrl="http://www.google.com" />
                <telerik:RadTagCloudItem Text="AJAX" Weight="134" NavigateUrl="http://www.ajax.com" />
                <telerik:RadTagCloudItem Text="VB" Weight="56" />
                <telerik:RadTagCloudItem Text="C#" Weight="38" />
                <telerik:RadTagCloudItem Text="Web" Weight="73" />
                <telerik:RadTagCloudItem Text="jQuery" Weight="23" />
                <telerik:RadTagCloudItem Text=".NET" Weight="78" />
                <telerik:RadTagCloudItem Text="Code" Weight="50" />
                <telerik:RadTagCloudItem Text="UI" Weight="80" />
                <telerik:RadTagCloudItem Text="Unit" Weight="20" />
                <telerik:RadTagCloudItem Text="Class" Weight="50" />
                <telerik:RadTagCloudItem Text="ASP.NET" Weight="12" />
                <telerik:RadTagCloudItem Text="AJAX" Weight="134" />
            </Items>
        </telerik:RadTagCloud>
        </form>
    </body>
    </html>

    I have tried to make it look as your example. Attached is cloud.png used in my example, and cloudresult.gif showing the result in the browser with the above improvements.

    All the best,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Venkatakrishna
    Venkatakrishna avatar
    22 posts
    Member since:
    Jul 2010

    Posted 09 Mar 2012 Link to this post

    Great work ! it works fine.

    Thanks
    Venkat
Back to Top