Control site appearance with ASP.NET 2.0 themes

by Tony Patton | Apr 11, 2006 9:41:00 PM

Tags: .NET, Middleware, Microsoft development tools, Tony Patton, skin file, Microsoft ASP.NET, ASP.NET 2.0, .NET Newsletter

Takeaway: Central control of Web site appearance has been a desire of ASP.NET developers since the introduction of the .NET Framework. ASP.NET 2.0 makes it a reality with themes and skins that allow you to control the appearance.

Last week we examined ASP 2.0 master pages and discussed how you can use them to centralize a site's layout. Developers often confuse themes with master pages, but the two elements are quite different. Master pages allow you to control the general layout of a site or a group of pages within a site, whereas themes focus on the site's look and feel.

Before you can take full advantage of ASP.NET 2.0 themes, you need to learn terms and a process. Themes may take advantage of a new design element called skins or Cascading Style Sheets (CSS).

Give me some skin files

While a theme does not have to use a skin, I want to introduce the skin concept first because it is the standard design element used in themes. Skins provide a way to manage the appearance of Web controls; they also allow you to set certain properties of a control as a group.

Skin definitions are contained in a skin file (using the .skin file extension). You can easily add a skin file to a project in Visual Studio by selecting Add New Item | Skin File. They are basic text files, so you may also use your favorite text editor.

A skin file contains specific controls, and the attributes that will be applied to them. All the documentation that I have read from Microsoft suggests creating a separate skin file for each control type, but you can include multiple control definitions in a single skin file without problems. The following code includes the contents of a sample skin file that defines display colors for label and textbox controls:

<asp:Label runat="server" BackColor="Red" ForeColor="White" />

<asp:TextBox runat="server" BackColor="Black" ForeColor="Yellow" />

The Label control will have a background color of red with text displayed in white; TextBox controls have a black background color and yellow text. Here are several notes about defining controls in skin files:

• The runat="server" attribute is required for each control defined.
• The id attribute is not included. It is a unique attribute for Web controls, so it is specified in the actual control on a Web page.
• Only presentation properties may be defined in a skin file.

You may be wondering how to define multiple formats for the same type of control. This is where the skinid attribute enters the picture. You may assign a skinid to a control in a skin file to define multiple presentation formats for a control type. The code in Listing A includes the contents of a skin file that defines two formats for both TextBox and Label controls.

You may utilize the style attribute or an external style sheet as well. The Label declaration in Listing B takes advantage of the style attribute. Microsoft suggests separate skin files for different controls. For instance, you may want to define the appearance of Label controls in a file called label.skin and so forth for other controls.

Utilize skin files via themes

A theme is a combination of one or more skin and/or css files to control the appearance of the controls used within an ASP.NET site. The files comprising a theme (skins and css) are contained in a theme folder.

The name of the folder defines the theme's name (as used in a page declaration, code, etc.), and it is a subfolder of the special App_Themes folder contained within the Web application. If you are using Visual Studio, you may right-click on the solution and select Add ASP.NET Folder and choose Themes; this selection automatically adds the App_Themes folder. You can also create the App_Themes folder via Windows Explorer or your preferred method.

The skin and css files in a particular theme folder comprise all elements of that theme. A theme may be applied to a Web page via the pagetheme attribute of the page directive, like this:

<%@ Page Language="C#" Theme="TechRepublicTest" %>

Once the theme is indicated, skins and css files are tied to that page. At this point, you may specify a skinid attribute for controls with more than one available definition or omit it if not necessary. The Web page in Listing C uses the controls defined in our sample skin file.

It can be a pain to specify the theme at the page level, especially if there are hundreds of pages. You may specify the theme in an application's web.config as well. The pages element (which is in the system.web element) contains a theme attribute to designate a default theme for a site:

<pages theme="TechRepublicTest" />

This negates the need for the page level theme attribute, but you still may use it to override the default theme defined in the web.config file.

Don't confuse themes with CSS

While themes and skins may resemble CSS in various ways, they are not the same. Themes can control the visual presentation of a Web control; this includes specifying a template layout for a DataGrid or the graphic used in a TreeView control. Another key difference between themes and CSS is that themes do not cascade; however, themes may include style sheets. Also, theme property values always override local property values.

Simplify and separate

The development community has been clamoring for the functionally provided by themes and skins for a long time, and thankfully ASP.NET 2.0 brings it to the table. While CSS provides many formatting options, themes take it a step further and may utilize CSS files. Next week, we'll combine themes and master pages to demonstrate how you can control a site.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

Miss a column?

Check out the .NET Archive, and catch up on the most recent editions of Tony Patton's column.

Print/View all Posts Comments on this article

Amar Dahya amarsingh65@... | 12/09/06

RE: Control site appearance with ASP.NET 2.0 themes joeanchanickal@... | 02/06/08