Hacking the code

The first thing we need to put together is our include file. The rest will be a cinch.

The include file contains every bit of working code in our application. Here's the include file we'll be customizing. We'll step through it one line at a time.

Define our styles.

First, we need to look at defining all our style names and folders that we're going to use. This is done using a two dimensional array, called "StyleArray"

<%
Option Explicit

'First number is the number of values
'Second number is the number of styles
'The numbers start at 0
Dim StyleArray(1,2)

'StyleArray(col,row)
'Array def is
'0=StyleName
'1=Foldername
StyleArray(0,0) = "Keyboard"
StyleArray(1,0) = "Keys"
StyleArray(0,1) = "Blue Tabs"
StyleArray(1,1) = "Colored"
StyleArray(0,2) = "Manilla Tabs"
StyleArray(1,2) = "Manilla"

The StyleArray declaraion [Dim StyleArray(1,2)] says that our array has 2 colums, and 3 rows. The array starts counting at zero, so we add one to each of the values. Our two columns are the style name and the style folder. We have threerows, to hold our three styles.

Each line in the array lists the row and column that value belongs to. This line:

StyleArray(0,1) = "Blue Tabs" 

Says that Column 1, Row 2's value is "Blue Tabs." Blue Tabs is the name of the second style in our list. The following line:

StyleArray(1,1) = "Colored" 

Says that Column 2, Row 2's value is "Colored." This is the folder name for all the images and style sheets associated with our Blue Tabs scheme.

If you wanted to add an additional style, you would change the StyleArray line to read:

Dim StyleArray(1,3)

That would add an additional row to our array, and you could define a new style using the following syntax:

StyleArray(0,3) = "New Style"
StyleArray(1,3) = "NewStyleFolder"

Setting our Cookies and Variables

The next section of our code sets the cookies needed to maintain the user's style choice across sessions. This means the user can choose a style, close their browser, and the last style they chose will still be active when they return to the site.

Dim MyStyleID, MyStyle, MyStyleFile, MyStyleFolder
If Request.Querystring("style") <> "" Then
	MyStyleID = CInt(Request.Querystring("style"))
	Response.Cookies("StyleID") = MyStyleID
	Response.Cookies("StyleID").Expires = Date + 100
Else
	If Request.Cookies("StyleID") <> "" Then
		MyStyleID = CInt(Request.Cookies("StyleID"))
	Else
		MyStyleID = 0
	End If
End If

At the same time, we're going to check for invalid style values. So if the user enters a StyleID that doesn't exist, they will just get the default style, and the page won't give them any errors.

'Check for invalid ID
If MyStyleID > UBound(StyleArray)+1 Then
	MyStyleID = 0
	Response.Cookies("StyleID") = MyStyleID
	Response.Cookies("StyleID").Expires = Date + 100
End If

Now we set our variables that we'll be using to change folders and display the currently selected style name.

'Set sytle variables
MyStyle = StyleArray(0,MyStyleID)
MyStyleFolder = StyleArray(1,MyStyleID)

Setting up our navigation

In order for a user to switch styles, they obviously need to have some links to click on. This following function displays a link for each style in the list, but disables the currently selected style. This makes the navigation easier to use, and the user can't click on the style they are currently viewing.

If you want to change the divider you use between each style's link, just change the NameDivider line to display the desired characters.

Function StyleNav
Dim NameDivider, iCount, StyleID
For iCount = 0 to UBound(StyleArray, 2)
    If iCount = UBound(StyleArray, 2) Then
		NameDivider = ""
	Else
		NameDivider = " | "
	End If
	if Request.Cookies("StyleID") <> "" Then
		StyleID = CInt(Request.Cookies("StyleID"))
	Else
		StyleID = 0
	End If
	If iCount = StyleID Then
		Response.Write StyleArray(0,iCount) & NameDivider
	Else
		Response.Write("<a href=""" & Request.ServerVariables("SCRIPT_NAME") &_
 		"?style=" & iCount & """>" & StyleArray(0,iCount) & "</a>" & NameDivider)
	End If
Next
End Function
%>

Finishing up your include

Now that you've customized all your code, and have all your styles defined, put all the code from this page into a file all by itself. This file shouldn't contain anything except the style changer code. Name the file "changer.inc" and place it in the root of your site. Here's our completed changer include.

So now let's make our pages switch styles.