Among the numerous innovations of the .NET 2.0 Framework are the so-called Themes. They enable the separation of a control's look from its functionality. As a result, developers will be able to completely change the look of a control in an easy declarative manner. This improves the maintainability of your applications and eliminates the unnecessary duplication of code for shared styles.
Each Theme is a folder with one .skin file and any additional resources (such as .CSS files, images, etc). The skin file contains XML tags that are used to configure the controls on the page.
The fastest way to get started with your own custom skin is by modifying an existing skin. From http://www.telerik.com/skins, you can download all resources necessary to deploy or modify selected skins for the Telerik components. Each skin archive contains the images, CSS, and ASPX declaration needed to apply a skin in your project, as well as the original Adobe Photoshop PSD source file you will need to modify the design. For more instructions, please refer to the Readme file in the skin archive.
Assigning a Theme to a Page
An individual page can be assigned a Theme by setting the <%@ Page Theme="..." %> directive to the name of a global or application-level. A page can only have one Theme applied, but there may be multiple skin files in the theme that apply style settings to controls in the page.
 |
You can also define the applied theme for all pages in an application by specifying the <pages theme="..."/> section in Web.config. To unset this theme for a particular page, you can set the Theme attribute of the Page directive to empty string (""). |
Using Themes local to the application
Local Themes reside in the App_Themes folder directly under the application root directory. A Theme consists of a named subdirectory which may contain CSS file and/or subdirectories for static files like images. Each theme should have one or more skin files, with the .skin extension. The content of a skin file are simply definitions of the properties of the controls, used to specify how the controls will appear and behave on the page. A skin file can contain multiple control definitions, for example one definition for each control type.
Skins can be organized in a variety of ways inside a Theme's skin files. Since a Theme can contain multiple skin files, you might divide up named skins into separate files, where each skin file contained multiple control definitions with the same SkinID.
The example below shows two ways how skin files are arranged in the Theme folder.
| Three skin files in a Theme each named according to a particular SkinID value |
Skin files grouped by control type, where each skin contains a set of skin definitions for a particular control |
| |
 Copy Code |
|
/MySite1
/App_Themes
/MyThemes
Default.skin
Yellow.skin
Green.skin | |
| |
Copy Code |
|
/MySite1
/App_Themes
/MyThemes
radgrid.skin
radpanelbar.skin
RadTabStrip.skin | |
You can define different styles for controls of the same type in a skin file by creating separate definitions of the control. You can set a separate SkinID property on these control definitions to a name of your choosing, and then set this same SkinID value on controls in pages that should have this specific skin applied. In the absence of a SkinID property, the default skin (one without a SkinID property set) applies.
The source code below is an example of the definitions for a skin file for Telerik RadGrid and Telerik RadTreeView.
| |
Copy Code |
|
<%@ Register TagPrefix="radP" Namespace="Telerik.WebControls" Assembly="RadPanelebar.Net2" %>
<%@ Register TagPrefix="rad" Namespace="Telerik.WebControls" Assembly="RadMenu.Net2" %>
<radG:RadPanelbar
runat="server"
Skin="Mac"
.../>
<radT:RadMenu
runat="server"
Skin="WebBlue"
.../>
|
The properties of controls defined in the theme automatically override the local property value for a control of the same type in the target page with the Theme applied.
Example: How to create and use a theme from an already existing skin?
|
From version 4.0 on, Telerik RadMenu is distributed without predefined Themes. This is to avoid redundancy since you can easily create a Theme from one of the already existing skins which come with the control. |
This example shows how to create a theme to control the appearance of multiple instances of various controls in a single page. In particular, we will apply the Mac skin to a Telerik RadMenu and a Telerik RadPanelBar and the Telerik skin to another set of instances of the same type. We will differentiate among the skins using the SkinID property.
Goal
Eventually, we will create a web page that will look like this:
Steps to reproduce
1. Create a new Theme folder. For this example we will call it "MyTheme".
From the solution explorer, right-click on the root of the project --> Add ASP.NET Folder --> Theme.
2. Add a skin file to the theme folder.
Right-click on the "MyTheme" folder you created in step 1 --> Add new item --> Skin file.
3. Populate the skin file.
The skin file should have the following content:
| |
Copy Code |
|
<%@ Register Assembly="RadPanelbar.Net2" Namespace="Telerik.WebControls" TagPrefix="radP" %>
<%@ Register Assembly="RadMenu.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %>
<radp:radpanelbar
runat="server"
Skin="Mac"
SkinID="MacForPanelbar"
/>
<rad:RadMenu
runat="server"
Skin="Mac"
SkinID="MacForMenu"
/>
<radp:radpanelbar
runat="server"
Skin="Telerik"
SkinID="TelerikForPanelbar"
/>
<rad:RadMenu
runat="server"
Skin="Telerik"
SkinID="TelerikForMenu"
/> |
|
This is provided that you have copied the RadControls folder for Telerik RadMenu and Telerik RadPanelBar in the root of your application. Otherwise, you will need to explicitly specify the paths to the skins' css files and images. |
4. Set the theme in the page directive.
| |
Copy Code |
|
<%@ Page ... Theme="MyTheme" ... %> |
5. Set the Skin ="None" and specify the SkinID.
| |
Copy Code |
|
<radP:RadPanelbar ID="RadPanelbar1" runat="server" Skin="None" SkinID="MacForPanelbar" >
...
<radP:RadPanelbar ID="RadPanelbar2" runat="server" Skin="None" SkinID="TelerikForPanelbar">
...
<rad:RadMenu ID="RadMenu1" runat="server" Skin="None" SkinID="MacForMenu">
...
<rad:RadMenu ID="RadMenu2" runat="server" Skin="None" SkinID="TelerikForMenu">
... |
See Also