CSS and Theme in ASP.NET 2.0 and C#

Asp.Net Tutorials

Categories

Advanced Technologies

Internet Browsers

Website Navigation

User Interface and Themes

Visual Web Developer

Suggest Tutorial

Navigator: Home - Tutorials - User Interface and Themes - CSS and Theme in ASP.NET 2.0 and C#

CSS and Theme in ASP.NET 2.0 and C#

ASP.NET User Interface and Themes Tutorial

In this tutorial, we will show you how to use CSS and Theme to define the style of the page in ASP.NET 2.0 and C#.

Download the Full Working Version of this Project written with Visual Studio.NET C# 2005 Here!

Looking for the VB.NET 2005 Version? Click Here!

Looking for more ASP.NET Tutorials? Click Here!

We will use the namespace of System.Web.UI in this tutorial.

using System.Web.UI

Please add two controls of labels, textboxs and buttons to the webpage page, and a control of dropdownlist to select color of controls in the page. Then please create theme folder of BlueTheme and PurpleTheme, and add Control.skin, Default.css to the folders.

protected void Page_PreInit(object sender, EventArgs e)
{

Page.Theme = Request["ChooseTheme"];

}

'Control.skin of the BlueTheme

<asp:TextBox BackColor="#c4d4e0" ForeColor="#0b12c6" Runat="Server" />
<asp:Label ForeColor="#0b12c6" Runat="Server" />
<asp:Button BackColor="#c4d4e0" ForeColor="#0b12c6" Runat="Server" />

'Control.skin of the PurpleTheme

<asp:TextBox BackColor="#ccccff" ForeColor="#602bff" Runat="Server" />
<asp:Label ForeColor="#602bff" Runat="Server" />
<asp:Button BackColor="#ccccff" ForeColor="#602bff" Runat="Server" />

The front end Default.aspx page looks something like this:

<fieldset>
<legend>Asp.net2.0 Theme Demo</legend>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="tableStyle">

<tr>

<td colspan="2" align="center">
Select a theme of the page:
<asp:dropdownlist id="ChooseTheme" runat="server" autopostback="true">
<asp:ListItem Value="BlueTheme">Select Color</asp:ListItem>
<asp:ListItem Value="BlueTheme">Blue</asp:ListItem>
<asp:ListItem Value="PorpleTheme">Purple</asp:ListItem>
</asp:dropdownlist>
</td>

</tr><tr>

<td height="23px" class="tdStyle" colspan="2"></td>

</tr>
<tr>

<td align="center" height="52px" style="width: 513px; text-align: right;">
<asp:Label ID="Label1" runat="server" Text="Enter Your Name:" Width="141px"></asp:Label> 
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>

</tr>
<tr>

<td align="center" height="52px" style="width: 513px; text-align: right;">
 <asp:Label ID="Label2" runat="server" Text="Enter Your Nickname:" Width="164px"></asp:Label> </td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>

</tr>
<tr>

<td align="center" height="50px" style="width: 513px; text-align: right;">
<asp:Button ID="Button1" runat="server" Text=" OK " /> 
</td>
<td>
<asp:Button ID="Button2" runat="server" Text="Cancel" />
</td>

</tr>
<tr>

<td height="23px" colspan="2"></td>
</tr>
<tr>
<td colspan="2"><br /><br /></td>

</tr>

</table>
</fieldset>

The flow for the code behind page as follows.

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
{

}
protected void Page_PreInit(object sender, EventArgs e)
{

Page.Theme = Request["ChooseTheme"];

}

}

Download the Full Working Version of this Project written with Visual Studio.NET C# 2005 Here!

Looking for the VB.NET 2005 Version? Click Here!

Looking for more ASP.NET Tutorials? Click Here!


Developer Resources