KB's

Sitefinity CMS comes with the complete set of RadControls for ASP.NET AJAX built in and at your disposal for use in your web site project. The CMS even uses some of the controls in its toolbox in the page editor. As an example the navigation controls such as the Site Menu, Site Panel Bar and the Site Tab Strip are essentially RadControls wrapped into user controls (.ascx) in order to make them available in the control toolbox for drag and drop use. Using RadControls skins in Sitefinity CMS is essentially the same as using them in regular ASP.NET themes, you can refer to the Using skins in ASP.NET themes article for more information. This article will cover the topics of how to create your custom styles and skins for the RadControls.

 

Using the built-in skins for RadControls.

 

With the built in RadControls for ASP.NET AJAX you also get access to the built-in skins for the RadControls. Currently the RadControls come with twelve built in skins. I will use the RadMenu control as an example through the rest of this article. You can see the look and feel of the twelve built-in skins for the RadMenu below:

 

 

If you wish to use one of those skins you simply have to open the RadMenu.skin located in the theme that your pages use and tell it that it has to use the desired skin. Lets take for example the Blue with right sidebar theme that comes with Sitefinity.Open the Visual Studio and go to ~/App_Themes/Blue with right sidebar/RadMenu.skin (if this file does not exist in your theme directory you will have to create it). If I want to use the Telerik skin I just have to set the skin property:

 

 

 

Note that this will also make the Site Menu navigation control to use this skin, since it is a RadMenu wrapped into a user control (.ascx).

 

Building your own skin

 

Building custom skins for RadControls for ASP.NET AJAX in Sitefinity, like using built in skins, is the same as doing so for regular ASP.NET themes. The documentation for RadControls, contains a tutorial on how to create custom skins for each of the controls, it also contains a full list of the CSS skin file selectors that you have to use in order to build your own styling rules. For the RadMenu you can take a look at the following tutorial and article:

Tutorial: Creating A Custom Skin

CSS Skin File Selectors

 

To put the process in a nut shell, you have to create a folder in your theme directory that will hold your styles and images files. For the RadMenu you have to create a directory called Menu (e.g. ~/App_Themes/Blue with right sidebar/Menu/). If your skin is called MySkin the ~/App_Themes/Blue with right sidebar/RadMenu.skin file has to look like this:

 

And the style rules located in the ~/App_Themes/Blue with right sidebar/Menu/styles.css file have to look as bellow. Note that you have to follow the convention with using the skin name so that your theme will be able to load them:

 

Disabling/overriding the embedded styling rules

 

All RadControls come with built in styling rules embedded into the Telerik.Web.UI.dll. Those embedded styles are used for your convenience so that you do not have to build the styles from scratch every time you create your theme or use a control. Those built in style get loaded together with your custom styles, and sometimes may interfere with the styling rules that you have built. To prevent this you can use two approaches.

 

The first one is easier and quicker to apply. You just have to add !important statement to your styles that get override by the embedded style sheets. This will explicitly tell your theme that it has to use the custom styles. Here is an example:

 

 

 

The second one is disabling completely the embedded style sheets. Although this approach is "cleaner" than the above one, it involves building control style rule from the ground up and might take you some more time. If you prefer this approach you should set the EnableEmbeddedBaseStyleSheet property in your skin file. Here is an example how to do it for the RadMenu:

 

 

For more information on how to disable embedded resources, such as skins, styles and scripts, for the RadControls you can take a look at the following article: Disabling embedded resources.