ASP.NET 2.0 Colorful Web Site Starter Kit
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.
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:
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
- 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:
Right-click the App_Themes folder,
click Add Folder, click Theme folder, and type the name of the new
Theme, for example, MySampleTheme.
Right-click the new Theme folder you just created, click Add Folder, click
Regular folder, and type the word Images.
Right-click the Images folder you just created, and add all the
images you need.
Right-click the new Theme folder, click Add
New Item, click StyleSheet, and then click OK.
Define all the styles needed in the CSS file.
Right-click the new Theme folder, click Add New Item, click Skin File,
and then click OK.
Define all the skins needed for each control in the Skin File.
2. Applying the Themes to Web Pages
In the Web page where you need to define a Theme:
Set the Theme attribute of the @Page directive to the name of the Theme to use.
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.
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.
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.
Each theme is composed by:
- Images: Sample logo, bar, and bullets.
- Skins: Style definition for the following Web Controls:
CSS: Style definition for text and paragraph elements.
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.
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.