Themes save your time and improve the consistency of a site by applying a common set of control properties, styles, and graphics across all pages in a website. Themes can be centralized,allowing you to quickly change the appearance of all the controls on your site from a single file.
ASP.NET themes consist of the following set of elements:
1.Skins These are files with .skin extensions that contain common property settings for buttons, labels, text boxes, and other controls.
2.Cascading style sheets These are files with .css extensions that contain the style property definitions for HTML markup elements and other custom style classes. A style sheet is linked to a page, master page, or entire site. ASP.NET applies the styles to the page.
3.Images and other resources Images (such as a corporate logo) along with other resources can be defined inside a theme. This allows you to switch out the images when you switch themes for a site.
Creating Themes :
1.Open Visual Studio and create a new ASP.NET website named Themes .
2.Add the App_Themes folder to your website. Right-click the site in Solution Explorer,click Add ASP.NET Folder, and then click Theme.
3.Create two theme folders. Name them potrace and logitech. To add the second theme, right-click the App_Themes folder, click Add ASP.NET Folder, and then click Theme.
4. Copy this image from this link :
http://www.google.com.pk/imgres?imgurl=http://potrace.sourceforge.net/potrace-logo-468.png&imgrefurl=http://blutek3.freeo.net/logo-background-images.html%26page%3D3&h=508&w=468&sz=53&tbnid=0kf1kw3QbbZGsM:&tbnh=234&tbnw=215&prev=/images%3Fq%3Dpotrace%2Blogo%2Bin%2Bgoogle%2Bpictures&zoom=1&q=potrace+logo+in+google+pictures&hl=en&usg=__Ul35VjZMF5Zomlt-1HDuszOqRjQ=&sa=X&ei=m0g4Tbb6GJDk4AafufHYCg&ved=0CBoQ9QEwAA
And add this logo in potrace theme folder.
5.Add a .skin file to the potrace theme folder and name it Logo. Now add skins in skin file of Image ,
Textbox and Button control.
<asp:Image ImageUrl="~/App_Themes/potrace/potrace.gif"SkinID="Logo" runat="server" /><asp:TextBox runat="server"BorderColor="Orange" BorderWidth="1pt" Font-Names="Arial" Font-Size="10pt"ForeColor="Brown" ></asp:TextBox><asp:Button runat="server"BorderColor="DarkOrange" BorderWidth="1pt" Font-Bold="true"BackColor="DarkOrange" ForeColor="White" />
6. Repeat the same process for the logitech theme, but use different colors. Your skin file for logitech should look as follows.
<asp:Image ImageUrl="~/App_Themes/logitech/logitech.gif" runat="server" SkinID="logo"/><asp:TextBox runat="server"BorderColor="Blue" BorderWidth="1pt" Font-Names="Arial" Font-Size="10pt"ForeColor="Brown" ></asp:TextBox><asp:Button runat="server"BorderColor="Blue" BorderWidth="1pt" Font-Bold="true"BackColor="White" ForeColor="DarkBlue" />
Copy the image of logitech here :
7.Add a style sheet to your potrace theme and name it Style.css. Within the stylesheet, define styles to set the default font and font size for the HTML body. Copy this code in style sheet.
body
{
font-family : Tahoma;
font-size : 10pt;
}
8.Copy this same style sheet to the logitech folder, but change the font-family style to Script and the font-size style to 20pt .
9.Open the Default.aspx page in Source view. Set the Theme property in the @ Page directive to potrace.
10.Add the following controls within the <BodyContent> content placeholder:
1. Image control: Set the SkinId to Logo.
2.TextBox control: Set the CssClass to textBox. This control will get part of its style from the skin and part from the style sheet.
3.Button control: Add a Button control to the page. Set the CssClass to button. This control will also get part of its style from the skin and part from the style sheet.
Add Followning codes:
Run the Application and check for errors.
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:Image ID="Image1" SkinID="Logo" runat="server" />
<br />
<asp:TextBox ID="TextBoxUname" runat="server"
CssClass="textBox"></asp:TextBox>
<br />
<asp:Button ID="ButtonSubmit" runat="server" Text="Hello"
CssClass="button" />
</asp:Content>
11.Now remove the potrace from @ page directive and change it to:
<%@ Page Theme="logitech" Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
This should switch the site's theme . Run the application again .You should now see a new theme applied to the site.
12.Finally, allow the user to switch themes at run time when he or she clicks the button.First, add an event handler to the button’s click event that sets a Session variable to the theme that is not currently active. After setting the Session variable, reload the current page with Server.Transfer. Finally, add a PreInit event to the page that reads the theme from the session and applies it to the page. Your code should resemble the following.
Sample of C# Code:
public partial class _Default : System.Web.UI.Page
{
protected void Page_PreInit(object sender, EventArgs e)
{
if (Session["theme"] != null)
{
Page.Theme = (string)Session["theme"];
}
}
protected void ButtonSubmit_Click(object sender, EventArgs e)
{
string theme = Page.Theme;
//switch themes
if (theme == "potrace")
{
Session["theme"] = "logitech";
}
else
{
Session["theme"] = "potrace";
}
Server.Transfer(Request.Path);
}
}
Run the application and click the button a couple of times. Notice that the theme and style sheet change at run time.
