Skins use Cascading Style Sheets (CSS) to define a control's visual appearance. The CSS file needs to be registered in the page for the skin to take effect.
Automatic skin registration
If the Skin property is set to some built-in skin and EnableEmbeddedSkins is set to true (the default value) the control will
automatically register the CSS file.
Manual skin registration
If the user needs a custom or a modified skin the CSS file should be registered by hand. The skin CSS file can be registered declaratively or from code-behind.
Declarative registration
To register declaratively the skin CSS please follow these steps:
- Copy the CSS file and all required resources (e.g. images) in your application folder.
- Drag-and-drop the CSS file into your page. You should end up with the following HTML:
| [HTML] |
 Copy Code |
|
<head runat="server">
<title>Untitled
Page</title>
<link href="WinAmpClassic/Slider.WinAmpClassic.css" rel="stylesheet" type="text/css" />
</head>
|
- Optionally you can make the "href" attribute of the <link> tag application relative - insert a tilde "~/" - and add runat="server":
| [HTML] |
Copy Code |
|
<head runat="server">
<title>Untitled
Page</title>
<link href="~/WinAmpClassic/Slider.WinAmpClassic.css" rel="stylesheet" type="text/css" runat="server" />
</head>
|
Programmatic registration
You can register the CSS file of the skin by adding a HtmlLink control in the Header property of your Page. The <head> tag should
include the 'runat="server"' attribute.
| [C#] |
Copy Code |
|
HtmlLink link = new HtmlLink();
link.Href = "~/WinAmpClassic/Slider.WinAmpClassic.css";
link.Attributes.Add("type", "text/css");
link.Attributes.Add("rel", "stylesheet");
Page.Header.Controls.Add(link);
|
| [VB] |
Copy Code |
|
Dim link As New HtmlLink
link.Href = "~/WinAmpClassic/Slider.WinAmpClassic.css"
link.Attributes.Add("type", "text/css")
link.Attributes.Add("rel", "stylesheet")
Page.Header.Controls.Add(link)
|
Global skin setting for the entire web site/web application project
- If you need to register a common skin for all RadControls in your web site/web application project add the following lines in the web.config file:
| [web.config] Set the skin for all RadControls to Hay |
Copy Code |
|
<appSettings>
<!-- Sets the skin for all RadControls to Hay -->
<add key="Telerik.Skin" value="Hay"/>
</appSettings>
|
Just change the Hay with the name of the desired skin.
- If you need to globally assign a particular skin to a particular RadControl add the following lines in the web.config file:
| [web.config] Set the skin for every RadMenu instance to Sunset |
Copy Code |
|
<appSettings>
<!-- Sets the skin for every instance of RadMenu to Sunset" -->
<add key="Telerik.Menu.Skin" value="Sunset" />
</appSettings>
|
Just change the Menu with the name of the control you want - TreeView, ComboBox, Upload, etc. and the Sunset with the skin you want.
- Finally, you can combine both approaches - set the skin of all RadControls to Hay, except the Menu and ComboBox which will have the Sunset skin:
| [web.config] Combining both approaches |
Copy Code |
|
<appSettings>
<add key="Telerik.Skin" value="Hay" />
<add key="Telerik.Menu.Skin" value="Sunset" />
<add key="Telerik.ComboBox.Skin" value="Sunset" />
</appSettings>
|
Setting the value to an empty string disables the skin for the control(s).
Alternatively, take advantage of the ASP.NET 2.x Theme mechanism to specify global application style settings for RadControls.