WindowsDevCenter.com
oreilly.comSafari Books Online.Conferences.

advertisement


AddThis Social Bookmark Button

Introducing Themes and Skins in ASP.NET 2.0

by Wei-Meng Lee
08/30/2004

Most web designers use Cascading Style Sheets (CSS) to maintain a consistent look and feel on their web sites. ASP.NET 2.0 introduces a new way to achieve this consistency without having to manage your own CSS files. With this new feature, you can apply themes to an entire site so that you can maintain consistency across all the controls. In this article, I will show you how to create themes and skins for your web controls and then apply them to your web application.

Creating Themes and Skins

For this article, create a new ASP.NET web application using Visual Studio 2005 Beta 1. Figure 1 shows the Default.aspx page populated with two Label controls and one Button control.


Figure 1. Populating the Default.aspx page

To change the look and feel of the controls, you can use the Properties window and modify the attributes of each control, such as its background color, font name, and so on. However, a much more efficient way to maintain a consistent look and feel for your web application is to use themes. When you apply a theme to a page, all controls will have a common look, saving you the trouble of changing each control's properties.

A theme contains one or more skin files. Each skin file defines the look and feel of a particular control. Figure 2 shows my project containing a Themes folder, which in turn contains a Standard Theme folder with two skin files, Button.skin and Label.skin.


Figure 2. The project with themes and skins

To add a skin file to your project, go to Solution Explorer and then add a new text file to your project. Change the file extension to .skin.

Figure 3 shows the Button.skin file's content:


Figure 3. The content of the Button.skin file

Figure 4 shows the Label.skin file's content:


Figure 4. The content of the Label.skin file

While you need not necessarily create multiple skin files for your project, the recommended practice is that you hold the styles for each control in a separate skin file. A good practice is to name each skin file after the control that it defines.

Skin files are nothing more than just a source view of controls (with the exclusion of attributes such as id), so it's very easy to create them. One good way to do that is to use a normal web form and format the controls the way you want them to be. Then switch to source view, copy the control element, and paste it into the skin file. Finally, remove the id attribute and add the skinid attribute.

Let's examine what the various definitions in the two skin files look like.

First let's look at Label.skin. The first line defines a default skin for the Label control. A default skin does not contain a skinid attribute in its definition:


<asp:Label Runat="server" />

The next one defines a Label control with its text displayed in bold:


<asp:Label skinid="bold" Runat="server"  Font-Bold="True" />

This is what a Label control will look like when you apply this skin:


Figure 5. Applying the bold skin

The following defines a Label control with its text displayed in italic:


<asp:Label skinid="italic" Runat="server" Font-Italic="True" />

This is what a Label control will look like when you apply this skin:


Figure 6. Applying the italic skin

The last one defines a Label control with its text displayed using Garamond font with a light yellow background:


<asp:Label skinid="garamond" Runat="server" Font-Names="Garamond" 
     Font-Overline="False" BackColor="LightGoldenrodYellow" />

This is what a Label control will look like when you apply this skin:


Figure 7. Applying the Garamond skin

Next is the Button.skin file. For the Button control, the first definition is the default skin:


<asp:Button Runat="server" />

The next one displays the text of the Button control in bold:


<asp:Button skinid="bold" Runat="server" Font-Bold="True" />

This is what a Button control will look like when you apply this skin:


Figure 8. Applying the bold skin

Pages: 1, 2

Next Pagearrow