Control site appearance with ASP.net 2.0 themes

Asp.net| Control

Since the advent of the. NET framework, it has been the expectation of asp.net developers to control the appearance of the site. ASP.net 2.0 makes it a reality, applying its theme and skin, we can control the appearance.

Developers often confuse themes with master pages, but these two elements are very different. The master page allows you to control the overall layout of a site, or a group of pages within a site, but the theme focuses on the look and feel of the site.

Before you can apply all the benefits of the ASP.net 2.0 theme, you need to know a few terms and procedures. A theme can apply a new design element called a skin or cascading style sheet (CSS).

Understanding Skin Files

Although it is not necessary to apply skin to the subject, I would like to introduce the concept of skin first, as it is the standard design element in the subject. Skin provides a way to manage the appearance of a network control. You can also use it to set some of the properties of a control in batches.

The definition of the skin is contained in the skin file (with the. Skin as the file name extension). In Visual Studio, you can choose to add Items > Skin files (add New Item>skin file) to easily add skin files. They are basic text files, so you can also apply your favorite text editor.

The skin file contains some controls and the properties they apply. All of the Microsoft files I read suggest creating a separate skin file for each control type, but you can also include several control definitions in a separate file without causing problems. The following code is a sample skin file that defines the display color of a label and a text box control.

<asp:label runat= "Server" backcolor= "Red" forecolor= "white"/>
<asp:textbox runat= "Server" backcolor= "Black" forecolor= "yellow"/>

The label control will have a red background and a white text; The File box control has a black background and the text is yellow. Here are some tips for defining skin file controls:

• Each defined control needs to runat= the "server" attribute.
• The id attribute is not included. It is a unique property of a network control, so only controls on the Web page are specified.
• Only rendering (presentation) attributes can be defined in the skin file.

You might want to learn how to define multiple formats for the same type of control. This is where the SkinID attribute works. In a skin file, you can specify a SkinID property for a control to define multiple rendering formats for that control type.

You can also apply styles (style) attributes or external style sheets. Microsoft recommends the creation of separate skin files for different controls. For example, you might want to define the appearance of label controls and other controls for a file called Label.skin.

Apply skin files through themes

A theme is a combination of one or more skins and/or CSS files used to control the appearance of controls on the ASP.net site. The files that make up the theme (skin and CSS) are included in a theme folder.

The name of the folder defines the name of the topic (like page declarations, code, and so on), which is a subfolder of a special App_Themes folder that is contained within the network application software. If you apply visual Studio, you can right-click on the solution and choose to increase the ASP.net folder to select the theme (add asp.net folder>themes), which automatically increases the App_Themes folder. You can also create App_Themes folders by using Windows Explorer or your favorite method.

The skin and CSS files in a special theme folder contain all the elements in that topic. A theme can be applied to a Web page by the Pagetheme property indicated by the page, just like this:

<%@ Page language= "C #" Theme= "Techrepublictest"%>

Once the topic is specified, the skin and CSS files are connected to that page. At this point, you can specify a SkinID property for a control with more than one valid definition, or you can ignore it if it is not necessary. The pages in list C are applied to controls defined in the sample skin file.

Assigning topics at the page level is painful, especially if you have hundreds of pages. You can also specify a topic in the Web.config file for the application software. The page element (in the system.web element) contains a theme property that specifies the default theme for the Web site.

<pages theme= "Techrepublictest"/>

This eliminates the need to set page-level theme properties, but you can still use it instead of the default theme defined in the Web.config file.

Don't confuse themes with CSS

Although themes and skins are similar to CSS in many ways, they are not the same. A theme can control the visual rendering of a network control, including specifying a template layout for a picture in a DataGrid or TreeView control. Another major difference between themes and CSS is that there is no layering in the topic. However, you can include a style sheet in a theme. Also, the subject's attribute value always replaces the local attribute value.

Single and Individualization

For a long time, the development community has been demanding to expose the features offered by themes and skins, thanks to ASP.net 2.0 for doing this. Although CSS offers a number of formatting options, themes go a step further, where CSS files can be applied. Next week we'll go on to discuss topics and master pages that show how to use them to control Web sites.