Changing Telerik skins

Several content items throughout the product use Rad Controls developed by Telerik. These controls require a few steps to style, and Telerik resources can help you get started:

Every [theme].skin file lists all of the Telerik skins that it uses to style controls. If a control does not explicitly define a theme, then it uses the Default Telerik skin.

In This Article 

Rad Window control

This control is the pop-up window that we see in many content items. Its skin is set by the following two lines in the Orion.skin file:

<asiweb:Window runat="server" Skin="Metro" />
<asiweb:WindowManager runat="server" Skin="Metro" />

Metro is a skin designed by Telerik and is available on most Telerik controls, along with a handful of other Skins. You can preview available Telerik skins for this control.

Note: Telerik skins are easy to switch out and virtually maintenance-free. However, they are difficult to customize, so avoid this route unless you can use the skins as-is.

Rad Tab Strip

This control is used by the Content Collection Organizer and Contact Address Editor content items, and most other places where you see a tab strip. The following line defines the skin:

<telerik:RadTabStrip runat="server" Skin="Orion" EnableEmbeddedSkins="false" />

The definition for this look and feel is near the bottom of the 99-[theme].css file, under the heading RadTools Styles.

Rad Menu control

This control displays the primary navigation area. There is a wrapper for this control called PageNavR. The following line defines the skin:

<asi:PageNavR runat="server" Skin="Orion" EnableEmbeddedSkins="false" … />

The styling for the Rad Menu is located in the Menu.[theme].css file, and the image sprite is under [theme]\Menu\rmSprite.png. The easiest way to customize this control is to use Telerik’s Visual Style Builder.

Note: This tool works best in Internet Explorer.