Themes and Skins

ASP.NET 2.0 introduces a new way to style Web Forms. In many respects, themes are an alternative to cascading style sheets, but just as often they are used in conjunction with cascading style sheets to conveniently alter the appearance of a Web page without changing the content. Themes are not useful for changing the overall layout of the page; however, ASP.NET 2.0 offers a new tool to help with that, called Master Pages, covered in the next section.

A theme is used as a sort of server-side style sheet to allow controls to appear differently based on the theme applied. To see what a theme can do, let's look at a page we have seen previously. The page shown in Figure 3-22 is the same page as in Figure 3-13, with a theme applied.

Figure 3-22: SimpleWebFormWithThemes.aspx, the same form as Figure 3-13, with a theme applied

Clearly, compared with Figure 3-13, this form is different. The backgrounds of the controls are gray, and the borders around the controls are different, as is the appearance of the buttons. How exactly do themes work?

First, the structure of an ASP.NET application folder is important. There are several special folders, generally beginning with App_. When you create a new skin file, it is placed in a folder named App_Themes. Inside App_Themes is another folder named for the specific theme. Figure 3-23 shows the App_Themes folder and the SkinFile folder. The appearance of these folders in Solution Explorer exactly mirrors the folder structure where the application exists.

Figure 3-23: Solution Explorer, showing the contents of the App_Themes folder