Skinnable Interface

calendar September 16, 2009

Create a skinnable interface with CSS and allow the user to change the look of your web application.

Adding stylesheets or letting users upload their stylesheets you can create a completely custom enviroment for each individual user.

Code:

Save the code as index.php in your PHP server

<html>
 <head>
 <?php 
 $style = "default";
 if($_GET['style'])
 {
   $style = $_GET['style'];
 }
 $files = array();
 $dir = opendir('styles');
 while($file = @readdir($dir))
 {
   if(preg_match("#[.]css$#", $file))
   {
     $files[] = $file;
   }
 }
 ?>
 <style type="text/css">@import url('styles/<?php echo $style; ?>');</style>
 </head>
 <body>
 <table width="1000">
 <tr>
 <td width="300" class="links" valign="top">
 <div class="active"><a href="">Home</a></div>
 <div class="inactive"><a href="">Browse</a></div>
 <div class="inactive"><a href="">About</a></div>
 </td>
 <td width="700" valign="top">
 <table class="box">
 <tr>
 <td class="title">
 INFO
 </td>
 </tr>
 <tr>
 <td class="entry">
 Hello World!
 </td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 <form>
 Select Style:
 <select name="style">
 <?php
 foreach($files as $file)
 {
 ?>
   <option value="<?php print $file; ?>" <?php print($file == $style ? 'selected' : ''); ?>><?php print $file; ?></option>
 <?php
 }
 ?>
 </select>
 <input type="submit" value="Style" />
 </form>
 </body>
 </html>

Create a styles directory in the same directory with index.php script

Save the next code as styles/default.css

CSS Code:

 body
 {
   font-family:verdana;
   font-size:90%;
   margin:0;
 }
.box
 {
   background-color:#0066CC;
 }
 .title
 {
   color:#fff;
   font-weight:bold;
   text-align:center;
 }
 .entry
 {
   background-color:#fff;
   font-size:80%;
   padding:10px;
 }
 .links
 {
   margin:5px;
 }
 .active
 {
   padding:5px;
   background-color:#CC0000;
 }
 .active a
 {
   color:#fff;
   font-weight:bold;
   text-decoration:none;
 }
 .inactive
 {
   padding:5px;
   background-color:#ccc;
 }
 .inactive a
 {
   color:#000;
   text-decoration:none;
 }

Save the next code as styles/style1.css

CSS Code:

 body
 {
   font-family:verdana;
   font-size:90%;
   margin:0;
 }
 .box
 {
   background-color:#666;
 }
 .title
 {
   color:#fff;
   font-weight:bold;
   text-align:center;
 }
 .entry
 {
   background-color:#fff;
   font-size:80%;
   padding:10px;
 }
.links
 {
   margin:5px;
 }
.active
 {
   padding:5px;
   background-color:#CC0000;
 }
 .active a
 {
   color:#fff;
   font-weight:bold;
   text-decoration:none;
 }
 .inactive
 {
   padding:5px;
   background-color:#666;
 }
 .inactive a
 {
   color:#fff;
   text-decoration:none;
 }
admin PHP

Leave a Reply

You must be logged in to post a comment.