Chapter 2. Web Design

Hacks 3–10: Introduction

This chapter provides user interface hacks that you can perform with HTML using PHP. The hacks cover building tabs and boxes to clean up your web interface, building interface elements like breadcrumb trails, and building lightweight HTML graphs. The chapter even includes a hack that shows you how to send HTML email to your customers.

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 ...

Get PHP Hacks now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.