Customizing the Drupal 6 LiteJazz Theme - Custom Masthead

Submitted by nigel on Friday 2nd October 2009

One of the tricks in web development is to try and develop a website which for all intents and purposes betrays its heritage. Too often I see a site and I think - "ok, but it stems from Joomla", or "not bad, shame it is so drupaly". We continue our individuality quest by adding a custom masthead.

I have decided on a fixed width site of 1050px. This width 'looks right' on my development laptop, and will look fine on higher resolution desktop monitors, whilst 1050px still gives me enough screen real estate to play with. So, I have created a very simple masthead graphic using Photoshop with the dimensions of 1050x100, which will occupy the entire site width and sit above the Suckerfish menus. That means we can drop a lot of the code currently in page.tpl.php the logic that outputs the theme search, the built-in logo, the mission statement etc.

Before we do this, a couple of changes are required in the style.css file. Replace the masthead definition with the following code:

#masthead {
  clear: both;
  line-height: normal;                    
  float: none;
  height: 100px;
  overflow: hidden;
}
Next, to prevent a series of white lines around our new graphic, we need to change img#logo too. So replace with the following code:
img#logo  {
  margin: 0 0 0 0;
}
Now we need to edit the page.tpl.php file. We can purge all references we no longer require. Replace all the masthead div code with the following:
  <div id="masthead">
    <a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>"> <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" id="logo" /> </a>
  </div>
  <?php if ($suckerfish): ?>
    <div id="suckerfishmenu" class="clear-block">
        <?php print $suckerfish; ?>
    </div>
  <?php endif; ?>

Finally, you need to change the theme configuration so that your graphic is displayed. Go to admin/build/themes/settings/beezee and click Logo in the list of enabled elements, disable the use default logo setting, add a path to your custom masthead, enable the specify custom logo size checkbox and insert the dimensions in their respective boxes.

Done!

blog terms
Drupal Drupal 6 Litejazz