Venkatakrishna
Top achievements
Rank 1
Rank 1
Venkatakrishna
asked on 09 Mar 2012, 08:14 AM
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
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 Answers, 1 is accepted
0
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:
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
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"><html xmlns="http://www.w3.org/1999/xhtml"><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.
0
Venkatakrishna
Top achievements
Rank 1
Rank 1
answered on 09 Mar 2012, 10:00 AM
Great work ! it works fine.
Thanks
Venkat
Thanks
Venkat