Customizing the Drupal Garland Theme

Garland is the nice new default theme in Drupal 5. Here's how to customize it...

Change the Colors

Garland not only looks good out-of-the-box, but it also comes with a number of predefined color schemes and even lets you define your own using the color.module core module:

1. Enable the Color module.
2. Go to /admin/build/themes/settings/garland and you should see the color picker. If you don't see it, the following issues may need fixing (see http://drupal.org/node/103528):
   • enable JavaScript in your browser,
   • temporarily set the downloading method to public under /admin/settings/file-system (don't forget to set it back afterwards!),
   • check that your system path is writeable under /admin/logs/status .
3. Change the color scheme as you like.

Use Your Own Logo

If you try to use a PNG-24 file with transparency, you'll find that it works fine with Firefox, but not with IE6. A GIF or PNG-8 would work, but they only have 1-bit transparency, i.e. you can't blend your edges with the changing background.

color.module solves this problem for the default logo by blending the background into the transparent portions of the logo, resulting in a solid color PNG file that even IE can handle.

Unfortunately, this will not work, if you set Path to custom logo to use your own logo. There seem to be two alternative solutions to this problem:

• http://www.howforge.com/how-to-properly-change-logo-in-garland-theme lists the following procedure:
  1. use a 64x73 PNG-24 logo file
  2. upload it through /admin/build/themes/settings/garland

  color.module will automatically adjust your logo.

• The graphics for the default Garland color scheme are part of the Drupal distribution. However, if you make any color change at all, then the color.module will take bits and pieces out of themes/garland/color/base.png to create the graphics, including the default logo with a perfectly matching background color gradient. The exact positions and sizes of these pieces are defined in color.inc in the same directory. I replaced the Druplicon with my own icon that I had prepared in PNG-24 format and then adjusted color.inc:

  The default values are

  'logo.png' => array(622, 51, 64, 73),

  (that's where the 64x73 comes from); I've found that

  'logo.png' => array(560, 55, 200, 100),

  works well for me. It gives the maximum available size of 200x100, and it pushes the site name / site slogan to the right so that it sits nicely on top of the main content box.

  Note: remember to at least slightly change the colors for your custom icon to take effect.

  If you're running a single Drupal installation shared among multiple virtual hosts...

  ... then you only have a link to the shared themes directory. To "un-share" the Garland theme, copy its files to sites/all/themes/garland, or Create Subthemes to Keep Garland Customizations Separate on a Shared Installation.

  If you're getting file access errors when trying to change the color scheme...

  ... then you may be running under safe_mode. Turn it off, at least temporarily.

Further Information on the Garland theme

More Garland color schemes
http://drupal.org/node/128395 http://drupal.org/node/138588
http://drupal.org/node/142839 http://drupal.org/node/132476

Further Information on the color.module

see Integrating with Color.module.