ASP.NET Tutorial

.NET Framework

ASP.NET Introduction

ASP.NET Web Forms

Standard Controls

Label Control

TextBox Control

Image Control

Button Controls

Redirecting User

Using HyperLinks

RadioButton Control

RadioButtonList

CheckBox Control

CheckBoxList Control

DropDownList

ListBox Control

ImageMap Control

Event-Driven Programming

ASP.NET Page Structure

IsPostBack

Master Page

View State

Visibility of Controls

Formatting Controls

Applying CSS

Dynamic CSS

Using Style Class

Themes and Skins

Panel Control

PlaceHolder Control

AdRotator Control

Calendar Control

File Upload, Virtual Path

Validation Controls

Page Navigation

User Control

Separating Code-Presentation

Overview of ADO.NET

Data Binding

DataBinding List Control

ASP.Net Themes and Skins

A theme is a collection of CSS property settings that allow you to define the look of the pages and controls, and apply the same look across pages in a web application or across all web applications on a server.

Themes are the way to define the formatting for various controls and can be reused in multiple pages. Later, by applying minor changes on the themes, the complete appearance of website can be changed.

Steps to create Themes or Dynamic Style:

  1. Create a App_Themes Folder.
  2. Create the Theme sub folders.
  3. Create CSS file and write the following code
static string myTheme = "White";
protected void Page_PreInit(object sender, EventArgs e)
{
	Page.Theme = myTheme;
}
protected void LinkButton1_Click(object sender, EventArgs e)
{
	myTheme = "Red";
	Response.Redirect(Request.CurrentExecutionFilePath);//Redirect to same page.
}
protected void LinkButton2_Click(object sender, EventArgs e)
{
	myTheme = "Green";
	Response.Redirect(Request.CurrentExecutionFilePath);//Redirect to same page.
}
protected void LinkButton3_Click(object sender, EventArgs e)
{
	myTheme = "Blue";
	Response.Redirect(Request.Url.ToString());//Redirect to same page.
}

What is ASP.Net Skins file

After adding the theme folder, add the SkinFile.skin file by right-clicking on the ASP.Net theme folder. Now add the ASP.Net controls inside the SkinFile.Skin and assign the Style to the controls using their properties as in the following:

<asp:Label runat="server" ForeColor="Green" SkinID="lbltxt" Text="Label"></asp:Label>
<asp:TextBox runat="server" ForeColor="Blue" SkinID="txt"></asp:TextBox>

Points to Remember:

  1. A control Id cannot be assigned to ASP.Net controls inside the SkinFile.skin.
  2. Assign SkinId to the ASP.Net controls inside the SkinFile.skin.
  3. The SkinId should be uniquely defined because duplicate SkinId's per control type are not allowed in the same theme.
  4. Only one default control is allowed in the same theme.

Assigning the Skin to the ASP.Net Controls

<asp:Label ID="Label1" runat="server" SkinID="lbltxt" Text="Label"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" SkinID="txt"></asp:TextBox>

Advantages of ASP.Net Skins

  1. Skins can be used to apply the common style to the individual ASP.Net controls.
  2. You can apply a style to the specific control.
  3. Gives the same consistency to the multiple controls in the web application.