Using Themes, Skins, and Styles

Now, given that you have many calendars, you decide that you’d like to have the common set of properties saved in a central place. This way, if you decided to change the format later, you’d need to make changes in one place, rather than all over your web site.

So, can CSS help us keep our calendars consistent in the same way it can keep our headings consistent? Unfortunately, it can’t. All the settings in the above calendar are processed on the server side, and are used to determine the actual HTML that’s output by the control. CSS can affect the final output by setting the colors or other details of the resulting HTML code, but it can’t influence the way the Calendar control works on the server.

So the question remains: how can we keep web server controls consistent? Skins, which were introduced in ASP.NET 2.0, are the answer to this question. They define default values for server-side controls.

Skin definitions are saved into files with the .skin extension. A skin definition looks like the markup for a normal web server control, except that it doesn’t have an ID, and it can’t set event handlers. This makes sense, since the skin isn’t an actual control. Here’s an example of a skin for a calendar:

<asp:Calendar runat="server" DayNameFormat="Short" FirstDayOfWeek="Sunday" NextPrevFormat="FullMonth" SelectionMode="DayWeekMonth" SelectWeekText="Select Week" SelectMonthText="Select Month" TitleFormat="Month" />

Now, provided this skin is part of the theme that’s applied to the current page, all Calendar controls will inherit all of these property values automatically. These values can be overridden for any specific calendar, but the skin provides the default values.

A skin can also contain a SkinId property, and if it does, it becomes a named skin. A named skin doesn’t apply automatically to all controls of its type: it affects only those that specify that the skin applies to them. This allows you to define many skins for the same control (for instance, a SmallCalendar and a BlueCalendar).

Adding a Skin

The truth is, we don’t really need skins for our simple site, but we’ll add one so that you can get a feel for their functionality. Right-click again on the Blue node in Solution Explorer, and select Add New Item…. Choose the Skin File template, leave its name as SkinFile.skin, and click Add.

193

Chapter 5: Building Web Applications

Visual Web Developer adds a comment to the file; this comment contains default text that briefly describes skins. A theme can contain one or many skin files, and each skin file can contain one or more skin definitions. ASP.NET will automatically read all the files with the .skin extension.

Let’s say we want all TextBox controls to have the default ForeColor property set to blue. Without skins, we’d need to set this property manually on all TextBox controls in your site. However, you can achieve the same effect by adding this line to your SkinFile.skin file:

File: SkinFile.skin (excerpt)

<asp:TextBox runat="server" ForeColor="blue" />

Once the theme containing this skin has been applied, this new skin will give all TextBox controls on your site the default ForeColor of blue.

Applying the Theme

In order for your CSS—and the skin—to take effect, you’ll need to apply the theme to your web page. Once the new theme has been created, applying it is a piece of cake. You can apply a new theme using the Web.config configuration file, or through your code.

For now we’ll use Web.config. The theme can be set using the theme attribute of the pages element, which should be located inside the system.web element.

If you’re using VB, the pages element already exists in Web.config—you just need to add the theme attribute:

File: Web.config (excerpt)

<compilation debug="true" strict="false" explicit="true"/> <pages theme="Blue">

<namespaces>

<clear/>

<add namespace="System"/>

<add namespace="System.Collections"/>

<add namespace="System.Collections.Specialized"/> <add namespace="System.Configuration"/>

<add namespace="System.Text"/>

<add namespace="System.Text.RegularExpressions"/> <add namespace="System.Web"/>

<add namespace="System.Web.Caching"/>

<add namespace="System.Web.SessionState"/> <add namespace="System.Web.Security"/>

194