CSS Templating System

In Nexty I used CSS to create a inexpensive templating system. You can see it in action in the settings page of Nexty. Currently I use it only for changing the icon sets. But you can change the colors and the layout using this system.

CSS Templating for Icons

Before starting, I must say that CSS is not the most powerful solution for templating. Using a server side solution is much more recommended. But for my purposes, CSS was good enough.

(X)HTML Code

If you want to use CSS templating, your app must be semantically valid. In other words, there is no way you can theme a tag soup.

Make sure that the stylesheet used for templating appears at the last. This will make sure that all the rules in the above stylesheets can be overwritten easily. In Nexty, I have a base stylesheet, then the theme stylesheet and at the end the hacks stylesheet…

<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="images/themes/crystal/theme.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="css/style_ie.css" type="text/css" media="all" />
<![endif]-->

PHP Code

Very little PHP is involved to creating this system – I depend on it just to change the path of the CSS Stylesheet. The code used is…

<link href="images/themes/<?=$theme?>/theme.css" rel="stylesheet" type="text/css" />

The $theme variable will change if the user changes the theme.