Using Themes and Skins in 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" /> <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar> </div> </form> </body> </html>
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" %>
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>
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" />
You can download sample code using the link below.
Last updated on: Thursday 22nd June 2017