Layout assistance for newbie

8 posts, 0 answers
  1. Todd
    Todd avatar
    3 posts
    Member since:
    Jul 2012

    Posted 14 Jul 2012 Link to this post

    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

  2. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 16 Jul 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Todd
    Todd avatar
    3 posts
    Member since:
    Jul 2012

    Posted 16 Jul 2012 Link to this post

    Thanks but i cant work out where to copy the existing skin from (as per step 3)
  5. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 17 Jul 2012 Link to this post

    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.
  6. Daniel
    Daniel avatar
    1 posts
    Member since:
    Jul 2012

    Posted 18 Jul 2012 Link to this post

    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.
  7. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 19 Jul 2012 Link to this post

    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.
  8. Todd
    Todd avatar
    3 posts
    Member since:
    Jul 2012

    Posted 24 Jul 2012 Link to this post

    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
  9. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 26 Jul 2012 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017