Using Themes and Skins in ASP.Net

Written by on Wednesday 28th May 2008 under ASP.Net

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>
</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" /><br />
      <br />
      <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
    </div>
  </form>
</body>
</html>
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-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" %>
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">
  <system.web>
    <pages theme="default" />
    <compilation debug="true"/>
    <authentication mode="Windows"/>
  </system.web>
</configuration>

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
Download sample code
Size: 5577 bytes
Format: ZIP

More Tutorials in Active Server Pages (ASP.Net)

  1. What is ASP.Net?
  2. ASP.Net for PHP Developers
  3. Creating a Simple ASP.Net Page
  4. ASP.Net Website Navigation Using a SiteMap
  5. Using ASP.Net Master Pages and Content Pages
  6. Validating Input using ASP.Net
  7. Tracing and Remote Debug in ASP.Net
  8. Creating Custom Error Pages with ASP.Net
  9. Managing Session State in ASP.Net
  10. Using Themes and Skins in ASP.Net ⇦ You Are here
  11. Creating User Controls in ASP.Net
  12. Difference between ASP.Net User and Custom Server Controls
  13. Fully Themable Websites with ASP.Net
  14. Ultimate Guide to the Web.Config File
  15. Adding StyleSheets to ASP.Net via C#
  16. Extending the Web Sitemap Xml Document

Leave a Reply