Server Intellect
 
Home   Asp.Net Tutorials   What's New   Newsletter   More Resources
 
 
  Categories
Advanced Technologies
AJAX
Internet Browsers
Controls
Database
Email
Error Handling
File
Graphics
Website Navigation
Network
Performance
User Interface and Themes
Validation
Visual Web Developer
Web Services
XML
Suggest Tutorial


Navigator: Home - Tutorials - User Interface and Themes - Using CSS and Changing them Dynamically ASP.NET & C#
Using CSS and Changing them Dynamically ASP.NET & C#


ASP.NET User Interface and Themes Tutorial

This tutorial shows how to implement CSS StyleSheet usage with ASP.NET and how to change them dynamically. C# version.

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!

This tutorial will show how easy it is to implement CSS stylesheets to an ASPX page, and also how to let the user dynamically change the look and feel of the website in an instant. In the example below, we use radio buttons to change between a light and a dark look to the website. This is done with two separate CSS files:
Two simple example CSS files are as follows.
Dark.css:

body
{
color: #cc0033;
background-color: #996666;
}
.reverse
{
background-color: White;
color: Maroon;
}

Light.css:

body
{
background-color: White;
color: Black;
}
.reverse
{
background-color:Black;
color:White;
}

To attach the StyleSheet, we add the following code inside the <head> tags:

<link href="dark.css" rel="stylesheet" type="text/css" id="stylesheet" />

The ASPX code will look something like this.
Notice the radio buttons' OnCheckedChanged attributes.

<form id="form1" runat="server">
<div>
<asp:Label ID="CaptionLabel" runat="server" Style="font-size: 1.2em; font-family: Arial, 'Times New Roman', Verdana; background-color: #99ffff" Text="Label"></asp:Label>
<asp:TextBox ID="NumberTextbox" runat="server" Style="background-color:Blue; color:Yellow;"></asp:TextBox>&nbsp;
<asp:Label ID="ResultLabel" runat="server" Text="Label" CssClass="reverse"></asp:Label>
<asp:RadioButton ID="radioLight" runat="server" AutoPostBack="True" GroupName="grpSelectStylesheet" OnCheckedChanged="SwitchStylesheets" Text="Light" />
<asp:RadioButton ID="radioDark" runat="server" AutoPostBack="True" Checked="True" GroupName="grpSelectStylesheet" OnCheckedChanged="SwitchStylesheets" Text="Dark" />
</div>
</form>

The code simply switches the StyleSheets upon radiobutton click. The code-behind should look something like this:

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 SwitchStylesheets(object sender, EventArgs e)
{
if (radioDark.Checked)
stylesheet.Href = "dark.css";
if (radioLight.Checked)
stylesheet.Href = "light.css";
}
}

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







Server Intellect Rocks