Maybe some friends are not very clear about themes and skins. Let’s first introduce themes and skins.
1. Introduction:
Just look at the names Themes and Skins and you will know what they are used for. Now let’s talk about what they are used for (how can you still say,~_~) when you know them all? We can easily change them using Themes. Control and page styles without modifying our code and page files.
The Themes files are placed separately under an App_Themes folder and are completely separate from your program.
2. How to use Themes and Skins:
Let’s look at a very simple example first:
App_Themesdefault1.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>
You can see that we have not written any code to control the style in default.aspx, but when we run it, we find that the words on the label have become bold red. This is the most basic theme example.
App_Themes folder:
The App_Themes folder is located in the root directory of the program. App_Themes must be a subfolder of the Theme name. The subfolder can contain multiple .skin and .css files. In the figure below, two Themes are created, named default and default2:
Use themes
1. Apply Theme to a page:
If you want to apply a Theme to a certain page, modify <%@ Page Theme="..." %> directly in the aspx file. For example, if you want to apply the default2 theme to this page, set <%@ Page Theme="default2" %> OK
2. Apply the same Theme to all pages:
If you want to use the same Theme on all pages, add the sentence <pages theme="..."/> under the <system.web> node in web.config
3. Let the control not apply Theme:
In the first example, we saw that the styles of two Labels have changed, which means that the style in the .skin file has taken effect on all Labels on the page. But sometimes we want a certain Label not to apply the style in .skin. In this case, you only need to set the Label's EnableTheming property to false.
Maybe you also want different labels to display different styles. You only need to set the SkinID attribute of the label. See the example below:
App_Themesdefault1.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, you will find that the display styles of the two labels are different.
4. Other methods:
As mentioned before, using <%@ Page Theme="..." %> in the aspx file header to use the theme, and using this method to apply the style in the theme will overwrite the control attribute style you wrote in aspx. for example:
App_Themesdefault1.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>
As a result of the operation, the forecolor of all labels is red.
Using <%@ Page StyleSheetTheme="..." %> to apply a theme will not overwrite the style attribute you wrote in the aspx file:
the order in which the control applies the style attribute is as follows:
a. Style referenced by StyleSheetTheme
b. Control properties set by code (override StyleSheetTheme)
c. The style referenced by Theme (covering the first 2)
theme contains CSS:
.css files can also be used in themes. When you put the .css file in a theme directory, your .css will automatically be applied to the page that uses this theme.
3. The background code can easily change the skin of the website.
What I mentioned above is to apply themes in aspx files or web.config. However, it is obviously inconvenient to use the above method to change skins in a website like a blog where each user has a different skin.
The following will introduce how to dynamically reference the theme in the background code to solve the above situation. The theme must be applied at the earliest time when the page is requested, so 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 the different theme names set by each user from the database to easily realize that each user has a different skin.
------------------------------------------
The above are all personal opinions and experiences. If there is anything wrong, please give me your advice. Thank you!