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 XHTML Code
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
<title>Custom Style With PHP</title>
</head>
<body>
<div id="wrap">
<div id="h">
<h1>Custom Style With PHP</h1>
</div><div id="left">
<ul class="menu">
<li><div class="menu-active"><a href="home.php">Home</a></div></li>
<li><div class="menu-inactive"><a href="faq.php">FAQ</a></div></li>
<li><div class="menu-inactive"><a href="contact.php">Contact</a></div></li>
</ul>
</div>
<div id="right">
Important information<div class="box-content">
Lots of information about important events and
stuff.
</div></div>
<br class="clear" />
<div id="foot">
<form>
<h3>Select Style:</h3>
<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>
</div></div></body><!-- End Wrap -->
</html>
CSS Styles(Make Two example styles)
default.css
body {
font-family: arial, verdana;
background: #D4F0F7;
font-size: small;
margin: 0px; }
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#wrap {
width: 500px;
margin: 20px auto;
background: #fff;
padding: 10px;
}
#h {
background: #CC6633;
padding: 5px;
}
#left {
float: left;
width: 200px;
}
#right {
float: right;
width: 290px;
padding-left: 10px;
background: #F7E0D4;
}
br.clear {
clear: both;
}
.box { background: red; }
.box-title { text-align: center; color: white; font-weight: bold; }
.menu { }
.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: #D4F0F7; }
.menu-inactive a { text-decoration: none; }
dark.css
body {
font-family: arial, verdana;
font-size: small;
margin: 0px;
background: #333;
color: #333;
}
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#wrap {
width: 500px;
padding: 10px;
margin: 20px auto;
background: #fff;
}
#h {
background: #ccc;
padding: 5px;
}
#left {
float: left;
width: 200px;
}
#right {
float: right;
width: 290px;
padding-left: 10px;
background: #efefef;
}
br.clear {
clear: both;
}
.menu { }
.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; color: #000 }
Test On Browser
Default Style
Dark Style
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.
Leave a Comment