New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Creating a Custom Skin

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

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.

After you create the custom skin you will need to register it on the page where it will be used.

Telerik ThemeBuilder application

This is an easy to use application that enables you to customize the default look and feel. It can be used to customize only skins for Lightweight RenderMode.

Read the documentation for illustration and examples on how to create a custom theme.

Launch the application.

The Theme Builder application can be used to create or modify themes used in Lightweight RenderMode

Visual Style Builder

If you would like to modify a skin that will be used in Classic RenderMode you can use the StyleBuilder tool.

launch the online tool

read the tool overview on the Telerik website

The Classic render mode is in maintenance mode since Q3 2015 and the Visual Style Builder tool, which produces skins for the Classic rendering only, is in maintenance since May 2016. We recommend using the Lightweight render mode and the provided Telerik ThemeBuilder for ASP.NET AJAX tool.

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\Progress\UI for ASP.NET AJAX RX 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"

    A similar CSS selector is used in all skins. The naming convention is .Rad[Control]_[Skin]. For example .RadSlider_Inox or .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.

    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

As of 2021, the Skin Assembly Builder is discontinued and not supported since it used to work for Classic render mode skins and was not compatible with the skin files produced by the Telerik ThemeBuilder for ASP.NET AJAX app. If you want to create a custom skin assembly for either the Classic or Lightweight render mode, download the source code from the Download section of your account, modify one of the built-in skins in the the Telerik.Web.UI.Skins project and build the Telerik assemblies.

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.

In this article
Not finding the help you need? Improve this article