CSS And PHP: Switching Themes

by Marc Plotz

June 09, 2009

Introduction

A couple of years ago I was asked to provide a very interesting feature to a mobile website. What I was asked to do was create in interface that would allow users to create their own themes. The catch was that it wasn't just about loading different stylesheets, it was about each user having complete control over the look and feel his/her area on the site. This meant that I had to consider quite a few interesting questions.

How could I make a css file dynamic?

Would I use a database to store the theme information?

Was this even possible?

After some intensive thought I finally found the solution. In the two years that have passed since then I have thought a bit more on this topic, and the simplest and fastest version of this system will be discussed here.

Note: You can download a small example script here. This example script uses a simple--and I stress SIMPLE--login script in order to identify a user. No database connection is required and no registration is needed in order to test the example. All you will need is a PHP enabled server - PHP4 should suffice - and CHMOD the css directory to 777. Simply login with any username longer than 4 characters and change the theme. Then logout and login with the same name again and the theme will still be set.

How it works

The way this system works is very simple. In essence, any site that has registered users or members will assign something unique to identify that user. Usually this is a username or an email address, and almost always a database user ID is assigned to a user. Thus you have a distinct way of identifying a user that has logged into your site, right?

So now we have a way of identifying a user - let's say by the username. So we can say that when a user - let's call him "John" comes to the site, we can load the "John" css stylesheet. The "John" stylesheet will have the user- specific information in it, and we will assume for these purposes that the stylesheet is called john.css, and that john.css resides in the '/css' directory.

Now let us for simplicitiy just assume that the username of every logged in user is carried through the url, in the form of:

index.php?username=john

so, we can then tell our script to look for the stylesheet if the user is logged in by saying something like:

if(!empty($_GET['username'])) 
{ 
    if(file_exists('css/'.$_GET['username'].'.css')) 
    { 
        $cssFile = $_GET['username']; 
    } 
    else 
    { 
        $cssFile = 'default'; 
    } 
} 
else 
{ 
    $cssFile = 'default'; 
} 

What will happen now is that if the username is set, the script will check if a stylesheet relative to that username exists, and if it exists we assign it to the variable $cssFile. If the username is not set or the file relative to the username does not exist - if /css/john.css does not exist - then the $cssFile variable will be assigned a value of 'default', meaning it will load the default stylesheet. Note that you might be getting the stylesheet name from a database, or a session variable, a cookie or a post value - it does not really matter.

CSS And PHP: Switching Themes
CSS And PHP: Switching Themes