PHP Style Switcher

Posted by martin on 1 Jun 2002, last updated on 27 Aug 2002.

Separate the content from presentation and let your visitors choose a color scheme for your site; uses PHP sessions.

Configuration

Because the script relies on the built-in session support in PHP a good thing to start off with (if you have access to the server) is to compile PHP with --enable-trans-sid.

Note: As of PHP 4.2.0 transparent session support is built-in PHP by default.

This setting will allow PHP to pass the session identifier to the next script even if cookies are not available. You will also have to make sure you've got session.use_trans_sid = 1 in your php.ini or a .htaccess file. This is the default setting, so if you haven't changed it, it should be okay.

Let's do it

First off create a simple stylesheet, mine is named common.css, which will be used always, no matter which styling the user chooses. This stylesheet should set up the style which will be applied always, i.e. do not include things like colors, because we want the user to be able to choose those. Then create a few stylesheets with various settings of the items you want to be configurable (like color, fonts, etc.).

The common stylesheet is not available here, just use some template if you have one.

Sample style sheets

I have this one saved as gray.css in a directory called style.

body {
 background : #ccc;
 color : #000;
}

a:link, a:visited {
 color : #444;
 background:transparent;
}

/* Keep below :link and :visited */
a:hover, a:active {
 color : #666;
 background : transparent;
}

.banner {
 background : #aaa;
}

And the following is white.css:

body {
 background : #eee;
 color : #000;
}

a:link, a:visited {
 color : #009;
 background:transparent;
}

/* Keep below :link and :visited */
a:hover, a:active {
 background : #fff;
 color : #009;
}

h1, h2, h3 {
 color : #900;
}

.banner {
 background : #aaa;
}

You may explicitly set the color of h1, h2, h3 to inherit in gray.css if you want but this may present some incompatibilities.

The PHP code

Note: I use the PHP 4.1 superglobal arrays ($_GET, $_SESSION). If you want to make this backward-compatible just change all $_* variables to $HTTP_*_VARS in the following code.

session_start();
if ( isset($_GET['style']) ) {
 $_SESSION['style'] = $_GET['style'];
} elseif ( !isset($_SESSION['style']) ) {
 $_SESSION['style'] = 'gray';
}

if ( isset($_GET['navbar']) ) {
 $_SESSION['navbar'] =
 ($_GET['navbar'] == 'left') ? 'left' : 'right';
} elseif ( !isset($_SESSION['navbar']) ) {
 $_SESSION['navbar'] = 'right';
}

This code sends HTTP headers so it has to appear before any output no matter from PHP or HTML. It has to be also before the document type declaration. Exception is possible only when you use output buffering.

Start a session first -- which will fill in any saved variables from the previous page and check if we've got a GET variable named style, if so register it as a session variable and set it to the value of what's been passed. If the session is not registered the just set a default value else get it from the session. The same is made with the navbar just that we have only two possible values here and I used the short if-then-else form.

<link href="style/common.css"
 type="text/css" rel="stylesheet" />

<link
 href="style/<?php echo $_SESSION['style']?>.css"
 type="text/css" rel="stylesheet" />

Above is the HTML code used to link to the style sheets. It has to appear in the head of your HTML documents that will change colors.

<table border="0" summary="contents wrapper" class="wrapper">
<tr>

<?php
function navbar() {
?>
<td class="banner">
<p>Select your color scheme
</p>
<table border="0" summary="style sheet choosing controls">
<tr>
<td style="background : #cccccc">
 <a href="<?php echo $_SERVER['PHP_SELF']?>?style=gray"
 title="Change the stylesheet to have a gray background">
 &#160;&#160;</a></td>
<td style="background : #eeeeee">
 <a href="<?php echo $_SERVER['PHP_SELF']?>?style=white"
 title="Change the stylesheet to have a white background">
 &#160;&#160;</a></td>
<td style="background : #696969">
 <a href="<?php echo $_SERVER['PHP_SELF']?>?style=charcoal"
 title="Change the stylesheet to have a charcoal-like background">
 &#160;&#160;</a></td>
</tr>
</table>
<a href="somepage">Link1</a>
<a href="somepage1">Link2</a>
</td>

<?php
} // end navbar()

if ( $_SESSION['navbar'] == 'left' )
 navbar();
?>

<td class="content">
Some stuff
</td>

if ( $_SESSION['navbar'] == 'right' )
 navbar();
?>

</tr>
</table>

And this is the page wrapper. First a table is created and one row within it. The navbar function just prints some style sheet controls -- passing back a style="stylesheet" query string so that the page changes colors and other links. Basically the links to change the color will be the same color as the background for the desired style sheet, and since this is set through a style attribute non-CSS browsers won't display it (probably causingc onfusion).

When all is defined check first if the navbar should be on the left. If so print it, else just continue with the contents. Finally, a check if the navbar is on the right.

You can switch between left and right navbar just by passing back a navbar=left or navbar=right query (not shown here).

Want more

An improvement could be to use cookies to make changes permanent. I didn't use it as a default since cookies are not required to be available, allowing more browsers to use the feature since any browser can handle query strings (which is what you get with PHP sessions if cookies are unavailable).

Another thing to consider if you've got the time is to let visitors write their own style sheet. But remember that cookies are limited by size.

Comments