How to load skins from external assemblies

Question

I am trying to store some custom skin in a dll.and will use it to theme telerik controls of my project. I followed this guide, and I successfully get the custom skin to theme the radWindow control from the dll.but for others control I fail, when I try to skin radtabStrip I get this error:

Telerik.Web.UI.RadTabStrip with ID='ctl00' was unable to find an embedded skin with the name 'TelerikYouthful'. Please, make sure that the skin name is spelled correctly and that you have added a reference to the Telerik.Web.UI.Skins.dll assembly in your project. If you want to use a custom skin, set EnableEmbeddedSkins=false.

I have no idea what to put for the 1st parameter for this line below that mention in the guide

[Telerik.Web.EmbeddedSkin("Window", "BlackAndRed", typeof(RadWindow))]

can anyone tell the correct way to do this?

Answer 1

When creating custom skins, there are two parts that you need to do:

1. Declare all the resources you are going to use;
2. Register the skins.

If you are not familiar with embedded resources and / or web resources, I suggest that you start with the following articles:

1. Article on embedded resources as a general -- http://www.codeproject.com/Articles/3089/Understanding-Embedded-Resources-in-Visual-Studio
2. Article on web resources -- http://www.codeproject.com/Articles/12997/WebResource-ASP-NET-2-0-explained

Declaring resources

Now that we are on the same page for web resources, let's begin.

As noted in the articles a fully qualified resource name is DefaultNameSpace.[Path.To.File.].FileName with path to file being optional e.g. you can place all your files in the root of your project.

The default namespace of your skin assembly project is available from the right click -> properties menu.

The folder path, though optional, is nice to have, as it helps dealing with multiple skins in a single assembly. Assuming that your skin name is "TelerikYouthful", then you should have a folder named "TelerikYouthful" in the root of your project.

In it, you must have a file named "Window.TelerikYouthful.css". When you add the file, make sure you set the proper build type: right click -> properties, set build type to Embedded Resource.

After having those two set up, it's time to declare the resource. Again, you can use a single file, but I prefer using separate. In the root of your project, create a file RadWindow.Skins.cs.

In it add the following lines:

using System.Web.UI;

#region TelerikYouthful 
[assembly: WebResource("CustomSkinAssembly.TelerikYouthful.Window.TelerikYouthful.css", "text/css", PerformSubstitution = true)]
#endregion

The using is needed so you don't write System.Web.UI.WebResource every time. Then comes the fully qualified resource name: my default namespace is CustomSkinAssembly; my path is TelerikYouthful, file name is Window.TelerikYouthful.css.

The type string is obvious.

Perform substitution is needed so you could reference web resources inside the CSS file.

You can build your project now and check the output DLL with a tool like Reflector, JustDecompile, DotPeek etc. to check if the file is indeed embedded.

Registering a skin

Next you need to register the skin. To do so, in your default namespace you need to add the class of the control you want to skin and to annotate that class with an EmbeddedSkin attribute e.g.:

using System.Web.UI;
using Telerik.Web;

#region TelerikYouthful 
[assembly: WebResource("CustomSkinAssembly.TelerikYouthful.Window.TelerikYouthful.css", "text/css", PerformSubstitution = true)]
#endregion

namespace CustomSkinAssembly
{
    [EmbeddedSkin("Window", "TelerikYouthful", typeof(RadWindow))]
    public class RadWindow
    {
    }
}

Note: I've added a using for Telerik.Web, so we do not use Telerik.Web.EmbeddedSkin all the time.

Now you can build the project and you should be able to use the skin.