User Selectable Themes in ASP.NET and VB

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 - User Selectable Themes in ASP.NET and VB

User Selectable Themes in ASP.NET and VB

ASP.NET User Interface and Themes Tutorial

Tutorial showing how you can let your users choose how a page looks, using ASP.NET Themes. VB 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!

For this example, there will be three simple themes to choose from, and they will be chosen from a drop-down menu.
First, add an ASP.NET folder > Theme for each theme you will create. Within each of these folders, you will need a CSS file and a Skin file.
Example CSS file:

td.title
{

font-size: 1em;
text-align: center;
font-family: verdana;
font-size: x-large;
font-weight: bolder;
color: Navy;

}
table.header
{

background-color: #cee9ff;

}
h1
{

font-size: large;
color: Navy;

}
h2
{

font-family: Verdana;
font-size: medium;
margin-top: 30;
color: Navy;

}
p
{

font-family: Verdana;
font-size: small;
color: Navy;
text-align: left;

}
hr
{

border: 0;
border-top: 2px solid Navy;
height: 2px;

}

Example skin file:

<asp:dropdownlist runat="server" ForeColor="white" BackColor="Blue" />

Master Page:

<form id="form1" runat="server">
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="header">

<tr>

<td class="title">Switchable Themes Example</td>

</tr>
<tr>

<td><hr /></td>

</tr>
<tr>

<td>
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</td>

</tr>
<tr>

<td><hr /></td>

</tr>

</table>
</form>

Content ASPX page:

<%@ Page Language="VB" MasterPageFile="~/Master1.master" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" Title="User Selectable Themes" StylesheetTheme="Blue" %>

<script runat="server">

Public Sub Page_PreInit()

' Sets the Theme for the page.
Me.Theme = "Blue"
If Request.Form IsNot Nothing AndAlso Request.Form.Count > 0 Then

Me.Theme = Me.Request.Form(4).Trim()

End If

End Sub

</script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<h1 id="title1">Switchable Themes on a Page</h1><br />

<h2 id="title2">

This is a custom page within a master page.</h2>

<p>Choose from the drop-down menu below to change the color of this page.</p>

<br /><br />
<asp:dropdownlist id="changeThemes" runat="server" autopostback="true">

<asp:listitem value="Blue">Change the page to blue!</asp:listitem>
<asp:listitem value="Red">Change the page to red!</asp:listitem>
<asp:listitem value="Green">Change the page to green!</asp:listitem>

</asp:dropdownlist>

</asp:Content>

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

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

Looking for more ASP.NET Tutorials? Click Here!


Developer Resources