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\RadControls for ASPNET AJAX \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"

    Caution

    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.

    Caution

    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.