Code in Style with ASP.NET Themes Part 1

sakthi · by sakthi on Wed Jan 09, 2008 6:29 pm

Introduction

Whitepaper: Implement Virtualization--Techniques and Tools for Microsoft Windows Conversion
Once an IT organization decides to implement virtualization, the question is how to do it. Many people are not aware that a number of conversion tools and techniques are available now in the Microsoft Windows environment. This paper focuses on these tools and techniques and presents a variety of scenarios for using them. >

Whitepaper: Symantec Backup Exec 11d for Windows Servers Set the Standard for Exchange 2007 Server Data Protection
With a new 64-bit only architecture, new high-availability functionality, a new distributed architecture, and more Exchange 2007 represents a large change to most current Exchange customers. As with any major new application release, there are a number of new advantages from the added and improved feature set. >

Disk-Based Data Protection: Achieve Faster Backups and Restores and Reduce Backup Windows
While traditional tape-based backup has proven effective over the years, disk-based backup and recovery provide the essential, instant, and on-demand solution for data inflation. This paper examines traditional and leading-edge data protection strategies. >

Whitepaper: 11 Reasons to Upgrade to Symantec Backup Exec 11d
Imagine being able to eliminate your backup windows and recovery individual Exchange messages, folders, and mailboxeswithout mailbox backups. Learn how Backup Exec 11d for Windows Servers provides the gold standard in continuous, cost-effective, high-performance disk-to-disk-to-tape backup and recovery. >

Themes are rich skin templates available in ASP.NET 2.0 that allow you to define the look of pages and controls, which can then be applied to all the pages in your application to provide consistency for the entire application. A skin is a set of properties and templates that can be used to standardize the size, font, and other characteristics of controls on a page. A theme incorporates multiple skins and stylesheets to specify the overall look and feel of a Web site. Themes and skins will be simple to package, transfer, and apply to other Web sites. Themes are extremely flexible in that they can be applied to an entire Web application, page, or individual control. Theme files are stored with the extension .skin, and all the theme files for a Web application are stored in a special folder named Themes. ASP.NET 2.0 ships with several themes out of the box. It is also possible for you to create custom theme files. In the next section, we will see how to use pre-defined themes supplied with ASP.NET 2.0.

# download source code

How Themes Work

A theme can consist of a combination of a css file and one or many skin files to control how ASP.NET server controls are rendered. These files are all contained within a folder, the name of which determines the theme. This folder, in turn, resides within a parent Themes folder. Any subfolders of the Themes folder act as themes for a site. For example, if you have a folder called ControlsTheme within the Themes folder, you can apply that theme to a page using the following declaration.

<%@ pagetheme="ControlsTheme"language="C#"%>

Once you place the theme attribute in the page directive, all the controls in that page automatically inherit the theme.

Using Pre-Defined Themes

ASP.NET ships with some standard themes that you can try out for yourselves, including ones such as BasicBlue and SmokeAndGlass. Let us take a look at an example to understand how to use one of the pre-defined themes in an ASP.NET page.

<%@ pagetheme="BasicBlue"language="C#"%>

<html>

<headrunat="server">

<title>Using Pre-defined Themes</title>

</head>

<body>

<formrunat="server">

<asp:labelid="Label1"runat="server"width="232px">This page uses

BasicBlue as its theme</asp:label>

 

<asp:textboxid="TextBox1"runat="server">

</asp:textbox>

 

 

<asp:buttonid="Button1"runat="server"text="Button"/>

 

</form>

</body>

</html>

Navigating to the above page using the browser results in the following output.

Creating Custom Themes and Applying Them to the Pages

There are times when the built-in themes supplied with ASP.NET 2.0 may not meet your needs. In that case, you may want to create custom themes and apply them consistently to all the pages in your Web application. Creating custom themes in ASP.NET is a very simple process. All you need to do is create a special folder named Themes and place all your skins under that folder. Once you place the required .skin files under the Themes folder, they automatically become available to all the pages in the Web site.

Creating Custom Themes
This section explains how to create custom themes and use them in an ASP.NET pages. To create custom skins, you need to create .skin files and save them under the theme folder, which represents a specific theme. Skins look a bit like ASP.NET files in that they contain server control definitions and are used to alter the visual appearance of ASP.NET elements. Here are the steps for creating custom themes.

* In Visual Studio.NET Whidbey, create a new folder named Themes by right clicking on the Web site name and selecting New Folder from the context menu. Note that the name "Themes" is pre-defined and must only be used to hold custom themes.
* Once the Themes folder is created, right click on the Themes folder and select New Folder from the context menu to create a folder named ControlsTheme. The name of the folder is the name of the theme that will be used in different ASP.NET pages to refer to this theme.
* Now, right click on the ControlsTheme folder and select Add New Item from the context menu. In the Add New Item dialog box, select Text File from the list and enter the name of the file as Label.skin. As you can see from the name of the file, this will be used to hold the style and formatting for a label control. Once the Label.skin is created, add the following code to the Label.skin file.

<asp:labelrunat="server"width="300px"height="24px"font-bold="True" font-overline="True"font-size="Medium"forecolor="Green"backcolor="Silver"/>

* Note that the above code does not contain the id attribute for the label control since that needs to be specified in the pages that use the themes. The above line of code will automatically apply the specified formatting to any asp:label elements that are placed on a page to which the ControlsTheme is applied. The control definitions must include a runat="server" attribute, but they should never include an id attribute. Also, the style attributes for a control can be set to standard styles, or linked to the styles defined in a CSS sheet.
* Now that we have created a skin for the label control, let us create a skin file for the button control as well. To do this, again right click on the ControlsTheme folder and select Add New Item from the context menu. In the Add New Item dialog box, specify the name of the .skin file as Button.skin. After the file is created, modify the file contents to look like the following.

<asp:buttonrunat="server"forecolor="RoyalBlue"backcolor="Silver"/>

* So far, we have created the styles for a button control and a label control. Now that we have created these custom skins file, we can apply these consistently to all the pages in the Web site, providing a consistent look and feel for the entire Web application. Note that we have not specified the id attribute in the control declarations since the control that is actually inheriting this style will have its own id attribute.

As you have seen, a skin file can be used to apply styling and formatting to any ASP.NET element on a page, but they can't be used to specify attributes that are non-visual. For example, using the above .skin files, you can't specify a standard NavigateUrl attribute to be applied to all asp:hyperlink controls on a site. This is a design feature that will help to ensure that the skin files can only be used to apply formatting to a page.

Regards
Sakthi