Create a Skinnable Interface with PHP

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); ?> +++++++>&nbsp;&nbsp;
</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
Default Style

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

2 thoughts on “Create a Skinnable Interface with PHP

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>