This is a migrated thread and some comments may be shown as answers.

Layout assistance for newbie

7 Answers 31 Views
Rating
This is a migrated thread and some comments may be shown as answers.
Todd
Top achievements
Rank 1
Todd asked on 14 Jul 2012, 07:39 AM

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

Sort by
0
Bozhidar
Telerik team
answered on 16 Jul 2012, 01:16 PM
Hi,

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
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
Todd
Top achievements
Rank 1
answered on 16 Jul 2012, 01:46 PM
Thanks but i cant work out where to copy the existing skin from (as per step 3)
0
Bozhidar
Telerik team
answered on 17 Jul 2012, 07:11 AM
Hello,

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
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
Daniel
Top achievements
Rank 1
answered on 19 Jul 2012, 01:08 AM
Hi Bozhidar,

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.
0
Bozhidar
Telerik team
answered on 19 Jul 2012, 06:55 AM
Hi,

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
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
Todd
Top achievements
Rank 1
answered on 24 Jul 2012, 09:21 PM
Hi & sorry to be a pain, I'm informed that the files your talking about reside in a dll file. Is it possible to edit the dll file & make the color change? Thanks in advance
0
Bozhidar
Telerik team
answered on 26 Jul 2012, 06:29 AM
Hi,

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">
<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
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.
Tags
Rating
Asked by
Todd
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Todd
Top achievements
Rank 1
Daniel
Top achievements
Rank 1
Share this question
or