How To

Create a Skinnable Interface with PHP

Avatar Written by Jauhari · 2 min read > 1.107 views

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.

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

2 Replies to “Create a Skinnable Interface with PHP”

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.