Bookmark and Share

Custom Style Schemes

Try one: Default, Groovy, Halloween or Undersea.

One of the more popular questions asked by visitors regards how the custom style scheme feature works. This article describes the technique used here.

Two basic style sheets are used throughout the site, one for "main" pages and one for "articles." Each alternate style or scheme likewise uses two style sheets. These are located in individual sub directories named after the scheme.

They contain style rules that override selected settings in the corresponding default. The ones currently available differ mostly in colors and fonts but other changes could be made too, such as for layout.

When a user selects one of the schemes, a cookie is set. Server side script code in each page uses this cookie to include the appropriate style sheet.

Setting the Cookie

The cookie is set using an ASP script with the scheme name passed in the URL query string.

<a href="/common/setscheme.asp?scheme=name">name</a>

The script is fairly short. It first checks the query string for a value. If found, it sets a cookie named "scheme" with the given value. If not, it deletes the cookie by setting its expiration date to the previous day.

<% 'Set scheme cookie.

   Response.Buffer = true
   if Request.QueryString("scheme") <> "" then
     Response.Cookies("scheme") = Request.QueryString("scheme")
     Response.Cookies("scheme").Expires = _
       FormatDateTime(DateAdd("d", 60, Now()))
   else
     Response.Cookies("scheme").Expires = _
       FormatDateTime(DateAdd("d", -1, Now()))
   end if

   'Send back to referring page.

   Response.Redirect(Request.ServerVariables("HTTP_REFERER")) %>

The last step sends the user back to the page that was linked from.

Including the Style Sheets

Individual pages on the site use ASP code to check for this cookie.

<link href="/common/main.css" rel="stylesheet" type="text/css">
<% if Request.Cookies("scheme") <> "" then %>
<link href="/common/<% = Request.Cookies("scheme") %>/main.css"
  rel="stylesheet" type="text/css">
<% end if %>

The default style sheet is always included. If the "scheme" cookie has been set, the code adds a LINK tag for the corresponding style sheet.

The cookie can also be used to selectively add or change other HTML code in individual pages. For example, different images for the BrainJar graphic on the main site pages are defined for each scheme.

<% if Request.Cookies("scheme") <> "" then
     imgDir = Request.Cookies("scheme") & "/"
   else
     imgDir = ""
   end if %>

...

<img src="/graphics/brainjar.gif" ... />

Like the style sheets, the images are stored in different sub directories, named after the corresponding scheme. The code above sets the correct URL for each scheme.

Other Notes

Most of the pages on the site follow a basic template, using server side include files. This makes it easy to make changes to several pages at once by updating a single file.