PHP stylesheet switcher

The design brief

This project evolved as a result of a question posted in CSS Creator. In the post the member asked about ways s/he could organise and maintain a large supermarket site with many thousands of pages. Most importantly, the client wanted to be able to change the look and feel of pages within the site depending on such factors as the season or up-coming holidays.

The question piqued my interest. This appeared to present a golden opportunity to flex my developing PHP muscles. It also seemed to present a golden opportunity to explore a few of my deep interests - ie, my interest in coding for the web, my love of colour and creating accessable dynamic web content.

The design brief, therefore, was relatively straightforward. Firstly, create a webpage that could change it's colours and/or style in a controlled manner, and, secondly, tap into cool colour combinations that would, hopefuly, create accessable and readable web pages. You can see the switcher in action by reloading the page .

Constructing the palette

COLOURlovers is one of my favourite sites on the web. The brain child of Darius A Monsef, CL is a extremely cool place where designers and artists gather to make their own colours and palettes. I orginally arrived at CL whilst on a quest to find the perfect colour. I haven't left since. It is a very creative place full of creative people and the atmosphere is supportive, warm and friendly. It feels like a safe place to be.

I wanted to create a colour swapping system that would be fairly easy to maintain. I determined that the best way would be to chose a series of colours based on two complimentary colours and base the palette on those. This I did and came up with colours one and three in the palette.

Colour number	PHP name	Function
Colour one	$primary	Main background
Colour two	$secondary	Main contrast
Colour three	$tertiary	Secondary background
colour four	$quaternary	Secondary contrast
colour five	$quinary	Highlights

Colours two and four would function as a contrast to the primary colours and be, to a greater or lesser degree, readable. I was aiming at the W3C's recommendation of a contrast ratio of 5:1 - though what the ratio actually relates to is somewhat problematic and ill defined. You can read more here.

Contrast, too, can be an extremely tricky topic. Create too much contrast, and the effect can be jarring and drive people from your page. If there is too little contrast readibilty and legibility begin to suffer.

I orginally hoped that the relationship between the two primary colours and the secondaries would allow me to extend the use of the palette and create multiple colour schemes from the one set of colours. However, time constraints didn't allow me to explore the issue as deeply as I had envisaged. There were just too many balls to keep in the air. This is definitely marked down for a later incarnation of this idea.

The fifth colour would function primarily as the colour of the borders, links and highlights. I've provided a link to a sample palette that you can use as a template.

Folder structure

I think it is very important to set up the folder structure carefully before you begin. If you are not organised then maintaining and updating your site/s will be extremely difficult. This is particularly true if you are using php includes to change your CSS.

I generally setup my folder structure in the following way. I have seperate folders for images, stylesheets and inputs. For this project, I have added an extra folder layer purely for the colour palettes I intend to use.

The image folder is fairly self explanatory. In here will be stored the graphics I will use, including both background and the palette images. At this stage I intend to make a graduated background images for each page change. Each background image will be 2000px wide by 20px high and will be centered horizontally across the layout. Here is a sample background image.

The input folder I use for my menus and footer links. I centralise these, and add them into my pages as PHP includes, so I only have to update my links in one place. You can read more about this technique at Tizag tutorials.

I keep all my stylesheets in the stylesheet folder. The markup files are kept in the root directory - in this case 'Code monkey'.

The switcher code

I wanted a fairly unobtrusive layout to test this idea so I opted for a simple single coloumn elastic page. I then followed these steps to get the PHP switcher to work.

Firstly, I modified my stylesheet link on the primary markup pages to include the 'media' element. I then ensured that I saved my CSS files with .php extensions. You can download a copy of the XHTML file if you want to see the source code. Save to your root directory under the name 'index.php'.

<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/basic.php" />

Secondly, I added this code to the very top of my stylesheet. This allows me to use embedded PHP scripts to directly modify the CSS. This is a cool little technique that I have only recently discovered.

<?php header("Content-type: text/css"); ?>

Next, I added a PHP random number generator to my stylesheet. This allows me to switch the colour palette and background image associated with the stylesheet. I plan to change this in the future, so the change is triggered by a PHP date function. The random number code simply changes the stylesheet link to a external colour palette everytime the page reloads. I can use the range function ($a=range(1,4);) to adjust for the number of palettes I wish to include. You can download a copy of the CSS file if you wish. Simply add a .php extension and save in your stylesheets folder.

<?php
$a=range(1,4);
shuffle($a);
$rand1=$a[0];

include('../palettes/palette'.$rand1.'.php'); 
?>

This is a sample palette page based on my COLOURlovers palette 'No Wheel Drive'. You can add your own colours, names and image links and then save as 'palette1.php'. Save further palettes as 'palette2.php', 'palette3.php' and etc. The random number generator will dynamically change the palette link everytime the page reloads. A sample of the palette code is here. Add this to your palette folder with a .php extension.

<?php 
$palettename = "no wheel drive";
$paletteimage = "../images/Nowheeldrive.png";
$primary = "#e0e6d8";
$secondary = "#074f00";
$tertiary = "#73A18E";
$quaternary = "#b6d665";
$quinary = "#007070"; 
?>

Finally, I add PHP statements into my CSS in place of colours and background images. These will now be added as dynamic elements decided by the random number generator.

body {margin: 0;
padding: 0;
background: url(<?php echo '../images/bg'.$rand1.'.png'; ?>) center repeat-y;
}

#container {max-width:900px;
min-width:700px;
min-height: 100%;
margin: 0 auto;
background:<?php echo $primary ?>;
border:2px groove <?php echo $quinary ?>;
}

So there it is. A simple little stylesheet switcher. There is no reason you couldn't modify the code to switch according to date or time to present an 'autumn theme' or a 'tropical theme'. With just a few well chosen colours and graphics a great many effects are possible. Imagination is the only limitation.

You can contact me here.