ASP.NET - Working with Themes
ASP.NET themes are a collection of properties that enables to define the appearance of Web pages and controls on the website.
A theme can include skin files, cascading style sheet files (.css files), and graphics. By applying a theme, one can give Web pages a consistent appearance across the website.
Creating a Theme
A theme is used in Web applications by creating a skin file and attaching it to the Web pages on which the theme has to be applied. Skin files are used to define the property settings for ASP.NET Web server controls. Skin files are created and stored in a theme folder. This theme folder is placed inside the folder named App_Themes. All the themes in a Web application are placed inside the App_Themes folder. This folder is placed inside the top-level directory of the Web application.
Multiple themes can be defined for the Web application. Each theme in a Web application can be defined in a separate folder inside the App_Themes folder which contains the skin file(s) for the theme.
Applying a Theme
One can apply a theme either to a particular Web page or to all the Web pages on a website.Applying a theme to a Web Page: - To apply a theme to a particular Web page, one needs to bind the theme at the page level. To bind the theme at the page level, set the "Theme" attribute of the @ Page directive. For example, the following @ Page directive specifies that the theme, MyTheme, is applied to the We page:
<%@ Page Language="C#" AutoEventWireup="true" CodeFiles="Default.aspx.cs"Inherits="_Default" Theme="Mytheme" %>
To apply a stylesheet theme to a Web page, there is a need to set the StyleSheetTheme attribute of the @ Page directive as shown in the following directive:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFiles="Default.aspx.cs"Inherits="_Default" StyleSheetTheme="MyTheme" %
Applying a Theme to a Website:-To apply a theme to a Website, one needs to bind the theme at the Website level. To bind the theme at the website level, the styles and skins are applied to all the Web pages and controls on the website.To apply a theme to the entire website, the <pages> element in the web.config file has to be configured as shown below:-
<configuration>
<system.web>
<pages theme="MyTheme">
....
</pages>
</system.web>
</configuration>
Creating Multiple skins
Skin files standardize the look and feel of controls across all the Web pages on a website. However, there may be situations where
multiple occurrences of a control to appear differently on the same Web page. For example, each label on the Web page can look different depending on whether they are being used for headings or body text.When more than one theme is created for the same control, ASP.NET generates an error stating that a control can have a single default skin. This error can be avoided by using a named skin. A named skin can be created by supplying the SkinID attribute. the following markup is used to create multiple skins for a button control.
<asp:Button runat="server" ForeColor="White" Backcolor="Orange"/>
<asp:Button runat="server" ForeColor="White" Backcolor="Green" SkinId="AlternateSkin"/>
In the preceding markup, the first is the default skin whereas the second with the SkinId attribute is known as the named skin. Default skins are applied automatically whereas named skins can be applied to a control by setting the SkinID attribute of the control as shown in the following code-snippet:-
<asp:button ID="Button1" runat="server" SkinId="AlternateSkin"/>
In the preceding example, the named skin, AlternateSkin, is applied to the button control.