This article briefly describes about themes - a beginner's guide
Introduction : THEMES
A theme is a collection of settings that define the look of
controls and web pages. Themes are applied across all the pages in a Web
application to maintain a consistent appearance.
A theme is a file with .skin extension that contains
property settings for individual controls such as a Button, textbox or a Label
control. You can either define skins for each control in different skin files
or you can define skins for all the controls in a single file.
Themes are of two types –
- Page - A theme which can be applied to only a
single page of the website is called a Page theme.
A Page theme contains the control
skins, style sheets, graphic files, and other resources inside the subfolders
of App_Themes folder. For different themes separate subfolders are created in
the App_Themes folder.
- Global
– A global theme is a theme that is applied to all the webpages of any
website. It includes property
settings, style sheet settings, and graphics. This theme allows you
to maintain all the websites on the same web server and to define the same
style for all the pages of all websites.
Global themes are placed in the
Themes folder and can be accessed by an website.
Steps to create themes :
- Right
click on Web application’s name in solution explorer and first select Add
ASP.Net Folder option -> Themes
- This
will add folder named App_Themes with one subfolder named Theme1 inside
it.
- Right
click Theme1 folder -> Add New Item -> Skin File (I have named it as
Theme.skin). Add following code in it.
<asp:Label runat="server" width="300px" height="25px" font-bold="true" font-size="large" forecolor="white" backcolor="Black" />
<asp:TextBox runat="server" forecolor="Red" font-bold="true"font-size="Medium" font-italic="True"/>
<asp:Button runat="server" forecolor="white" backcolor="Black" />
- Now create
a Default.aspx page to test out. (Below is the sample screen)
- Add
reference to Theme1.skin file in the Default.aspx page where you want to apply Theme
<%@ Page Language="C#" AutoEventWireup="true"CodeFile="Default.aspx.cs" Inherits="_Default" Theme="Theme1" %>
The style properties of the skin file will not be visible at
design time but only run time. Press F5 and see the output.
Applying Themes on Controls at Run Time :
You can apply theme at control level by setting its
EnableTheming property to True and set the reference Theme file in Page
directive. You can also create multiple themes and give a choice to the user to
apply any theme at runtime.
Steps :
- Add
two Theme folders in the App_Themes folder (like Theme1 and Theme2)
- Now
add sking file to each Theme folder (like Simple.skin and Inverse.skin)
Simple.skin
<asp:Label runat="server" width="300px" height="25px" font-bold="true"font-size="large"
forecolor="green" backcolor="yellow" />
<asp:TextBox runat="server" forecolor="Blue" backcolor="silver" font-bold="true"
font-size="Medium" font-italic="True"/>
<asp:Button runat="server" forecolor="green" backcolor="yellow" />
Inverse.skin
<asp:Label runat="server" width="300px" height="25px" font-bold="true"font-size="large"
forecolor="yellow" backcolor="green" />
<asp:TextBox runat="server" forecolor="silver" backcolor="blue" font-bold="true"
font-size="Medium" font-italic="True"/>
<asp:Button runat="server" forecolor="yellow" backcolor="green" />
- Create
a Default.aspx page as shown
The links are created using the
below code
<a href="Default.aspx?Theme=Theme1">Simple</a> | <ahref="Default.aspx?Theme=Theme2">Inverse</a><br />
- Add this
in Default.aspx.cs
protected void Page_PreInit (object sender, EventArgs e)
{
Page.Theme = Server.HtmlEncode(Request.QueryString["Theme"]);
}
Press F5 and see the output by
clicking both links