custom stylesheet for radFormDecorator not being applied

2 posts, 0 answers
  1. mike
    mike avatar
    17 posts
    Member since:
    Jul 2011

    Posted 01 Sep 2011 Link to this post

    I have followed the instructions on http://www.telerik.com/help/aspnet-ajax/radformdecorator-creating-custom-skins.html to create a custom stylesheet but it does not seem to be applying. I have created a directory called CustomSkins and copied the FormDecorator.Forest.css file and the FormDecorator directory to it, just as a test I added a link to the css and set EnableEmbeddedSkins=False. Shouldn't that pick up and apply the Forest colors and look the same as if embedded skins was turned on and selected Forest. But in my page I'm getting no stylesheet settings. What we want to be able to do is us all the telerik styles but add items to the telerik stylesheet to handle things we have already incorporated in our apps.

    <

    head runat="server">

     <title></title>

     <link href="CustomSkins/FormDecorator.Forest.css" rel="stylesheet" type="text/css" />

     </head>

     <body>

     

     <form id="form1" runat="server">

     <div>

     <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>

     <telerik:RadSkinManager ID="radskinMgr" runat="server" ShowChooser="true"></telerik:RadSkinManager>

     <telerik:RadFormDecorator ID="RadFormDecorator1" Runat="server" DecoratedControls="All" EnableEmbeddedSkins="false" />

     <br /><br />

     <h2>This is a test page for new styles and preferences - COMING SOON IN 2011!!</h2>

     <hr />

     <h1>ODE STYLES</h1>

     <h1 class="announcement">TEXT Test for H1 - ODE Class ANNOUNCEMENT</h1>

     <h2 class="sidebar">TEXT Test for H2 - ODE Class SIDEBAR</h2>

     <h3 class="odehilite">TEXT Test for H3 - ODE Class ODEHILITE</h3>

     <b class="small">TEXT Test for ODE Class SMALL</b><br />

     <b class="larger">TEXT Test for ODE Class LARGER</b><br />

     <b class="largest">TEXT Test for ODE Class LARGEST</b>

     <h4>Text for H4</h4>

     </div>

     </form>

     </body>

     

  2.
  3. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 03 Sep 2011 Link to this post

    Hi Mike,

    Sorry for the issue you are experiencing. It is actually caused by not so cleared explanation in our help article. Please, take a look at: RadButton Crating Custom Skin the prrocess is the same, but the explanations are more detailed.

    And straight, to your issue, once you have put all your new skins into the new folder, and linked the CSS file in the head section, and set enableembeddedskins to false, you should specify using control property, which custom skin should be used, in your case if you like to use Forest skin as custom skin you should do it the following way:

    <telerik:RadFormDecorator ID="RadFormDecorator1" Runat="server" DecoratedControls="All" EnableEmbeddedSkins="false" Skin="Forest" />

    Also, do not forget to check if the background images urls in FormDecorator.Forest.css are converted from server to relative paths.

    The server url is used in the embedded skins and looks like that:

    background-image: url('<%=WebResource("Telerik.Web.UI.Skins.Forest.FormDecorator.ButtonSprites.png")%>');

    In custom skin and external stylesheet it should be with relative path depending on the folder where the resources are placed:

    background-image: url("ForestFolder/FormDecorator.ButtonSprites.png");

    If you make the necessary corrections your custom stylesheet should be applied.

    Kind regards,
    Bojo
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

Back to Top