How to Use Themes and Skins in ASP.Net ApplicationsThemes and skins provide an easy way to change the look of pages and controls on a site or multiple sites to have a consistent appearance.
Themes are made up of skins, cascading style sheets (CSS), images, and other resources, and they are created within special folders in the server structure.
Themes are like CSS styles - they both define a set of common attributes that can be applied to controls and elements on any page. However, CSS is limited to the presentation elements of a control. Themes allow the customisation of any property of an Asp.net control, such as text values, icon glyphs, template layouts and so on.
Unlike CSS, themes do not cascade. By default, any property values defined in a theme referenced by a page's Theme override the property values declaratively set on a control unless you explicitly apply the Theme using the StyleSheetTheme property. You can only set one Theme per page.
A skin is a set of properties and templates that can be used to standardise the font, size and other characteristics of controls on a page. A theme can consist of multiple skins and style sheets to define the overall look and feel of the web application.
Creating and Using Themes and Skins
Let's start with a standard ASP.Net page with a few controls loaded on it.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Theme Demo Page</h1>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
</div>
</form>
</body>
</html> 
This looks boring by default, but we can quickly create a theme to brighten up this page.
Themes are located within an App_Theme folder in the website structure. You must create this using Solution Explorer by right-clicking on the project, then Add ASP.Net Folder, and then Theme. This will create the App_Theme folder and a default Theme1 folder. You should rename this to whatever you want the Theme to be called. In this example, I am using "default".
To create a skin for a control, right-click on the 'default' folder and add a new item. Select Skin from the list. Visual Studio will present a default skin, which you should delete. We will start by changing the look of the textbox control on the form.
We can create a customised skin for the control by keying in a declaration for an ASP textbox control, the same as the declaration of a server-side control in an ASPX, except that we don't set the ID or value properties in the Skin. The runtime will apply the property values and styles in this Skin to all textbox controls on every page using the 'default' theme.
The Skin file for a textbox looks like this:
<asp:TextBox runat="server" BorderColor="#3366CC" BorderWidth="1px" ForeColor="#003399" Font-Names="Verdana" Font-Size="8pt"></asp:TextBox> This will automatically style every textbox on every page that uses this Theme. I have also created a skin for the button and the calendar controls, shown below.
<asp:Button runat="server" BorderWidth="1px" BorderColor="#3366CC" ForeColor="#003399" Font-Names="Verdana" Font-Size="8pt" /> Skin for ASP Button
<asp:Calendar runat="server" BackColor="White"
BorderColor="#3366CC" BorderWidth="1px" CellPadding="1"
DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"
ForeColor="#003399" Height="200px" Width="220px">
<SelectedDayStyle BackColor="#009999" Font-Bold="True"
ForeColor="#CCFF99" />
<SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
<WeekendDayStyle BackColor="#CCCCFF" />
<OtherMonthDayStyle ForeColor="#999999" />
<TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
<NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
<DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
<TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px"
Font-Bold="True"
Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />
</asp:Calendar> Skin for ASP Calendar control
Applying Themes to Specific Pages
Now, all we need to do is link our ASP page to our default theme. This is done by adding a Theme attribute to the page directive.
<%@ Page Language="C#" Theme="default" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
When you run the application, the page looks much brighter and has a colourful calendar control.
Applying Themes to All Pages
Instead of individually applying themes to your pages, you can specify the Theme for all pages in the web.config file under the System.Web section adds a page node as shown below, replacing the default with your Theme's name.
<?xml version="1.0"?>
<configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">
<system.web>
<pages theme="default" />
<compilation debug="true"/>
<authentication mode="Windows"/>
</system.web>
</configuration> Excluding Controls
You may not need or require a theme on particular controls on a page. You can tell the runtime not to apply a theme to an ASP control by specifying an additional parameter in the control declaration: EnableTheming="false".
<asp:Button EnableTheming="false" ID="Button1" runat="server" Text="Button" /> Sample code
You can download a sample code using the link below.
