Themes allow you to define how your controls look on the page, and then apply the desired look across many pages in your web application. Using a theme, you can 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.
Themes are made up of a set of elements: skins, cascading style sheets (CSS), and images.
Only one theme can be applied to a page. When a theme is applied, it overrides all local property values.
Theme structure
In r.a.d.tabstrip, themes reside in the App_Themes folder right under the root of your Telerik RadTabStrip .NET2 installation. (Typically, this will be C:\Program Files\Telerik\Telerik RadTabStrip3.0\NET2\App_Themes.)
The screenshot below shows an App_Themes folder with a sub-folder named "Outlook".
The theme folder (e.g. "Outlook") consists of:
- a subfolder, called RadTabStrip, with two sub-folders:
-
- "Img" (for the image files)
- "Styles" (for the CSS files)
- a skin file. (The skin file contains XML tags that are used to configure the controls on the page.)
 |
To use Themes in your web application with Telerik RadTabStrip, the easiest way is to copy the entire theme structure (i.e. the App_Themes folder with all necessary files and subfolders) to the root of your application. However, this structure is not obligatory: the only requirement for themes to work is that the CSS used by the theme should be accessible from the ASPX page. |
Setting a theme to define multiple controls
Skin files
The skin files of a theme contain definitions of the controls that use the theme. For example, the definitions of Telerik RadTabStrip and Telerik RadMenu in the Outlook theme are as follows:
-
Telerik RadTabStrip:
|
 Copy Code |
|
<%@ Register TagPrefix="rad" Namespace="Telerik.WebControls" Assembly="RadTabStrip.Net2" %>
<rad:RadTabStrip
SkinsPath="~/App_Themes/"
Skin="Outlook"
runat="server">
</rad:RadTabStrip> |
-
Telerik RadMenu:
|
Copy Code |
|
<%@ Register TagPrefix="radM" Namespace="Telerik.WebControls" Assembly="RadMenu.Net2" %>
<radM:RadMenu
runat="server"
CssFile="~/App_Themes/Outlook/RadMenu/styles/menu.css"
DefaultGroupCss="Office2003_MenuGroup"
ShadowColor="#D9E1F9"
ShadowWidth="4"
DefaultItemClickedCss="Office2003_MenuItemClicked"
DefaultItemCss="Office2003_MenuItem"
DefaultItemOverCss="Office2003_MenuItemOver"
ImagesBaseDir="~/App_Themes/Outlook/RadMenu/Img/" >
</radM:RadMenu> |
|
If you need to reorganize the theme folder, or move the App_Themes folder, make sure you update the values of properties such as SkinsPath (Telerik RadTabStrip) and CssFile (Telerik RadMenu). Check for other properties that need to be updated (such as ImagesBaseDir in Telerik RadMenu) as well. |
Organize skins
You can organize your skins in different ways. Below is an example of two possible approaches:
| Three skin files in a theme, each named after 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
/Outlook
Default.skin
Yellow.skin
Green.skin | |
|
Copy Code |
|
/MySite1
/App_Themes
/Outlook
RadTabStrip.skin
radpanelbar.skin | |
To use themes with skins from your RadControls/skins folder, you need to open the RadControls/skins folder and copy the skin folder (for example, WinXP) to your App_Themes/<YourTheme> folder.
Assigning a theme
There are two ways to assign a theme:
- by setting the
<%@ Page Theme="..." %> directive;
This setting works within the particular page and has to be repeated for each page.
- at the application level, by specifying the
<pages theme="..."/> section in the Web.config file. To disable a theme for a particular page, set the Theme attribute of the page directive to an empty string ("").
See Also