Updated 12/3/2008
The other day I wrote about getting the Blueprint CSS framework into your Wordpress theme. If you’re developing in CakePHP, it’s even easier to link multiple style sheets and JavaScript libraries to your layout file.
<?php
$css = array('blueprint/screen', 'blueprint/ie', 'style');
$jslibraries = array('prototype', 'scriptaculous', 'jquery');
echo $html->css('blueprint/print', 'stylesheet', 'media="print"');
echo $html->css($css, 'stylesheet', 'media=”screen, projection”');
echo $javascript->link($jslibraries);
?>
Let’s take these one at a time.
$css = array('blueprint/screen', 'blueprint/ie', 'style');
CakePHP’s html helper will load any css file you specify. First, make sure the css files are in app/webroot/css. Then put any css files you want to link to your layout in an array like I have above. You might have noticed that I didn’t include print in my array. That’s because we want to add an media=”print” as a separate attribute that the other style sheets won’t have.
Once they’re loaded into your array, simply put echo $html->css($css); in the head of your layout. The output will be:
<link rel="stylesheet" type="text/css" href="/app/webroot/css/blueprint/screen.css" />
<link rel="stylesheet" type="text/css" href="/app/webroot/css/blueprint/ie.css" />
<link rel="stylesheet" type="text/css" href="/app/webroot/css/style.css" />
We still haven’t linked our print style sheet. Make sure you link the print style sheet above the others so they override it. We can add media="print" by putting this into our layout head:
echo $html->css('blueprint/print', 'stylesheet', 'media="print"');
So now:
$css = array('blueprint/screen', 'blueprint/ie', 'style');
echo $html->css('blueprint/print', 'stylesheet', 'media="print"');
echo $html->css($css, 'stylesheet', 'media=”screen, projection”');
Results in:
<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/blueprint/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/blueprint/screen.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/blueprint/ie.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/style.css" media="screen, projection" />
Two things to note. In $html->css($path, $attributes), the first argument is the path from app/webroot/css. The second argument is html attributes.
Linking JavaScript libraries is very similar.
$jslibraries = array('prototype', 'scriptaculous', 'jquery');
This will link to prototype.js, scriptaculous.js and jquery.js respectively as long as there in app/webroot/js.
Put echo $javascript->link($jslibraries); into the head of your layout and you’re done. You have all three JavaScript libraries at your disposal.
Other good resources:
I just added a pretty sweet bit of eye candy to my nav menu using strictly CSS & JQuery. The method is here. The code is here.