You are here:
Adobe Apollo Adobe Apollo

Dynamic CSS using ColdFusion

It's probably quite a well documented subject already, but just thought I would shed some light on producing dynamic CSS using ColdFusion. Instead of linking to a static stylesheet in your webiste, you can link to a .cfm template and get ColdFusion to produce the CSS code for you, allowing you to switch graphics, colours, fonts etc. all when the stylesheet is loaded in. As an example:

<link href="http://yourdomain.com/css/stylesheet.cfm" rel="stylesheet" type="text/css" />

Inside the file stylesheet.cfm you would have something similar to below:

<cfoutput>
<cfheader name="content-type" value="text/css" />
<cfset fontsize="11" />
body {font-size:#fontSize#px;}
.... etc.
</cfoutput>

That's all there is to it. Very simple but very effective and allows you to use a database, xml files or standard text files to switch your application look and feel dynamically.
One really important line in the code above is the tag. Without this line, Mozilla based browsers, will not render the CSS correctly. IE will render, in it's lovely quirks mode!

22 July 2011 - UPDATE - Another important thing to note. Make sure that your stylesheet.cfm has all of the id declarations replaced. e.g. # becomes ## to be correctly processed by the ColdFusion server.