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

custom stylesheet for radFormDecorator not being applied

1 Answer 48 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
mike
Top achievements
Rank 1
mike asked on 01 Sep 2011, 06:59 PM
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>

 

1 Answer, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 03 Sep 2011, 07:27 AM
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 >>

Tags
FormDecorator
Asked by
mike
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Share this question
or