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.


Subscribe to Full RSS Feed

RSS FeedIf you thing this article useful, please consider subscribing to our RSS Feed or e-mail updates and stay updated with us. You can also follow @JauhariNET on twitter for latest updates.


About Jauhari

This is me Nurudin Jauhari. Just human like you, I come from Gunungkidul, small place at Yogyakarta, and Today I live at Malang I was born 30/04/1980 in Ponjong, small village in Gunungkidul, Almost my time in 1 - 15 Years stay at this Village. More

This entry was posted in How To, PHP.
Bookmark the permalink.



2 Responses to Create a Skinnable Interface with PHP

  1. Rajiv says:

    Thanks for the wonderful writeup. I was looking for similar thing.

    Thanks
    Rajiv
    http://phpyoga.com/

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>