Themes, Skins

I. Introduction:
The themes and skins names all know what they are used for. Let's talk about what they are used ,~ _~), With themes, we can easily change the style of controls and pages without modifying our Code And page files.
The themes file is placed under an app_themes folder separately. Program Is completely separated.

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, named 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

3. Background code easily changes the website to another website
the previous sections are on 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 have to write code in the page_preinit event. The code is very simple, just one sentence:
page. theme = "... ";
Here we only need to read the different theme names set by each user from the database, so that each user can have different skin easily.