How to create Themes in ASP.NET 2.0?


An ASP.NET Theme enables you to apply a consistent style to the pages in your website. You can use a Theme to control the appearance of both the HTML elements and ASP.NET controls that appear in a page.

You create a Theme by adding a new folder to a special folder in your application named App_Themes. Each folder that you add to the App_Themes folder represents a different Theme. If the App_Themes folder doesn't exist in your application, then you can create it. It must be located in the root of your application.

 

A Theme folder can contain a variety of different types of files, including images and text files. You also can organize the contents of a Theme folder by adding multiple subfolders to a Theme folder. The most important types of files in a Theme folder are:-

 

  •        Skin Files.
  •       Cascading Style Sheet Files

 

A Theme can contain one or more Skin files. A Skin enables you to modify any of the proprieties of an ASP.NET control that have an effect on its appearance.

 

For Example, Imagine that you want to show every label in the application to appear with a yellow background and red color in text. You can create a folder in the App_Themes folder named Default. Under this folder create a new skin file named Label.Skin

 

In the skin file enter the code as in Listing 1.1

 

Listing 1.1

App_Themes\Default\Label.Skin

 

<asp:Label BackColor="Yellow" Font-Bold="true" Font-Names="Verdana" ForeColor="red" runat="server" />

 

To use that skin in the pages in a website just set the Theme Property in the Page directive. For example

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UsingTheme.aspx.cs" Inherits="UsingTheme" Theme="Default" %>

 

Rather than add the Themes attribute to each and every page to which you want to apply Theme, you can register a Theme for all pages in your application in the web configuration file.  For Example

 

<?xml version="1.0"?>

<configuration>

      <system.web>

    <pages theme="default">     

    </pages>

</system.web>

 </configuration>


Similar Articles