Home arrow PHP arrow Page 2 - Building a PHP Style Switcher
PHP

Building a PHP Style Switcher


Have you ever wanted your visitors to be able to change the style of your web page on the fly? In this article Martin shows us his way to do exactly that!

Author Info:
By: Martin Tsachev
Rating: 4 stars4 stars4 stars4 stars4 stars / 7
December 08, 2002
TABLE OF CONTENTS:
  1. · Building a PHP Style Switcher
  2. · Configuration

print this article
SEARCH DEVARTICLES

Building a PHP Style Switcher - Configuration
(Page 2 of 2 )

Let's build a PHP style switcher script. The script will rely on the built-in session support that PHP provides us with. A good thing to start off with (if you have access to the server) is to compile PHP with --enable-trans-sid.

As of PHP 4.2.0, transparent session support is built-in to PHP by default. 

This setting will allow PHP to pass the session identifier to the next script even if cookies are not available. 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. Mine is named common.css, which will be used in every circumstance -- no matter which styling the user chooses. This stylesheet should set up the style that will be applied by default, i.e. do not include things 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 color, fonts, etc.).

I won't show my default stylesheet here. You can use any basic stylesheet for this.

Sample Style Sheets
I have this one saved as gray.css in a directory called style:

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

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

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

.banner {
background : #aaa;
}


The following stylesheet makes up white.css:

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

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

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

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

.banner {
background : #aaa;
}


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

The PHP code 
I use the PHP 4.1 superglobal arrays ($_GET, $_SESSION). If you want to make this script backward compatible just change all of the $_* variables to $HTTP_*_VARS in the following code.

session_start();

if ( isset($_GET['style']) ) {
$_SESSION['style'] = $_GET['style'];
} elseif ( !isset($_SESSION['style']) ) {
$_SESSION['style'] = 'gray';
}

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


This code sends HTTP headers, so it has to appear before any output -- no matter if it's from PHP or HTML. It also has to appear before the document type declaration. The only exception to this rule is possibly 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 we do, we register it as a session variable and set it to the value of what's been passed. If the session is not registered then we just set a default value for the session.

The same session variable is made with the navbar variable, accept 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 $_SESSION['style']?>.css"
type="text/css" rel="stylesheet" />


The code above is the HTML code used to link to the style sheets. It has to appear in the head of your HTML document 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">
&#160;&#160;</a></td>
<td style="background : #eeeeee">
<a href="<?php echo $_SERVER['PHP_SELF']?>?style=white"
title="Change the stylesheet to have a white background">
&#160;&#160;</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">
&#160;&#160;</a></td>
</tr>
</table>
<a href="somepage">Link1</a>
<a href="somepage1">Link2</a>
</td>

<?php
} // end navbar()

if ( $_SESSION['navbar'] == 'left' )
navbar();
?>

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

if ( $_SESSION['navbar'] == 'right' )
navbar();
?>

</tr>
</table>


This is the page wrapper. First, a table is created with one row. 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 be able to display it.

When everything is defined the code checks if the navbar should be on the left. If so, itís printed out to the page. If not, we just continue with the contents of the page. Finally, we check if the navbar should be displayed on the right. If it should then we print it out to the page.

You can switch between left and right navbar just by passing back a navbar=left or navbar=right in the querystring of the page (not shown here).

Want More?
OK, so now you know how a basic style switching script works in PHP. An improvement could be to use cookies to make the changes persist across multiple browser sessions with the user. I didn't use this by a default, since cookies are not required to be available. This allows 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, so take this into consideration if you do!
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
PHP ARTICLES

- Removing Singletons in PHP
- Singletons in PHP
- Implement Facebook Javascript SDK with PHP
- Making Usage Statistics in PHP
- Installing PHP under Windows: Further Config...
- File Version Management in PHP
- Statistical View of Data in a Clustered Bar ...
- Creating a Multi-File Upload Script in PHP
- Executing Microsoft SQL Server Stored Proced...
- Code 10x More Efficiently Using Data Access ...
- A Few Tips for Speeding Up PHP Code
- The Modular Web Page
- Quick E-Commerce with PHP and PayPal
- Regression Testing With JMeter
- Building an Iterator with PHP

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials