.NET Treats & Tricks
   Skip Navigation LinksHome > SampleThemes  

ASP.NET 2.0 Colorful Web Site Starter Kit


by Erika Ehrli Cabral
April 2005

Summary

ASP.NET 2.0 includes a new set of features that allow you to define the look-and-feel of Web sites. The purpose of the Colorful Web Site Starter Kit is to help you to create, modify, and use ASP.NET 2.0 Skins, Styles, and Themes to define the Graphic User Interface of your Web Site. The Colorful Web Site Starter Kit provides eight free sample ASP.NET 2.0 Beta 2 Themes.

Disclaimer:
Some images and color combinations that appear in this Starter Kit were taken from My MSN and Windows XP desktop. Microsoft is not responsible for, shall have no liability for and disclaims all warranties whatsoever, expressed or implied, related to the Starter Kit, including without limitation any warranties related to performance, security, stability, or non-infringement of title of the sample (including site content) or any controls downloaded from the site. All material is provided as-is.

Table of Contents

Before you start reading

This page allows readers to set programmatically a selected theme. Before you start reading, please tell me what color you love:

Introduction

Every time you start building a Web site, you need to define the Web site's Graphic User Interface (GUI). Usually, you need to choose and define a set of colors, fonts, images, styles, navigation schemas, and layout. As a developer, you might be the one devoted to build complex functionality for Web Sites, and in most cases, you might have few time to create a nice look-and-feel for the pages. Web developers and designers sometimes need to build theme sets for Web sites to accomplish different purposes:

  • Building quick prototypes: You might need to build a quick prototype that emulates functionality for a new Web Application that your customer asked for. Sometimes you need to develop the prototype with few time and a set of predefined themes can help you to build a pretty prototype and to concentrate in functionality details.
  • Personalization: Some Web sites and portals require the use of role-based personalization. Users might choose their favorite color and layout configuration and a set of predefined themes can help you to provide personalized configuration for the users.
  • GUI Standards: Your company has different teams that constantly build Web applications. Each team uses a particular GUI configuration and you want that all the Web applications developed in the company share a standard look-and-feel. Defining and distributing a Theme might help you to assure that all the company's Web applications have the same look-and-feel.

Microsoft has thought about this need and has created a solution for this problem. ASP.NET 2.0 includes MasterPages, Themes, Skins, Cascading StyleSheets (CSS), and a set of WebControls that integrate to build a predefined style in a Rapid Application Design (RAD) approach.

The following document explains how to use ASP.NET 2.0 Skins, Styles, Themes, and WebControls to create and modify GUI for Web Sites. I also provide for free eight ASP.NET 2.0 Themes.

How to define a Web site's look-and-feel with ASP.NET 2.0

ASP.NET 2.0 has evolved dramatically to allow Web developers to create complex functionality for Web applications in less time, and with less code. ASP.NET 2.0 provides a set of features that help to create and enhance the look-and-feel of Web applications. The features that allow to define a Web site's appearance with ASP.NET 2.0 are:

  • MasterPages: Allow you to factor out layout, structure, and interface elements (headers, footers, navigation bars, content placeholders) definition. MasterPages provide a consistent layout for Web sites. For more information on MasterPages, read Web Site Consistency Made Easy with ASP.NET 2.0 Master Pages.
  • Styles: Allow you to define rich designs through CSS and the style property of standard HTML tags, HTML server controls, and Web server controls. For more information on CSS, read the W3C Cascading Style Sheets specs.
  • Skins: Allow you to define individual HTML and Web control styles.
  • Themes: Group of files (CSS, Skins, Images) that define the look-and-feel of Web pages. For more information on Skins and Themes, read Introduction to ASP.NET Themes.

Once you have created a new ASP.NET Web Project, you can create new themes. The steps I followed to create and use new ASP.NET Themes are:

1. Defining  the Themes

In the Solution Explorer:

1. Right-click the App_Themes folder, click Add Folder, click Theme folder, and type the name of the new Theme, for example, MySampleTheme.

Note: The name of the folder is the name of the new theme.

2. Right-click the new Theme folder you just created, click Add Folder, click Regular folder, and type the word Images.

3. Right-click the Images folder you just created, and add all the images you need.

4. Right-click the new Theme folder, click Add New Item, click StyleSheet, and then click OK.

5. Define all the styles needed in the CSS file.

6. Right-click the new Theme folder, click Add New Item, click Skin File, and then click OK.

7. Define all the skins needed for each control in the Skin File.

<asp:GridView ID="GridView1" runat="server" SkinId="MyGridViewSkin" BackColor="White" >
<AlternatingRowStyle BackColor="Blue" />
</asp:GridView>

2. Applying the Themes to Web Pages

In the Web page where you need to define a Theme:

1. Set the Theme attribute of the @Page directive to the name of the Theme to use.

<%@ Page Theme="MySampleTheme" %>

To define a Theme for the Web site, use the application's Web.config file and set the theme attribute of the pages element to the name of the theme.

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

3. Applying the Skins to HTML and Web Controls

In the Web Page where you need to define the controls:

1. Create the HTML or Web Control and define the skin name with the SkinID attribute of the control to the SkinID name of the control's skin to use.

<asp:GridView ID="GridView1" runat="server" SkinID="MyGridViewSkin" />

Free ASP.NET 2.0 Themes

As a Web developer, I would really appreciate having a set of themes with the most common color configurations preferred by customers. I created a set of eight new ASP.NET 2.0 Themes that I would love to share with the ASP.NET Community. The sample themes I provide are based on My MSN Web Site and Windows XP desktop. Each theme is extensible and you can modify the configuration according to your needs.

Theme components

Each theme is composed by:

  • Images: Sample logo, bar, and bullets.
  • Skins: Style definition for the following Web Controls:
    1. Image
    2. Calendar
    3. DetailsView
    4. FormView
    5. GridView
    6. Login
    7. SiteMapPath
    8. WebPartZone
  • CSS: Style definition for text and paragraph elements.

Sample Themes

The following is a list of the sample themes I created:

  • MSN_Blue: Blue theme.
  • MSN_CherryBlossom: Pink theme.
  • MSN_Finance: Green theme.
  • MSN_Morning: Yellow theme.
  • MSN_Purple: Purple theme.
  • MSN_Red: Red theme.
  • WINXP_Blue: Windows XP Blue theme.
  • WINXP_Silver: Windows XP Silver theme. 

Conclusion

ASP.NET 2.0 includes new features such as MasterPages, Skins, Styles, and Themes that allow you to define the look-and-feel of Web Sites quickly and easily. You can create personalization features for your Web applications and even assure the use of predefined Web GUI standards across organizations.

References
 
CopyRight Info © 2005