Design customization with PHP

Introduction

Let the visitors of your site decide your site's colors, your sidebar's placement, and various other configurables with the help of PHP sessions. Just create several style sheets and let your users decide which to use.

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, which will forward the session identifier to the next script even if cookies are not available (which is the default transfer of session identifiers). 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, you should be okay.

Let's do it

First off create a simple stylesheet, named common.css, which will be used always, no matter which styling the user chooses. This stylesheet should set up style items which will not be configurable and it should exclude items 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 font-family, color, etc.).

You are not bound to using this separation but I think colors are what most people will like or dislike in your site's design, of course you can extend it to fonts but I think most people will be glad to see a sans-serif font always.

axed by mwarden-->

Sample style sheets

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

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

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

a:hover, a:active { /* Keep below :link and :visited */
        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;
}

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

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

.banner {
        background : #aaa;
}

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

The common.css is not given to save some space and anyway it probably won't fit your needs.

axed by mwarden -->

The PHP code

Note: I use PHP 4.1's collection notation. 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_register('style');
	$_SESSION['style'] = $_GET['style'];
}
if (! isset($_SESSION['style'])) {
	$style = 'gray';
} else {
	$style = $_SESSION['style'];
}

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

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 $style?>.css" type="text/css" rel="stylesheet" />

Above is the HTML code used to link to the style sheets. It has to be put 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">      </a></td>
<td style="background : #eeeeee">
	<a href="<?php echo $_SERVER['PHP_SELF']?>?style=white"
		title="Change the stylesheet to have a white background">      </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">      </a></td>
</tr>
</table>
<a href="somepage">Link1</a>
<a href="somepage1">Link2</a>
</td>

<?php
}	//	end navbar()

if ( $navbar == 'left' )
	navbar();
?>

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

if ( $navbar == 'right' )
	navbar();
?>

</tr>
</table>

Above 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 diplay it (probably causing confusion).

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.

Want more

An improvement could be to use cookies to make changes permament. 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.