RSS Feed
Download our iPhone app
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.

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:

   <pages theme="SmokeAndGlass">
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" 
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" 
     BorderStyle="Solid" Font-Size="0.9em" 
     Font-Names="Verdana"  ForeColor="#585880" 
     BorderColor="#585880" BorderWidth="1pt" 
     CssClass="theme_textbox" />
   <asp:Button runat="server" BorderColor="#585880" 
     Font-Bold="true" BorderWidth="1pt" 
     ForeColor="#585880" BackColor="#F8F7F4" />
   <asp:LinkButton runat="server" Font-Size=".9em" 
You can add additional settings for an individual control by copying and pasting the initial definition, making the desired changes, and assigning a SkinID to the control. You can omit the SkinID property for a control definition to indicate that it is the default definition. If you do not set the SkinID property for controls added to a Web Form then the default definition for that control type will be assigned to the control. This is why a simple theme change can change the look and feel of the all the controls you have placed on Web Forms.

I've discussed how you can apply theme settings in the web.config file for site-wide application, at the page level through the use of the Theme attribute on the @Page directive, and by assigning the SkinID property of a control. You can also apply themes programmatically. To set the theme for a page at run time, use the following code in the page's PreInit event handler:

   Protected Sub Page_PreInit( _
      ByVal sender As Object, _
      ByVal e As System.EventArgs) _
      Handles Me.PreInit
      Page.Theme = "SmokeAndGlass"
   End Sub
If you just want to programmatically set the theme for an individual control you also do that in the page's PreInit event handler. I have added another button definition to the SmokeAndGlass skin below; notice the SkinID has been assigned the value SAGButton:

   <asp:Button runat="server" SkinID="SAGButton" 
     BorderColor="#585880" Font-Bold="false" 
     BorderWidth="6pt" ForeColor="#585880" 
     BackColor="#F8F7F4" />
Setting the SkinID for a specific button looks like this:

   Protected Sub Page_PreInit( _
      ByVal sender As Object, _
      ByVal e As System.EventArgs) _
      Handles Me.PreInit
      Page.Theme = "SmokeAndGlass"
      Me.Button1.SkinID = "SAGButton"
   End Sub
Running the form with the preceding code in place applies the default SmokeAndGlass control theme to all the controls except Button1, which uses the assigned SAGButton definition.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date