Garland for Drupal 4.7

The new Garland / Minnelli theme (née Themetastic) from Drupal 5.0 is one of the main visible improvements over 4.7. However, not all sites are ready to make the jump to 5.0 as soon as it's ready, which should be very soon now, so why not use Garland on 4.7 ?

Well, the result is as you can see here: gone is bluemarine, gone is the sorry "nested" theme I'd tried to create myself, and here is Garland for 4.7.

The obvious problems

The most obvious problem one can meet when using Garland straight from the 5.0 CVS is that it just doesn't run: the patch used to fix issue http://drupal.org/node/92365 uses the module_exists which was named module_exist in 4.6 and 4.7. So this is our first fix: remove the "s" at the end of module_exists.

At this point Garland starts being usable. However, the primary links are gone: the theme relies on the new structured links and improved theme_links function introduced in 5.0. So we have another fix to do: the theme('links', $primary_links, array('class' => 'links primary-links')) part has to go. Since theme_links in 4.7 does not generate the same code as in 5.0, the simplest fix is to remove the call and just build the primary and secondary links (this site only uses primary links) directly in the page.htpl.php. We can go about it like this:

<?phpglobal $_menu;$primary = $_menu['items']  [variable_get('menu_primary_menu',0)]  ['children'];$primary_links = '<ul class="links primary-links">';foreach ($primary as $link_id)  {  $primary_links .= '<li>'    . theme('menu_item_link',       $_menu['items'][$link_id],       $_menu['items'][$link_id])    . "</li>\n";  }$primary_links .= "</ul>\n";?>

Now, of course, this wouldn't be good as a generic technique, but it's perfectly sufficient as a quick fix for an unsupported theme backport. At least I think so.

This is starting to look nice. One problem remains: the sidebars are much too high, not aligned with the center div as they normally are. This is a bit more complicated.

Easy clearing

A quick check with the Firefox DOM inspector shows the height of the #container to be 80px, which is the height of its #header child, whereas on a 5.0 site, it will be sufficient to hold the whole page.

Looking around for the cause of the problem, we can see that 5.0 includes the modules/system/defaults.css file, which itself includes this small notice:

/*
** Markup free clearing
** Details: http://www.positioniseverything.net/easyclearing.html
*/

The explanations on that page suggest the solution: add a empty, cleared, div just before the closing tag for <div id="container">, near the end of the page template. This is sufficient:

    <div style="clear:both" />

That's it ! Garland with these small fixes is now usable, to some extent, on 4.7.

Going further

Of course, other issues remain, for instance lists like the one at admin/log tend to eat into the right sidebar (hint: in Opera 9, a workaround is to use the "fit to width" setting), the rather strange display in MSIE6.0, and the posts starting right after the local tasks, instead of one line below. The true solution is to upgrade to 5.0. But if you have additional tricks it might be interesting to share them.

Updates

• 2006-11-20 : The attached patch file includes the suggested changes.
• 2006-12-05 : as Caleb G and Amnon Levav have mentioned, someone else created a thread on drupal.org about the same ideas.