Edit this page

How to Load Skins from External Assemblies

How to load skins from external assemblies

With the new Q1 2011 release, developers will be able to load skins from an external assembly. For demonstration purposes, we will modify RadWindow's Black skin and set it's loading background to red. Next we will embed the skin into an external assembly and we will use the new skin with the RadWindow control. The steps below will show how to accomplish this.

  1. Create a new class project and add a reference to the Telerik.Web.UI assembly

  2. Drop all skin related files for your control(s) in the project and mark them as embedded resources (right click, select Properties and from the Build Action dropdown choose Embedded Resource).

  3. Modify the skin files - rename them, change the CSS properties, etc. The main point here is that you will also need to rename the addresses of the images in these files. Because of the specifics of the approach explained below, it is convenient to use the skin files from the Telerik UI for ASP.NET AJAX source code.Here lies the first tricky part – the webresource links in our css files are of the type

    C#

    background-image:url('<%=WebResource("Telerik.Web.UI.Skins.Black.Common.loading.gif")%>');
    

    Note the name of the resource “Telerik.Web.UI.Skins.Black.Common.loading.gif”. The name is generated by using the assembly name (Telerik.Web.UI) + folder name (Skins/Black/Common/) + file name (loading.gif). If we want to prevent replacing all resource names in the skin CSS, then we must name our class project “Telerik.Web.UI.Skins” and put all resources in its root folder. This way the end result will be the same (Telerik.Web.UI.Skins + Simple/Common/ + loading.gif). To extend the demonstration, we will rename the Black skin to BlackAndRed - this means that you will need to rename all instances of Black in the CSS files to BlackAndRed. More information on how to create a custom skin is available in the Controlling Visual Appearance section in the documentation.

  4. Create a class (must be named the same as the control you will skin) and add EmbeddedSkin attributes to the class definition to tell which skins will be loaded from it. For example:

    C#

    namespace Telerik.Web.UI.Skins
    {
        //add EmbeddedSkin attributes to the class definition to tell which skins will be loaded from it
        [Telerik.Web.EmbeddedSkin("Window", null, typeof(RadWindow))] //base stylesheet
        [Telerik.Web.EmbeddedSkin("Window", "BlackAndRed", typeof(RadWindow))] //new black skin
    
        public class RadWindow
        {
    
        }
    }
    

    The above class defines a base CSS for the Window control and a skin “BlackAndRed” for the Window control as well. Note the third parameter of the attribute – it is very important to set it so in the end our skin registrar knows which assembly is going to hold the resources

  5. Add WebResource attributes for all the resources from step 3 in the new assembly, e.g.:

    C#

    // Add WebResource attributes for all the resources in the new assembly
    
    //base stylesheet
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.Window.css", "text/css", PerformSubstitution = true)]
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.Common.ModalDialogAlert.gif", "image/gif")]
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.Common.ModalDialogConfirm.gif", "image/gif")]
    // Black Skin
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.BlackAndRed.css", "text/css", PerformSubstitution = true)]
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.BlackAndRed.gif", "image/gif")]
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.CommandButtonSprites.gif", "image/gif")]
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.WindowHorizontalSprites.gif", "image/gif")]
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.WindowVerticalSprites.gif", "image/gif")]
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.WindowHorizontalSprites.gif", "image/png")]
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.WindowVerticalSprites.gif", "image/png")]
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.Icon.gif", "image/gif")]
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Common.loading.gif", "image/gif")]
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Common.loading_small.gif", "image/gif")]
    

    note that you have the resource name here as well – if using a custom name for the skins assembly, the resource must be renamed appropriately

  6. Compile our new assembly and put it in the bin folder next to Telerik.Web.UI or in the GAC.

  7. In the Web.config file for the web application, add a new appSettings entry with the name of the assembly, so we know where to look for the skins:

    XML

    <appSettings>
        <add key="Telerik.ScriptManager.TelerikCdn" value="Disabled"/>
        <add key="Telerik.StyleSheetManager.TelerikCdn" value="Disabled"/>
        <!--Add this key to enable the skins from external assembly-->
        <add key="Telerik.Web.SkinsAssembly" value="Telerik.Web.UI.Skins"/>
        <!--END-->
    </appSettings>
    

    (obviously, if skins assembly is in the GAC, you must use its full name)After the above steps, you can just use the control with the custom skin without setting any additional properties:

    ASP.NET

    <telerik:RadWindow RenderMode="Lightweight" 
        ID="RadWindow1" 
        runat="server" 
        NavigateUrl="http://www.telerik.com"
        VisibleOnPageLoad="true" 
        Skin="BlackAndRed"
        ShowContentDuringLoad="false">
    </telerik:RadWindow>
    

The above approach is fully compatible with RadStyleSheetManager – the custom skins will be combined along with the rest of the CSS.

And a final note – it is possible to have one of the default skins in a custom assembly – for example you customize the Hay skin and put it in a custom class project by following the steps above. Once you set the Telerik.Web.SkinsAssembly setting in the web.config, the Hay skin will no longer be loaded from Telerik.Web.UI even if it is present there as well.

A sample project demonstrating this approach is available in the following Code Library: How to load skins from external assemblies