O'Reilly logo

PHP Hacks by Jack D. Herrington

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Hack #3. Create a Skinnable Interface

Use CSS to allow your user to select how your web application should look.

Have you ever run across a user who just has to have every blog he reads appear in his own personal color scheme? Are you that kind of user? Thankfully, supporting these users is far easier with CSS support in modern browsers.

CSS defines the fonts, colors, sizes, and even positions of elements of a page independent of the HTML code for that page. You can change the look of a single HTML page drastically simply by redefining its CSS stylesheet. This hack shows how to provide user-selectable CSS and offers some advice on creating customizable interfaces.

The Code

Start out by saving the code in Example 2-1 as index.php.

Example 2-1. Simple index page that sets the stage for customizable CSS

 <html> <head> <?php $style = "default"; if ( $_GET["style"] ) $style = $_GET["style"]; $files = array(); $dh = opendir( "styles" ); while( $file = @readdir( $dh ) ) { if( preg_match( "/[.]css$/", $file ) ) { $file = preg_replace( "/[.]css$/", "", $file ); $files []= $file; } } ?> <style type="text/css" media="all">@import url(styles/<?php echo($style); ?>. css);</style> </head> <body> <table width="800"> <tr> <td width="200" class="menu" valign="top"> <div class="menu-active"><a href="home.php">Home</a></div> <div class="menu-inactive"><a href="faq.php">FAQ</a></div> <div class="menu-inactive"><a href="contact.php">Contact</a></div> </td> <td width="600" valign="top"> <table class="box"> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required