Using CSS and Changing them Dynamically ASP.NET & VB

Categories

Advanced Technologies

User Interface and Themes

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

Using CSS and Changing them Dynamically ASP.NET & VB

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. VB version.

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;

}

We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!

Light.css:

body
{

background-color: White;
color: Black;

}
.reverse
{

background-color:Black;
color:White;

}

I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.

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

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

<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> 
<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>

Try Server Intellect for Windows Server Hosting. Quality and Quantity!

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

Imports Microsoft.VisualBasic
Imports System
Imports System.Data
Imports System.Configuration
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls

Partial Public Class _Default

Inherits System.Web.UI.Page
Protected Sub SwitchStylesheets(ByVal sender As Object, ByVal e As EventArgs)

If radioDark.Checked Then

stylesheet.Href = "dark.css"

End If
If radioLight.Checked Then

stylesheet.Href = "light.css"

End If

End Sub

End Class

Looking for the C#.NET 2005 Version? Click Here!

Looking for more ASP.NET Tutorials? Click Here!

Download Project Source - Enter your Email to be emailed a link to download the Full Source Project used in this Tutorial!

100% SPAM FREE! We will never sell or rent your email address!


Developer Resources