Hi,
I am trying to change the colors of RadRating used inside a Catalook module on my DNN site.
I'm new to this & have uncovered the Visual Style Builder which helps a little but I also need to change the stars that aren't selected.
When I look at the page with firebug the background image URL is "/webresource.axd?d= then a massive series of numbers & letters
I can see that the control is using the sitefinity skin but I can't find this skin anywhere
I did do a search for sprite.png & found 1 instance but it had no images of stars on it
I also searched for skin.css files but couldn't find any related.
I've reviewed how to create a custom file from copying an existing one but can't find an existing 1 to copy.
My folder structure does have a series of radcontrols but not one for rating.
Can I manually create a skin & point to this in the ascx file where the code currently says
<
telerik:RadRating
ID
=
"rrlistAverageRating"
runat
=
"server"
ItemCount
=
"5"
ReadOnly
=
"true"
Skin
=
"Sitefinity"
>
If so can I see an example, please.
Can I just modify the sprite.png file?
An example of my site is currently http://frame.utiliseit.com.au/Products/BagsandLuggage.aspx
Thanks in advance
7 Answers, 1 is accepted
RadRating Custom Skin Tutorial will guide you through the process of creating a custom skin. It also explains the position of the stars/rating elements and how to change the color palette of the sprite.
Regards,
Bozhidar
the Telerik team
Go to ~/[RadControlsInstallationFolder]/Skins and copy Rating.css in your Skins folder
You could skip that step as it is not necessary to disable the base styles and to enable it again. You could use the Base style as an embedded resource.
Go to ~/[RadControlsInstallationFolder]/Skins/Default and copy Rating.Default.css and the Skins/Default/Rating folder in your Skins folder.
This is the installation folder of RadControls, most probably it will be on your C drive, Program Files. You have to find the Telerik folders etc. For your convenience, attached is a zipped file containing all necessary files to create a custom skin for RadRating control.
Greetings,
Bozhidar
the Telerik team
I am having a similar problem applying custom skins as well. I am using the Radrating control that has come with Catalook and I was looking to change the colors to better suit the site.
I am using DotNetNuke6, which is a content management system, and have been looking at the following web resource http://www.telerik.com/help/aspnet-ajax/rating-styling.html
The point at where i get stopped is the mention of "~/[RadControlsInstallationFolder]/Skins/Default" or to find the "Rating.css".
I understand the idea that this is meant to be a where the skin is managed. But I have been unable to find any of the files in my site that I need to start the tutorial.
Is Radrating handled in a different way on DontNetNuke installations? I have found two .dll files in the /bin directory of the site. These files include extensive css references as well as other separate information if this provides any more information.
Thanks so much.
This should be supported by DNN forum guys and you could asked them where exactly are placed the necessary files. You could also try to find in the DNN installation folder these files using the OS search function.
Another options is to download Telerik ASP.NET AJAX Trial Version and to take from there the skin files you need it.
Greetings,
Bozhidar
the Telerik team
You can not edit the DLL file and to edit the colors. If you want to edit the star colors in RadRating, you could try to override the CSS by forcing the control to use different sprite image. The following code is a simple sample showing how to do that:
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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"
>
div.RadRating_Default a,
div.RadRating_Default a span {
background-image: url(Sprite.png);
}
</
style
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
asp:ScriptManager
ID
=
"sm1"
runat
=
"server"
/>
<
div
style
=
"padding: 15px; padding-left: 60px; float: left;"
>
The Godfather (1972)<
telerik:RadRating
ID
=
"RadRating1"
runat
=
"server"
ItemCount
=
"5"
Value
=
"3"
SelectionMode
=
"Continuous"
Precision
=
"Half"
Orientation
=
"Horizontal"
/>
</
div
>
<
div
style
=
"padding: 15px; padding-left: 60px; float: left;"
>
Forrest Gump (1994)<
telerik:RadRating
ID
=
"RadRating2"
runat
=
"server"
ItemCount
=
"5"
Value
=
"3"
SelectionMode
=
"Continuous"
Precision
=
"Half"
Orientation
=
"Horizontal"
/>
</
div
>
<
div
style
=
"padding: 15px; padding-left: 60px; float: left;"
>
Forrest Gump (1994)<
telerik:RadRating
ID
=
"RadRating3"
runat
=
"server"
ItemCount
=
"5"
Value
=
"3"
SelectionMode
=
"Continuous"
Precision
=
"Half"
Orientation
=
"Horizontal"
/>
</
div
>
</
form
>
</
body
>
</
html
>
Attached is also Sprite.png, which is the modified sprite, used to change the original Default skin sprite.
Regards,
Bozhidar
the Telerik team