I have a basic theme I use to make all the Drupal themes for clients based on theHoly Grail (http://alistapart.com/articles/holygrail) layout.
Yesterday, I noticed that my theme no longer works on Drupal 5 installations. I read the Converting 4.7.x themes to 5.x (http://drupal.org/node/64292) page to find that drupal_add_css() (http://api.drupal.org/api/HEAD/function/drupal_add_css) is now the new way to add CSS.
Now, the idea is that I load one of four style sheets containing the structural styles for the Holy Grail:
Both sidebars, left sidebar, right sidebar and no sidebars.
I used to do this in page.tpl.php, but drupal_add_css() does not work there. I then tried moving the logic to template.php, but in there, in function _phptemplate_variables($hook, $vars) {, it is only possible to check if sidebars are existant after it is no longer possible to use drupal_add_css().
I asked in #drupal-support, last night and this morning but no one knew or were available to help with this.
The solution I found then, after reading the Converting 4.7.x themes to 5.x (http://drupal.org/node/64292) page again, regarding the availability of the $css variable on the theme level, was to add this to the page.tpl.php file:
if (!$sidebar_left && !$sidebar_right) {
$css['theme'][path_to_theme() . '/hg_one_center.css'] =
array('path' => path_to_theme() . '/hg_one_center.css', 'media' => 'all'); }
if ( $sidebar_left && !$sidebar_right) {
$css['theme'][path_to_theme() . '/hg_two_left.css'] =
array('path' => path_to_theme() . '/hg_two_left.css', 'media' => 'all'); }
if (!$sidebar_left && $sidebar_right) {
$css['theme'][path_to_theme() . '/hg_two_right.css'] =
array('path' => path_to_theme() . '/hg_two_right.css', 'media' => 'all'); }
if ( $sidebar_left && $sidebar_right) {
$css['theme'][path_to_theme() . '/hg_three.css'] =
array('path' => path_to_theme() . '/hg_three.css', 'media' => 'all'); }
print drupal_get_css($css);
I added it in place of print $styles
.
While this does work, I'd apreciate any advice on a more elegant solution.
Comments
A way to do it with one css file
This may not work for you in this case but I thought I mention it anyway.
In my own "template" theme I have a div that looks like below that wraps the page content.
Depending on what sidebars are shown it will print out one of the following version.
This gives you something to control the layout with without needing to load different css files.
My "template" theme are in cvs if anyone want to take a look. It's a bit Blumarine, stolen parts from Delicious Zen, CSS layout from A List Apart Holy Grail and rounded corners with niftycube.js.
http://cvs.drupal.org/viewcvs/drupal/contributions/themes/hiroshigeblue/
http://ftp.osuosl.org/pub/drupal/files/projects/hiroshigeblue-cvs.tar.gz