Create a Skinnable Interface





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 Figure as index.php.

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">
			<tr>
			<td class="box-title">
				   Important information
			</td>
			</tr>
			<tr>
			<td class="box-content">
				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 Figure (a CSS stylesheet) as styles/default.css.

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 Figure as styles/black_and_white.css.

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; }

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.

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.

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.

The default skin


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

See Also

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

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



 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows