PHP Styleswitcher: Version 2 Tutorial

Tutorial

Step 1: Download the Code
Step 2: Upload the Code
Step 3: Update the "Switcher" script
Step 4: Updating your Files
Step 5: The Final Step

Step 1: Download the Code

In the new version, you need to download the code.

Step 2: Upload the Code

Now that you've downloaded the code, you can open your FTP program to upload the file to your site.

As a suggestion, it may be best to put the styleswitcher files either at the root (the highest level folder of your site) level or in a PHP folder in the root folder. This makes it easy to find later. Here's an example of what your site may look like:

css/
php/
   Styleswitcher.php
   switcher.php
index.php

NOTE: For PHP code to execute, files (usually) must have the extension ".php". This means that if your site current uses ".html", you may need to change the file extensions.

Step 3: Update the "Switcher" script

The next step involves updating the "switcher.php" file to accept changes from your users.

Open the "switcher.php" file in a text editor. The couple lines of code:

if(!isset($reqPath)){ $reqPath = "./"; }
require_once($reqPath. "Styleswitcher.php");

include the Styleswitcher code. The variable $reqPath is important because it should contain the path, relative to the "switcher.php" file, to your "Styleswitcher.php" file. If you followed the recommendation in Step 2, these files will be located in the same directory, so this matter is not important.

The next important line of code creates the "Styleswitcher object". An object is, for this purpose, creates a small bundle of code and information that we will use to perform the style switching.

Now look at these lines of code:

$ss->addStyle("basic",  "basic.css", "screen", "", true);
$ss->addStyle("blue",   "blue.css");
$ss->addStyle("green",  "green.css");
$ss->addStyle("large",  "large.css");
$ss->addStyle("normal", "small.css");

Each line adds a new style to our Styleswitcher. There are two basic style types you may handle with the new Styleswitcher: dynamic and static. Static stylesheets are always present, whether or not a user has a cookie set. Dynamic will be used if the user has a cookie set (or based on a few other rules). In this example, the "basic" style is going to always be present.

Modify these lines of code to add your styles to the styleswitching object. Here is the syntax for adding styles (also see the documentation):

$object->addStyle(styleName, file [, styleMedia, styleTitle, static]);

The styleName is the name (without spaces or strange characters) used in cookies and setting styles. file points to the CSS file. styleMedia is an optional argument that allows you to change the style's media type (e.g., screen, print, etc.). styleTitle is an optional argument to allow you to set the style's "title" attribute. static should equal true or false, depending on whether the style is static or dynamic.

For instance, if you had only three stylesheets, one of which is always present and active (therefore static), and two others that determined the font size, you may implement this code:

$ss = new Styleswitcher();
$ss->addStyle("static", "static.css", "", "", true);
$ss->addStyle("normal", "normal.css");
$ss->addStyle("large", "large.css");

The next step in updating this script involves the idea of "sets". Sets are merely groups of stylesheets, of which only one may be active. If a user does not have a style from a set selected, the default style is selected (otherwise, the style that they have selected will be used. In the example below, the "normal.css" file is probably going to be the default for a font set. The user may select to use the "large.css" file, but may not select to change the site at all.

The main reason for sets is to keep a page from calling two conflicting stylesheets (like the normal and large text stylesheets above). In another word, it controls multually exclusive styles.

In the "switcher.php" script, the following code set's up two sets and adds the styles to those sets.

$ss->createSet("fonts");
$ss->addStyleToSet("fonts", "large");
$ss->addStyleToSet("fonts", "normal", true);

$ss->createSet("style");
$ss->addStyleToSet("style", "blue", true);
$ss->addStyleToSet("style", "green");

The syntax for creating a style set is merely:

$object->createSet(setName)

To add styles to a set, use:

$object->addStyleToSet(setName, styleName [, default])

If the style you are adding is the default, set the last argument to "true".

The next few lines of code set some of the important options for our styleswitcher: the domain for all the cookies and the name of the cookie to be used. By default, the styleswitcher will use the "sitestyle" name for the cookie to be backward compatible (so you do not need to set this option if you do not want to).

The last line merely tells the styleswitcher to process the information.

UPGRADE NOTE: By default, cookies from the old styleswitcher and the new version should be compatible. If you do not want to confuse your old cookies with the current ones, you may use the Styleswitcher field cookieName.

NOTE: After making these updates to the "switcher.php" file, don't forget to upload the modified copy.

Step 4: Updating your Files

Step 3 is the longest step in this process, but the next step gets to use much of the code you just wrote. Now in your website files, you need to include some PHP code rather than your stylesheet declartions.

Take a look at the example source code. Notice how the styleswitcher code is almost exactly the same! Instead of using the "start" method this time, we use the "printStyles" method. Because we're trying to output the stylesheet links, we do not need to worry about the information sent to the page.

Two quick notes: first, note that at the beginning of the example source code, there is the following two lines:

if(!isset($reqPath)){ $reqPath = "./"; }
require_once($reqPath ."Styleswitcher.php");

You may remember this from the switcher code. This code is grabbing the Styleswitcher code so we can use it. What is important is that the $reqPath variable point to the directory where the file is located (of course). For example, for a homepage you may use this code:

$reqPath = "php/";

For a file located one directory up (like an "about" folder), try this:

$reqPath = "../php/";

If you receive an error like this:

Warning: main(../Styleswitcher.php) [function.main]: failed to create stream: 
No such file or directory in /switcher/v2/example.php on line 13
Fatal error: main() [function.main]: Failed opening required '../Styleswitcher.php' 
(include_path='.:/usr/local/lib/php') in /switcher/v2/example.php on line 13

You do not have the correct $reqPath set (ie, you're trying to open a file that does not exist).

The second quick note is for those people who use the same stylesheets for many parts of the web site. Rather than edit all those pages, you can include some code from one file that handles the CSS code. For example, Contrastsweb.com uses one file to manage stylesheets.

To implement this one your site, follow this example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title>Contrastsweb.com / About</title>

 <!-- Stylesheet data -->
 <?php include("../inc/stylesheets.php"); ?>

After you have made the changes to the necessary files, upload them to your server.

Step 5: The Final Step

The last step is to give your users a way to change the stylesheets on your web site. Wired gives their users text links to change font sizes, A List Apart gives their users form buttons to change font faces.

Here is code for various mechnaisms you can use on your page (also refer to the documentation for more information):

Text links:

<a href="php/switcher.php?set=large">Large Text</a> | 
<a href="php/switcher.php?set=normal">Normal Text</a>

Form buttons:

<form action="php/switcher.php" method="post">
<input type="hidden" name="inputStyle1" value="fonts" />
<input type="submit" name="fonts" id="fonts1" value="Large Text" />
<input type="submit" name="fonts" id="fonts2" value="Normal Text" />
</form>

Form Radio Buttons:

<form action="switcher.php" method="post">
<!-- Automatically redirect to the referer -->
<input type="hidden" name="referer" id="referer" value="<?php print $_SERVER['PHP_SELF']; ?>" />
<input type="hidden" name="inputStyle1" id="inputStyle1" value="fonts" />
<input type="hidden" name="inputStyle2" id="inputStyle2" value="style" />
   
<p>Use this form to change the style of this page:</p>
   
<strong>Font Style:</strong><br />
<input type="radio" name="fonts" id="fontStyle1" value="normal" 
 <?php $ss->printSetInputChecked("fonts", "normal"); ?>/> 
 <label for="fontStyle1">Normal text (smaller)</label>
<input type="radio" name="fonts" id="fontStyle2" value="large" 
 <?php $ss->printSetInputChecked("fonts", "large"); ?>/> 
 <label for="fontStyle2">Large text</label><br />
   
<br />
   
<strong>Page Style:</strong><br />
<input type="radio" name="style" id="pageStyle1" value="blue" 
 <?php $ss->printSetInputChecked("style", "blue"); ?>/> 
 <label for="pageStyle1">Blue</label>
<input type="radio" name="style" id="pageStyle2" value="green" 
 <?php $ss->printSetInputChecked("style", "green"); ?>/> 
 <label for="pageStyle2">Green</label><br />
   
<br />
   
<input type="submit" name="setChanges" value="Change styles" />
</form>

This page's CSS and XHTML validate. Does yours?