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.).

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 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.