ASP. NET 2.0 themes and skins for website beautification-reprint

The topic and appearance are Asp. NET 2.0, using ASP. the "theme and appearance" function of NET 2.0 can break down style and layout information into separate file groups, collectively referred to as "theme ". The topic can then be applied to any site, affecting the appearance of pages and controls on the site. In this way, you can easily change the style of the site by changing the topic, without editing the pages of the site. You can also share topics with other developers. The "theme and appearance" function of ASP. NET 2.0 can be used to easily control the beauty of the website.

ASP. NET provides some functions for customizing the appearance or style of pages and controls in applications. Controls Support the style object model, which is used to set style attributes such as font, border, background color, foreground color, width, and height. Controls also fully support Cascading Style Sheets (CSS) that separate style settings from control properties ). You can define style information as a control property or CSS, or you can define this information in a separate file group named theme to apply it to all or part of pages of an application. The style of each control is specified as skin in the topic.

"Theme", which provides a simple way to set the controls and page definition styles on the site independent of the application pages. The advantage of multiple themes is that you do not need to consider the style when designing the site, and you do not need to update the page or application code when applying the style in the future. In addition, you can obtain custom themes from external sources to apply style settings to applications. The advantage of a topic is that style settings are stored in one location and can be maintained independently by applications that apply the topic.

The following example shows that the page has the same topic. Apply this topic to specify the control style settings. Note that this page does not need to contain any style information. The topic automatically applies the style attribute to the control of the page at runtime.

Create a new web project, click "Add new project", select "theme appearance", name it "button. Skin", and click "add", as shown in 1.

Figure 1

After you click "add", the following dialog box is displayed. Figure 2 shows whether to add the topic file to the "app_themes" folder. In the application, the topic file must be stored in the app_themes folder in the root directory. The topic is composed of named subdirectories in the folder. This subdirectory contains one or more. A collection of appearance files with the skin extension. A topic can also contain subdirectories of CSS files and/or static files such as images. Click "yes" to add a topic named "button" to the Web. 3

Figure 2 Figure 3

We can see that there is a created topic button under the app_themes folder, and there is a button under the button folder. the skin file. This is the topic file we added. Double-click the button. the skin file to add skin settings code for it.
The Code is as follows:

<Asp: button runat = "server" bordercolor = "yellow" backcolor = "yellow" borderstyle = "dotted"/> <Asp: button runat = "server" bordercolor = "blue" backcolor = "white" skinid = "blue"/> <Asp: button runat = "server" bordercolor = "red" backcolor = "red" width = "150" borderwidth = "2px" skinid = "red"/>

From the code, we can see that we have set three skin themes for the button control. <asp: button runat = "server" bordercolor = "yellow" backcolor = "yellow" borderstyle = "dotted"/>. This is the default skin, on the web page, we use the default settings when the button control is used. <asp: button runat = "server" bordercolor = "blue" backcolor = "white" skinid = "blue"/>, <asp: button runat = "server" bordercolor = "red" backcolor = "red" width = "150" borderwidth = "2px" skinid = "red"/> set skinid to blue and red topic skin.

From the preceding example, you can note that the content of the appearance file is only a control definition (if these definitions appear on the page ). An appearance file can contain multiple control definitions, for example, one definition for each control type. The control properties defined in the topic automatically override the local property values of the same type of controls on the target page of the topic.
A topic can be at the application or computer level (globally applicable to all applications ). As mentioned above, application-level themes are stored in the app_themes directory under the application root directory. The global topic is stored in ASP. ASP. NET installation directory. in the "themes" directory under the netclientfiles folder, for example, % WinDir % \ Microsoft. net \ framework \ <version> \ ASP. netclientfiles \ themes. For IIS websites, the global topic is Inetpub \ wwwroot \ aspnet_client \ system_web \ <version> \ themes.

After setting the application topic, how can we specify a topic for the page? We add four buttons to the page and set them to 4.

Figure 4

The Code is as follows:

<% @ Page Language = "C #" autoeventwireup = "true" theme = "button" codefile = "default. aspx. cs" inherits = "_ default" %> <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <Head runat = "server"> <Title> No title page </title> </Head> <Body> <Form ID = "form1" runat = "server"> <Div> <Asp: button id = "button1" runat = "server" text = "button"/> & Nbsp; default skin button control <br/> <Br/> <Br/> <Asp: button id = "button2" runat = "server" text = "button" skinid = "blue"/> & Nbsp; button control named skin skinid = "blue" <br/> <Br/> <Br/> <Asp: button id = "button3" runat = "server" text = "button" skinid = "red"/> & Nbsp; Name skin skinid = "red" button control <br/> <Br/> <Br/> <Asp: button id = "button4" runat = "server" backcolor = "darkorange" bordercolor = "# c000c0" Forecolor = "yellow" text = "button" width = "174px" enabletheming = "false"/> & Nbsp; disable the theme button control <br/> & Nbsp; </div> </Form> </Body> </Html>

As shown above, set the <% @ page "theme =" button "%> command to the name of the global topic or application-level topic (the name of the folder under themes or app_themes directory ), you can specify a topic for a single page. Only one topic can be applied to one page, but multiple appearance files can be contained in the topic to apply style settings to controls on the page. In this way, the properties set in button. Skin are applied to the page. You can also specify the <pages theme = "..."/> section in Web. config, or define the topic of the Application for all pages in the application. To unset this topic for a specific page, you can set the theme attribute of the page command to a null string (""). Note that a topic cannot be applied to the master page.

There are four buttons in the page. The first three buttons are applied. for the topic set in the skin file, the button1 control applies the button. the default skin set in skin; The button2 control applies the button. in skin, skinid is the skin named Blue. The button3 control applies the button. skinid in skin is the skin named Blue. It is easy to specify the skin topic for the control. You only need to specify the corresponding skinid attribute, as shown in Figure 5.

 

Figure 5

By default, control definitions in the appearance file are applied to all controls of the same type on pages of applications affected by the topic. However, you may want controls of the same type to not use the appearance in the application. For example, you may want the button4 control to not use the theme set in the button. Skin file. In this example, you can also disable the topic of the control by setting the enabletheming attribute to false to exclude a specific control from the topic. <asp: button id = "button4" runat = "server" backcolor = "darkorange" bordercolor = "# c000c0" forecolor = "yellow" text = "button" width = "174px" enabletheming =" false "/>.

Run this program, 6