Stone Coast Web Design's Weblog

Navigation

Search

Blogroll

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

| |

E-mail

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

Wednesday, April 09, 2008

Creating User Selectable Themes

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

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

Comments [0] | Trackback |

Name
E-mail
Home page

	Remember Me
Comment (HTML not allowed)
Enter the code shown (prevents robots):

Mostly Web Development

Navigation

Search

Categories

On this page

Archive

Blogroll

A Single Page

A Master Page