Learning never exhausts the mind
Home >  Coding > C# ASP.Net MVC > Using Themes and Skins in ASP.Net

Published 28th May 2008 by

Themes and skins provide an easy way to define the look of pages and controls and apply the style across all the pages and controls on the site or multiple sites.

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, so by default any property values defined in a theme referenced by a page's Theme property 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

Let's start off with a standard ASP.Net page with a few controls loaded on.

<%@ 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>
  <form id="form1" runat="server">
      <h1>Theme Demo Page</h1>
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
      <asp:Button ID="Button1" runat="server" Text="Button" /><br />
      <br />
      <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
Default ASP.Net theme - boring!

Default ASP.Net theme - boring!

By default this looks a little boring, 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 the Solution Explorer by right clicking on the project, then Add ASP.Net Folder, 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 new item. Select Skin from the list. Visual Studio will present a default skin which you should delete. We will start off 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, which is just the same as 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 of the 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 show 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-Size="10pt" ForeColor="#CCCCFF" Height="25px" />
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" %>
ASP.Net Skins and Themes

ASP.Net Skins and Themes

Now when you run the application the page looks much brighter, with a colourful calendar control.

Applying Themes to All Pages

Instead of individually applying themes to your pages you can specify the theme to use for all pages in the web.config file. Under the System.Web section simply add a page node as show below, replacing default with you themes name.

<?xml version="1.0"?>
<configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">
    <pages theme="default" />
    <compilation debug="true"/>
    <authentication mode="Windows"/>

Excluding Controls

You may find that you do 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 sample code using the link below.

Download sample code (5.58 kB)
One thought on “Using Themes and Skins in ASP.Net
  • 11th April 2016 at 12:00 am

    hello sir i understated themes and skin topic but i have to use more than one the themes and skin file in my website.
    it is possible or not please help..here.....


Leave a Reply

Fields marked with * are mandatory.

We respect your privacy, and will not make your email public. Hashed email address may be checked against Gravatar service to retrieve avatars. This site uses Akismet to reduce spam. Learn how your comment data is processed.