Themes in ASP.

NET
Themes in ASP.NET: ASP.NET themes are a collection of properties that enable you to define the appearance of Web pages and controls on your website. A theme can include skin files, cascading style sheet files (.css files) and graphics. Themes give a consistent appearance to Web pages across website.

Creating Theme: 1. For using theme in a web application, you can create a skin file and attach it to the Web pages on which you want to apply the theme. 2. Skin files define the property settings for ASP.NET Web server controls. 3. Theme files are created and stored in a theme folder. This theme folder is placed inside the folder named App_Themes which is placed inside the top-level directory of Web application. 4. You can define multiple themes for your Web application but you can apply only one theme on a given page at a time. 5. Each theme in a web application can be defined in a separate folder inside the App_Themes folder. 6. To create a skin file (.skin is extension for theme files) for providing consistent appearance to all the button controls in web page. We will specify ForeColor and BackColor properties of button controls. <asp:Button runat=server ForeColor=White BackColor=Orange/> The runat=server attribute is mandatory. Other attributes are used as per the requirement. 7. ASP.NET treats all the skin files in a theme directory as part of the same theme definition. Applying Theme: 1. You can apply a theme either to a particular Web page or to all the Web pages on a website. 2. If you apply the theme to the entire website, the theme settings are applied to all the Web pages on the website. Applying a Theme to a Web Page 1. For this, you need to bind the website at the page level. 2. In this case, the style and skins are only applied to that Web page and its controls. 3. Set the Theme attribute of the @Page directive. <%@ Page Language=C# AutoEventWireup=true CodeFile=Default.aspx.cs Inherits=_Default Theme=MyTheme %>

Themes in ASP.NET
4. If you have defined settings for the control locally as well as in the theme, the settings defined in the theme override the local control settings. 5. However, if you have used a stylesheet theme, the local page settings override the settings defined in the stylesheet theme. 6. To apply a stylesheet theme to a Web Page, you need to set the StylesheetTheme attribute of the @Page directive as shown in the following directive: <%@ Page Language=C# AutoEventWireUp=true CodeFile=Default.aspx.cs Inherits=_Default StyleSheetTheme=MyTheme %> 7. In case you dont want the theme property to be applied to a particular control, use EnableTheming property of that control on the web page to false, as <asp:Button ID=Button1 runat=Server EnableTheming=false/> 8. No theme will be applied to the button control, Button1. However, the theme settings will be applied to other button controls, whose EnableTheming property is not false. Applying Themes Dynamically: Set the Page.Theme or Page.StyleSheetTheme property in the Page_PreInit event. protected void Page_PreInit (object sender, EventArgs e) { Page.Theme = MyTheme; //name of the folder where skin file is // stored. } Similarly, you can set the SkinID property of a control dynamically to attach it to a different named skin. Applying a Theme to a Website 1. For this bind the theme at the website level. 2. This will apply the styles and skins to all the web pages and controls on the website unless you override a theme for an individual Web page. 3. Configure the <pages> element in the web.config file, as shown: <configuration> <system.web> <pages theme=MyTheme> </pages> </system.web> </configuration>

Themes in ASP.NET
Creating Multiple Skins You can create multiple skin files where you want multiple occurrences of a control to appear differently on the same Web page. When you create more than one theme for the same control, ASP.NET generates an error stating that a control can have a single default skin. To avoid this we use named skin. Create named skin by supplying the SkinID attribute. <asp:Button runat=server ForeColor=White BackColor=Orange /> <asp:Button runat=server ForeColor=White BackColor=Green SkinID=AlternateSkin/> Default skins are applied automatically whereas named skins are applied to a control by using the SkinID attribute of the control, as: <asp:Button ID=Button1 runat=server SkinID=