It's Monday - what a day to visit jfoobar!

How to set up dynamic css

Written by Arno Zijlstra Thursday, 04 December 2008 00:00

This would work like this:

Put this code between the head and end head tags beneath the other CSS file calls in your_template/index.php and make sure the files exist in the CSS directory.

<?php 
$option = JRequest::getCmd('option');
if($option == 'com_contact')
{
?>
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/green.css" type="text/css" media="screen,projection" />
<?php 
} 
else 
{ 
?>
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/blue.css" type="text/css" media="screen,projection" />
<?php 
} 
?>

So what happens here is that when your contact component is triggered by a visitor the little switch above will use the green CSS file and else it will use the blue CSS file.

This solution is using two CSS files to change a color pallet while it could be done with one CSS file.

The dynamic CSS way

For the dynamic css we are going to serve the browser a PHP file while we will let the browser think it is a CSS file.

Create a file, for example dynamic.php in your_template/css directory. In the file you add the following code to serve the PHP file as CSS to the browser.

<?php
header('Content-type: text/css');
?>

Now we have a CSS file where you can do some PHP trickery for changing the same color pallet as in the first example. Lets add some code.

<?php
header('Content-type: text/css');

$var = $_GET['option'];
if($var == 'com_contact')
{
$color = '#99CC33'; // Green
}
else
{
$color = '#94B8F9'; // Blue
}

print <<<_CSS
#content-block { 
color: ${color};
}
.module-heading {
background: ${color};
}
_CSS;
?>

We are getting the $option to switch color from $_GET['option'] but where do we get it?

We will have to add the dynamic CSS file to the template head just like we did in the first example of this post. One difference is that we will call the dynamic.php file and passing the $option variable with it.

<?php 
$option = JRequest::getCmd('option');
?>
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/dynamic.php?option=<?php echo $option; ?>" type="text/css" media="screen,projection" />

Look at the URL for the CSS.

/css/dynamic.php?option=<?php echo $option; ?>

We are passing the $option to the "CSS" file.

This example is pretty simple but you can probably imagine some very cool things using this dynamic stylesheet trick.

Like it? Share it!

• bookmark.it
• del.icio.us
• digg
• furl
• blinkllist
• reddit
• feedmelinks
• technorati
• yahoo
• rawsugar
• netvouz
• rojo
• shadows
• gabbr
• dzone
• newsvine
• ma.gnolia
• stumbleupon
• google
• squidoo
• spurl
• blinkbits
• blogmarks
• bloglines
• co.mments
• scuttle
• ask
• slashdot