Use themes for website skin replacement

I. Introduction:

With themes, we can easily change the control and page style without modifying our code and page files. The themes file is separately placed under an app_themes folder, which is completely separated from your program.

Ii. How to use themes and skins:

First look at a very simple instance:

App_themes \ Default \ 1. Skin file code:

<Asp: label font-bold = "true" forecolor = "red" runat = "server"/>

Default. aspx: File Code:

＜%@ Page Language="C#" Theme="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 id="Head1" runat="server"＞
＜title＞Page with Example Theme Applied＜/title＞
＜/head＞
＜body＞
＜form id="form1" runat="server"＞
＜asp:Label ID="Label1" runat="server" Text="Hello 1" /＞＜br /＞
＜asp:Label ID="Label2" runat="server" Text="Hello 2" /＞＜br /＞
＜/form＞
＜/body＞
＜/html＞


We can see in default. aspx did not write the code on how to control the style, but it was found that the words on the label changed to bold red. This is the most basic theme example.

App_themes Folder:

Hosts file. Create two theme names: Default and default2:

Use themes

1. Apply theme on one page:

To apply theme to a page, modify <% @ page theme = "... "%>. If you want to apply default2 theme to this page, set <% @ page theme =" default2 "%> to OK.

2. Apply the same theme on all pages:

If you want to use the same theme on all pages, add <pages theme = "..."/> to the <system. Web> node in Web. config.

3. Do not apply theme to the control:

In the 1st example, we can see that the style of the two labels has changed, that is, the style in the. Skin file takes effect for all labels on the page. But sometimes we want a label not to apply the style in. Skin. You only need to set the enabletheming attribute of the label to false.

Maybe you want different labels to display different styles. You only need to set the skinid attribute of the label. See the following example:

App_Themes\default\1.skin

＜asp:label runat="server" font-bold="true" forecolor="Red" /＞
＜asp:label runat="server" SkinID="Blue" font-bold="true" forecolor="blue" /＞

deafult.aspx

＜%@ Page Language="C#" Theme="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 id="Head1" runat="server"＞
＜title＞Page with Example Theme Applied＜/title＞
＜/head＞
＜body＞
＜form id="form1" runat="server"＞
＜asp:Label ID="Label2" runat="server" Text="Hello 2" SkinID="Blue" /＞＜br /＞
＜asp:Label ID="Label3" runat="server" Text="Hello 3" /＞＜br /＞
＜/form＞
＜/body＞
＜/html＞

After running, the two labels are displayed in different styles.

4. Other methods:

As mentioned above, use <% @ page theme = "... "%> to use theme. Applying the theme style in this method will overwrite the style of the control property you wrote in Aspx. For example:

　　App_Themes\default\1.skin

＜asp:Label Font-Bold="true" ForeColor="Red" runat="server" /＞

　　default.aspx

＜%@ Page Language="C#" Theme="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 id="Head1" runat="server"＞
＜/head＞
＜body＞
＜form id="form1" runat="server"＞
＜asp:Label ID="Label1" runat="server" Text="Hello 1" /＞＜br /＞
＜asp:Label ID="Label2" runat="server" Text="Hello 2" ForeColor="blue" /＞
＜/form＞
＜/body＞
＜/html＞

Run the result. The forecolor of all labels is red.

Using <% @ page stylesheettheme = "..." %> the app theme will not overwrite the attribute style you wrote in The aspx file:

The order in which the style attribute of the control is applied is as follows:

A. stylesheettheme reference Style

B. control attributes set by code (overwrite stylesheettheme)

C. Style referenced by theme (covering the first two)

Theme contains CSS:

Optional

Iii. Background code for easy website changes

All of the above are in the aspx file or web. apply theme in config, and it is obviously inconvenient to use the above method to implement skin in different skin websites for every user such as blog.

The following describes how to dynamically reference theme in the background code to solve the above problem. theme must be applied at the earliest stage of page request, therefore, we must write code in the page_preinit event. The code is very simple, just one sentence:

Page. theme = "...";

Here, we only need to read different theme names set by each user from the database, so that each user can have different skin easily.