The design brief
This project evolved from a combination of some of my favourite things. Cascading style sheets (CSS) as a way of controlling and styling HTML markup. PHP for it's ability to create dynamic web content. And, my love of colour.
My design brief was relatively straightforward. Firstly, I wanted to create a webpage that would change it's colours everytime the page was loaded. I wanted to build a layout switcher. I decided to combine PHP and CSS.
Secondly, the palette had to be a workable and accessable web design. Therefore the contrast between the foreground and background colour had to be enough to be readable.
Finally, it had to be based on the ColourLOVER format of five colours.
Constructing the palette
ColourLOVERS is one of my favourite sites on the web. The brain child of Darius A Monsef, CL is a very cool place where people 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 determined that the best way to chose my series of colours would be to concentrate on finding 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 will function as a contrast to these colours and be, to a greater or lesser degree, readable. Contrast, however, is a tricky topic. Too much contrast, and the effect can be jarring. Too little, and readibilty begins 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 palette. This didn't turn out to be possible at this stage of the project. Too many balls to keep in the air. Maybe for a later incarnation.
The fifth colour will 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
You need to follow these steps in order to get the PHP switcher to work.
Firstly, modify your stylesheet link on your primary markup pages to include the 'media' element. Then ensure that you save your CSS files with .php extensions. Eg,
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/styling.php" />
Secondly, add this code to the very top of your stylesheet. This will allow you to use embedded PHP scripts to modify the CSS.
<?php header("Content-type: text/css"); ?>
Next, add a PHP random number generator to your stylesheet to switch the colour palette and background image associated with the stylesheet. The code simply changes the stylesheet link to a external colour palette. Use the range '$a=range(1,4);' to adjust for the number of palettes.
<?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'. 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.
<?php $palettename = "no wheel drive"; $paletteimage = "../images/Nowheeldrive.png"; $primary = "#e0e6d8"; $secondary = "#074f00"; $tertiary = "#73A18E"; $quaternary = "#b6d665"; $quinary = "#007070"; ?>
Finally, I add PHP 'include' statements into my CSS in place of colours. The colours will now be added as dynamic elements decided by the random number generator.
body {margin: 0;
padding: 0;
background:<?php echo $secondary ?>;
}
#container {max-width:900px;
min-width:700px;
min-height: 100%;
margin: 0 auto;
background:<?php echo $primary ?>;
border:2px groove <?php echo $quinary ?>;
}