ASP.NET 2.0 has a new Theme function, which makes it easier to skin the website.
Theme implementation includes: CSS, Skin, MasterPage.
CSS is used to control the appearance of all HTML tags.
Skin is used to control the appearance of all ASP.NET server adjustments, and its CSS style can be defined through the attribute cssClass.
MasterPage is a *.aspx page template, but it is not defined in Theme.
-------------------------------------------------- ----------------------------------
·Example of creating Theme:
1. Create the App_Themes directory in the Web project. It is a predefined directory, and ASP.NET 2.0 will automatically recognize the Theme in its directory.
2. Create two subdirectories, orangeTheme and BlueTheme, in the App_Themes directory.
3. Add Skin files, such as Control.Skin, to each subdirectory under App_Themes. ASP.NET 2.0 will automatically analyze each Skin file, and the naming here only needs to be convenient for classification during development.
4. You can also add CSS files to each subdirectory under App_Themes. ASP.NET 2.0 will also automatically add every CSS file to every page that uses this style.
·Define page content and Theme style
1. default.aspx page definition is as follows:
<%@ Page Theme="OrangeTheme" %>
<html>
<head runat="server">
<title>Orange Page</title>
</head>
<body>
<form id="form1" runat="server">
Enter your name:<br />
<asp:TextBox ID="txtName" Runat="Server" />
<br /><br />
<asp:Button ID="btnSubmit" Text="Submit Name" Runat="Server"/>
</form>
</body>
</html>
2. Define as follows in the Control.Skin file on the OrangeTheme homepage:
Note: Only appearance attributes can be specified, and attributes such as AutoPastback cannot be specified.
The default unnamed Skin will define the skin for all TextBox types.
<asp:TextBox BackColor="Orange" ForeColor="DarkGreen" Runat="Server" />
<asp:Button BackColor="Orange" ForeColor="DarkGreen" Font-Bold="True" Runat="Server" />
Having a named SkinID will define the appearance for the specified TextBox type.
<asp:TextBox SkinID="Title" BackColor="Orange" ForeColor="DarkGreen" Runat="Server" />
·Use Theme in the page
1. Add Theme="Default at the top of the Aspx file <%@ Page %> " attribute. This way it can use the Default theme.
2. If you want to apply a certain Theme to the entire website, you need to define it in Web.Config.
<configuration>
<system.web>
<pages theme="OrangeTheme" />
</system.web>
</configuration>
Such a definition is equivalent to a default Theme in all website files. Theme can still be defined for each page when used.
The Skin part will use the Theme defined in the Page, and the CSS will override the CSS style sheet in the default home page.
3. After specifying the Theme, all appearances will use the ones defined in Skin. You can also specify a control's SkinID to define individual skins.
4. If you want to define Theme programmatically, it must be processed in the Page_PreInit event, as follows:
void Page_PreInit(object sender, EventArgs e)
{
Page.Theme = Request["ThemeName"];
If you need to programmatically load the MasterPage file for Page, you also need to define it here.
this.MasterPageFile = Request["MasterPageFile"];
}
Understanding these technologies will make the website more versatile.