Telerik UI for ASP.NET AJAX

Developers who want to create a custom skin for one or more Telerik control, have the following options:

  • Use the Visual Style Builder tool - this is the fastest and easiest way to create a custom skin, if you are using the tool's "Colorize" or "Shift Colors" capabilities;

  • Take an embedded skin and make changes to it until the desired look is achieved;

  • Create a custom skin from scratch;

In most cases the last option is an unnecessary overhead, unless you need to create a skin, which is totally unique in terms of look and feel, and dimensions. In order to create a custom skin from scratch, you need a better understanding for the control's HTML output and CSS classes.

Visual Style Builder

Create a Custom Skin From an Existing Embedded Skin

Here is a list of the required steps to perform:

  1. Pick a built-in skin which looks similar to your requirements. For example, the "Telerik" skin of RadColorPicker.

  2. Copy the "Common" and "Telerik" folders from "C:\Program Files\Telerik\UI for ASPNET AJAX QX YYYY\Skins" into your application folder. (If you have installed Telerik UI for ASP.NET AJAX from a ZIP file, the /Skins/ folder is in the ZIP archive root.) You can delete any unnecessary CSS files or folders inside the "Telerik" folder. Only the ColorPicker folder and ColorPicker.Telerik.css are needed for this example.

  3. Pick a name for your skin. We will use "MySkin" for the example.

  4. Rename the "Telerik" folder to "MySkin". Renaming is optional but will imply that the skin is a custom skin. Renaming the skin is required if you intend to use it together with an embedded skin with the same name on the same page. If you rename the folder it is a good idea to rename the CSS file as well, for example "ColorPicker.MySkin.css"


    Important !!!

    A similar CSS selector is used in all skins. The naming convention is .Rad[Control]_[Skin]. Here are a few examples:

    • .RadSlider_Inox

    • .RadColorPicker_Telerik

    If you rename an existing skin, you must rename all skin suffixes in the CSS class names as follows:

    .ClassName_Telerik --> .ClassName_MySkin

  5. Register the CSS file in your page. See the Skin Registration topic for more details.

  6. Set the Skin property of your RadColorPicker to "MySkin". Then set the EnableEmbeddedSkins property to false.


    Important !!!

    If you don't set EnableEmbeddedSkins to false an exception will be thrown saying that RadColorPicker cannot find an embedded skin named "MySkin". For more information you can check the How skins work and Skin registration topics.

  7. Modify CSS rules to match your visual requirements. Save the CSS file.

  8. Run the project. If all steps are performed correctly the RadColorPicker should use your newly defined skin.

Create a Custom Skin dll from an Existing Custom Skin with Skin's Assembly Builder

Telerik provides an independent tool for assembling custom skin dll file based on an existing custom skin.

The Skin's Assembly Builder lets you generate a custom skin assembly for the UI for ASP.NET AJAX controls, based on an uploaded zip file, which contains a custom skin. Note that the zip file structure should be the same as the one generated by the VisualStyleBuilder tool.

Here is a list of the required steps to perform:

  1. Once you have finalized your custom skin, the Visual Style Builder automatically packages all required files for your new skin into a single ZIP archive. In order to create a dll from this archive you should simply upload it in the Skin's Assembly Builder.

  2. Set a Skin name.

  3. Set name for the custom assembly that will be generated.

  4. Upload Telerik.Web.UI.dll.

  5. Click the "Get Assembly" button.


Note that the current version of the Skin's Assembly Builder tool does not work with 3.5 version of Telerik.Web.UI. Therefore you should use 4.0 or 4.5 version of the controls.