Perhaps some friends are not very clear themes, skins. Below introduce themes, skins.
First, Introduction:
A look at the themes, skins these 2 names all know is used to do what, the following is what it is to do (how all know also said, ~_~), using themes we can easily change the control, the style of the page, without the need to modify our code and page files.
Themes files are separately placed under 1 App_Themes folders and are completely separate from your program.
Ii. How to use themes and skins:
Let's look at a very simple example:
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">
http://www.w3.org/1999/xhtml" >
<title>page with Example Theme applied</title>
<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>
You can see that we didn't write a control style code in default.aspx, but running to find the word on the label became Bold Red, which is one of the most basic theme examples.
App_Themes folder:
The App_Themes folder is located under the root directory of the program, App_Themes must be a subfolder of the theme name, and a subfolder can contain multiple. Skin and. css files. The following figure establishes 2 theme, named Default and DEFAULT2:
Using themes
1. Apply theme in 1 pages:
If you want to apply Theme to a 1 page, modify the <%@ page theme= "..." directly in the ASPX file%> For example you want this page to apply Default2 Theme, set <%@ page theme= "DEFAULT2"% > Just OK
2. Apply with 1 theme on all pages:
If you want to use the same theme on all pages, add a sentence to the <system.web> node in web.config <pages theme= "..."/>
3, let the control not apply theme:
In the 1th example, we see that the style of the 2 labels has changed, that is, the style of the. skin file all the labels on the page work. But sometimes we want a 1 label to not apply to the style in skin, when you just set the label's EnableTheming property to False.
Maybe you want different labels to show different styles, you can just set the label's SkinID attribute, 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">
http://www.w3.org/1999/xhtml" >
<title>page with Example Theme applied</title>
<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>
After running, you will find that 2 labels show different styles.
4. Other methods:
It has been said that using the <%@ Page theme= "..."%> in the ASPX file header uses Theme, and using this method to apply the style in Theme will overwrite the control property style you write in aspx. Like what:
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">
http://www.w3.org/1999/xhtml" >
<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>
Run the result, all the label's ForeColor are red.
Using the <%@ Page stylesheettheme= "..."%> application theme will not overwrite the attribute style you wrote in the ASPX file:
Control applies the Style property in the following order:
A, StyleSheetTheme style of reference
B, code-set control properties (overlay StyleSheetTheme)
C, theme reference style (covering the front 2)
The theme contains CSS:
The. css file can also be used in theme, and when you put a. css file in a 1 theme directory, you will automatically apply your. css in a page that uses this theme.
Third, the background code easy for the site to change the house skin
All of the above are in the ASPX file or Web.config application of theme, and in a blog such as each user has a different skin site in the above method to implement the skin is obviously inconvenient.
The following describes how in the background code in the dynamic reference theme to solve the above situation, theme must be in the first page requested by the application, so we have to write in the Page_PreInit event code, the code is very simple, on the 1 sentence:
Page.theme = "...";
Here we can easily realize that each user has a different skin by reading the different theme names of each user setting from the database.
------------------------------------------
These are personal views and experience, if there is no place, but also please a lot of guidance, thank you!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
