Browse DevX
Sign up for e-mail newsletters from DevX


Creating Web Sites with ASP.NET 2.0 : Page 5

If you're just starting to create ASP.NET web sites—or just switching to ASP.NET 2.0—you can get up to speed quickly with this handy guide.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Themes and Skins
You just saw that master pages provide the ability to control the layout and common content for the pages in your web site. Themes provide the ability to control the appearance of the controls in your site through the use of visual style template files.

While the capabilities of master pages and themes do overlap somewhat, combining them can help you achieve the following objectives:

  • Build web applications with a consistent layout and control appearance across the site.
  • Provide the ability to quickly change the site layout and appearance by modifying template files.
  • Provide the ability to have the user choose their desired look from a number of appearance options.
By default, ASP.NET stores each theme's .skin files in a folder located under the App_Themes folder. As a developer you can apply themes at the application, page, or control level. At the application level you specify themes in the web.config. At the page level you specify themes in the Theme attribute of the @Page directive. At the control level you specify themes with the SkinID property.

Figure 20: The SmokeAndGlass theme has been added to the project.
Creating a theme from scratch that looks professional enough to use on a production site is not easy. Instead of creating a theme you can use one that ships with Visual Studio 2005 named SmokeAndGlass. I located the SmokeAndGlass folder on my machine at C:\Program Files\Microsoft Visual Studio 8\SDK\v2.0\QuickStart\aspnet\samples\security\logincontrols_vb\App_Themes and copied it to the App_Themes folder for my project (see Figure 20). Next, I will create a page containing a few labels, textboxes, a Calendar control, and a couple of buttons. Without assigning any theme support to the page it looks fairly bland when I run it. While the page functions just fine, its appearance could use some help. To apply the SmokeAndGlass theme to my entire site you can add this snippet to the web.config file:

<configuration> <system.web> <pages theme="SmokeAndGlass"> </system.web> </configuration>

I am only interested in applying the theme to my page at this point, so I'll add the Theme attribute to the @Page directive. I'll set the Page's Theme property on the Properties window:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="ThemeDemo.aspx.vb" Inherits="ThemeDemo" Theme="SmokeAndGlass"%>

Figure 21: Here's the web page at run time with the SmokeAndGlass theme applied.
Next I will run the page to see how it looks (see Figure 21). By adding and setting the Theme attribute for the page I get a noticeable change in the appearance of the controls on the page.

If I was interested in only applying the theme to an individual control I would set the SkinID property for the control to one of the values available in the dropdown.

You may be wondering what exactly is stored in a .skin file. A .skin file contains control definitions and style settings for the control. The code below shows a portion of the SmokeAndGlass.skin file reformatted for legibility. It contains the default style settings for the Label, Textbox, Button, and LinkButton controls:

<asp:Label runat="server" ForeColor="#585880" Font-Size="0.9em" Font-Names="Verdana" /> <asp:TextBox runat="server" BackColor="#FFFFFF" B