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:
- Telerik Control Guide – An overview of Telerik controls, including available skins.
- Telerik Visual Style Builder – Generates CSS and some images for skinning Telerik controls.
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.
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.