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 1 as index.php.
Example 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">
<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 Example 2 (a CSS stylesheet) as styles/default.css.
Example 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 3 as styles/black_and_white.css.
Example 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; }
Running
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 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
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 1. The default skin
Figure 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.
0 komentar:
Post a Comment