Hack3.Create a Skinnable Interface


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.

2.2.1. 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"  valign="top"> <div ><a href="home.php">Home</a></div> <div ><a href="faq.php">FAQ</a></div> <div ><a href="contact.php">Contact</a></div> </td> <td width="600" valign="top"> <table > <tr> <td >    Important information </td> </tr> <tr> <td > Lots of information about important events and stuff. </td> </tr> </table> </td> </tr> </table> <form> Style: <select name="style"> <?php foreach( $files as $file ) { ?> <option value="<?php echo($file); ?>" <?php echo( $file == $style ? "selected" : "" ); ?> ><?php echo($file); ?></option> <?php } ?> </select> <input type="submit" value="Select" /> </form> </body> </html> 

Next, save Example 2-2 (a CSS stylesheet) as styles/default.css.

Example 2-2. A CSS stylesheet that uses a simple red-and-white scheme
 body { font-family: arial, verdana; font-size: small; margin: 0px; } .box { background: red; } .box-title { text-align: center; color: white; font-weight: bold; } .box-content { background: white; font-size: xx-small; padding:10px;} .menu { margin: 5px; } .menu-active { margin: 2px; padding:5px; background: black; } .menu-active a { text-decoration: none; color: white; font-weight: bold; } .menu-inactive { margin: 2px; padding:5px; background: #ccc; } .menu-inactive a { text-decoration: none; } 

To provide another option for the user, save the CSS in Example 2-3 as styles/black_and_white.css.

Example 2-3. A CSS stylesheet for the same HTML, but with a black-and-white scheme
 body { font-family: arial, verdana; font-size: small; margin: 0px; } .box { background: #eee; border: 1px solid black; } .box-title { background: white; text-align: center; font-weight: bold; } .box-content { background: white; font-size: xx-small; padding:10px;} .menu { margin: 5px; } .menu-active { margin: 2px; padding:5px; background: black; } .menu-active a { text-decoration: none; color: white; font-weight: bold; } .menu-inactive { margin: 2px; padding:5px; background: #ccc; } .menu-inactive a { text-decoration: none; } 

2.2.2. Running the Hack

Upload the files to your PHP server and navigate to the index.php page. The code in the page will automatically pick the default skin if one has not been selected. This skinthe red-and-white scheme with a different border and heading color on the information tableis shown in Figure 2-1.

Now select the black-and-white skin from the select box and click the Select button. The page should reload with a slightly altered scheme, as shown in Figure 2-2.

This simple starting point won't satisfy every user's taste for color (or for a lack of color). However, by adding additional stylesheets, or even letting users upload their own CSS stylesheets, you can create a completely custom environment for each individual user.

Figure 2-1. The default skin


Figure 2-2. The black-and-white skin


The real magic here is not in the page code, though. The page code just manages the selection of the CSS file and then sets the appropriate @import directive in the style tag. The magic happens when CSS alters the display to change the colors, fonts, and even layout of the page.

Here are some tips for putting together a web design that works well for skinning:


Use CSS layout

CSS allows you to specify the location of div layout items on the page using absolute positioning, relative positioning, or floating elements.


Control your fonts with CSS

Only use CSS to control the fonts, sizes, and text styles on the page. That means avoiding the <font> tag and going with tags like <p>, <div>, and <span> instead, using class attributes that define which CSS class should be applied.


Document your CSS

Have a well-documented default skin that people can use as a template for their own skins. CSS supports comments, and you should use those comments to define which classes are applied to which elements on the page.


ID your layout elements

Use id attributes on <div> tags to break up your layout into sections. Skin authors can then use these to focus their modifications on certain portions of the screen. For example, you might decide that anchor tags in the navigation section should have ID tags, as opposed to all the anchor tags on the page.


Learn from others

Blog softwarein particular, Six Apart's Movable Type (http://sixapart.com/movabletype)has been designed for skinning from the start. Install it and have a look at how the folks at Six Apart design their page templates and CSS to make it easy for nontechnical types to alter the look of their blog.

If you are serious about skinning, you should also host a skin exchange on your site, as either a bulletin board or a file exchange. That will encourage people to contribute designs and experiment with the skinning feature. A starting point for this feature is a media upload/download center [Hack #97].

2.2.3. See Also

  • "Create a Media Upload/Download Center" [Hack #97]

  • "Give Your Customers Formatting Control with XSL" [Hack #7]



PHP Hacks
PHP Hacks: Tips & Tools For Creating Dynamic Websites
ISBN: 0596101392
EAN: 2147483647
Year: 2006
Pages: 163

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net