I. Overview
With themes, we can easily change the style of controls and pages without modifying ourCodeAnd page files. The themes file is placed under an app_themes folder separately.ProgramIs completely separated.
Ii. composition elements
A topic consists of a file group, including skin files (. Skin), CSS style sheets, image folders, and other files, but at least contains skin files. It is the core of a topic file.
Skin file: its extension is. skin, which is mainly used to define the appearance of the server control.
CSS style sheet: it is mainly used to define the style attributes of common HTML controls and pages, and the style attributes of server controls are set in skin files. Unlike Common CSS files, you do not need to specify the CSS link on the page.
Iii. Application of themes
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.
4. The order of style attributes applied to the control is as follows:
1. stylesheettheme reference Style
2. control properties set by code (overwrite stylesheettheme)
3. Style referenced by theme (covering the first two)
5. Other skills
The preceding describes how to specify a topic for a page. In addition, you can also disable the page topic. The implementation method is very simple. Set enabletheming = "false" in the page header <% @ Page %>.
Specify and disable a topic for an application
Each application contains multiple pages. To ensure a harmonious and unified user interface, developers often want all pages to use the same topic. If you set the same theme attribute value for each page header, it will be cumbersome. To quickly set the same topic for all pages of the application, you can set the <pages> Configuration section content of the web. config file.
<Configuration>
<System. Web>
<Pages theme = "topic"/>
</System. Web>
</Configuration>
If necessary, you can also change the theme attribute in the <pages> Configuration section to the stylesheettheme attribute. Note that the same application can contain multiple web. config files used to specify a topic. You can add different web. config files to different subfolders. different themes can be specified for each web configuration file. To disable topic settings for the entire application, set the theme or stylesheettheme attribute value in the <pages> Configuration section to null.
Background code to easily skin the website
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 = "...";
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
