Navigation

Search

Categories

On this page

Creating User Selectable Themes

Archive

Blogroll

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

RSS 2.0 | Atom 1.0 | CDF

Send mail to the author(s) E-mail

Total Posts: 112
This Year: 50
This Month: 0
This Week: 0
Comments: 0

Sign In

 Wednesday, April 09, 2008
Wednesday, April 09, 2008 11:12:57 AM (Eastern Standard Time, UTC-05:00) ( )


Allowing users to select a theme for a site is a cool option and is pretty easy to do.  In these examples, I'll show how to allow a user to select a theme from a dropdownlist for a single page and for a master page which will carry the theme throughout the whole site.

The first step is to actually create your themes.  This is done by creating a App_Themes folder in the root of the site and then creating a separate folder for each theme beneath this one. For example, App_Themes/ThemeGreen/style.css,  App_Themes/ThemeBrown/style.css etc.

A Single Page

The theme for a page is created early during the page lifecycle - the page_preinit stage so we have to establish the theme at this point.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
        <asp:ListItem Value="ThemeGreen">Theme Green</asp:ListItem>
        <asp:ListItem Value="ThemeBrown">Theme Brown</asp:ListItem>
      </asp:DropDownList>
    </div>
    </form>
</body>
</html>

Default.aspx.vb

Partial Class _Default
    Inherits System.Web.UI.Page

  Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit
    If (Not Request.Form Is Nothing And Request.Form.Count > 0) Then
      Me.Theme = Request.Form("DropDownList1")
    End If
  End Sub
End Class
A Master Page

--masterpage.master

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server" />
<body>
  <form id="form1" runat="server">
    <div>
      <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
        <asp:ListItem Value="ThemeBlue">Theme Blue</asp:ListItem>
        <asp:ListItem Value="ThemeRed">Theme Red</asp:ListItem>
      </asp:DropDownList>
    </div>   
  </form>
</body>
</html>
--masterpage.master.vb
Partial Class MasterPage
  Inherits System.Web.UI.MasterPage
End Class
--default3.aspx
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false"
  CodeFile="Default3.aspx.vb" Inherits="Default3" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
  Selectable them in master page drop down list set in a new base class (BasePage)
  which replaces Page as the parent for the page.
</asp:Content>
--default3.aspx.vb
Partial Class Default3
  Inherits BasePage
End Class

--App_Code/BasePage.vb

Imports Microsoft.VisualBasic

''' <summary>
''' Base class for Theme based pages.
''' </summary>
Public Class BasePage
  Inherits Page

  Protected Overrides Sub OnPreInit(ByVal e As System.EventArgs)
    MyBase.OnPreInit(e)
    If (Not Request.Form Is Nothing And Request.Form.Count > 0) Then
         Me.Theme = Request.Form(Me.Master.FindControl("DropDownList1").UniqueID)
    End If
  End Sub
End Class