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.

Weekly .NET tips in your inbox

TechRepublic’s free .NET newsletter, delivered each Wednesday, contains useful tips and coding examples on topics such as Web services, ASP.NET, ADO.NET, and Visual Studio .NET.

Automatically sign up today!

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.