ASP.Net Themes with Skin File
A theme is a collection of property settings that allow you to define the look of pages and controls and then apply the look consistently across pages in a Web application, across an entire Web application, or across all Web applications on a server.
Themes and Control Skins
- Themes are made up of a set of elements: skins, cascading style sheets (CSS), images, and other resources. At a minimum, a theme will contain skins.
- Themes are defined in special directories in your Website or on your Web server.
- A skin file has the file name extension .skin and contains property settings for individual controls such as Button, Label, TextBox, or Calendar controls.
- Control skin settings are like the control markup itself but contain only the properties you want to set as part of the theme.
- For example, the following is a control skin for a Button control:
- <asp:button runat=”server” BackColor=”lightblue” ForeColor=”black” />
- You create .skin files in the Theme folder.
- A .skin file can contain one or more control skins for one or more control types.
- You can define skins in a separate file for each control or define all the skins for a theme in a single file.
There are two types of control skins, default skins and named skins:
- A default skin automatically applies to all controls of the same type when a theme is applied to a page. A control skin is a default skin if it does not have a SkinID attribute. For example, if you create a default skin for a Calendar control, the control skin applies to all Calendar controls on pages that use the theme. (Default skins are matched exactly by control type, so that a Button control skin applies to all Button controls, but not to LinkButton controls or to controls that derive from the Button object.)
- A named skin a control skin with a SkinID property set. Named skins do not automatically apply to controls by type. Instead, you explicitly apply a named skin to a control by setting the control’s SkinID property. Creating named skins allows you to set different skins for different instances of the same control in an application.
Cascading Style Sheets
- A theme can also include a cascading style sheet (.css file).
- Moreover, When you put a .css file in the theme folder, the style sheet applied automatically as part of the theme.
- You define a style sheet using the file name extension .css in the theme folder.
Theme Graphics and Other Resources
- Themes can also include graphics and other resources, such as script files or sound files. For example, part of your page theme might include a skin for a TreeView control. As part of the theme, you can include the graphics used to represent the expand button and the collapse button.
- Typically, the resource files for the ASP.Net Themes are in the same folder as the skin files for that theme, but they can be elsewhere in the Web application, in a subfolder of the theme folder.
Scoping ASP.Net Themes
You can define ASP.Net Themes for a single Web application, or as global themes that can use by all applications on a Web server.
After a theme is defined,
- it can place on individual pages using the Theme or StyleSheetTheme attribute of the @ Page directive
- It can be applied to all pages in an application by setting the <pages> element in the application configuration file. If the <pages> element defined in the Machine.config file, the theme will apply to all pages of Web applications on the server.
- A page theme is a theme folder with control skins, style sheets, graphics files and other resources created as a subfolder of the \App_Themes folder in your Web site.
- Each theme is a different subfolder of the \App_Themes folder.
The following example shows a typical page ASP.Net Themes, defining two themes named BlueTheme and PinkTheme.