HOWTO: Custom header for Drupal’s Minnelli theme

Drupal comes with the excellent Garland theme, which is a fluid-width theme, and additionally a theme called Minnelli, which is fixed-width version of the same theme.

The Image

Fortunately, it’s wonderfully easy to create a custom header image for Minnelli:

980header-example
Click image for actual-size JPEG. 

First, create your header image. It should be 980 x 120 pixels. For best results, you may wish to create a bar in the center-bottom that’s lighter, as this is where the breadcrumbs will appear. To match up with the center column of the theme, the area should be 560px wide, start 210 pixels from the left, and be about 25px high.

Once you’ve got your header image saved as a JPEG, upload it as the logo image of the Minnelli theme. You’ll then want to adjust the colors of the theme to suit your taste, so that they look good with your new header.

Now you need to make a quick modification to the CSS to get the logo to align properly. There’s a trick to it, though. The way this theme works is that every time you save changes to it (new colors, for example), it creates a new folder in yoursite/files/color/minnelli-xxx/, where xxx is some random string.

CSS Option 1

So I created a file called minnellifix.css, and placed it in my site’s files directory. The file looks like this:

#logo-floater { top: 1px; z-index:1}
html>body #logo-floater {top: -3px;}

Note that it uses a CSS hack to give IE and Firefox different values for top.

Now, after I have the theme configured the way I like it, I simply cat the fix file to the theme’s style.css, like so:

cd mysite/files
cat minnellifix.css >> color/minnelli-xxx/style.css

You’ll need to repeat this step after each time you make changes to the theme config, as the old style will be discarded and a new directory created by the color module.

CSS Option 2

Another, possibly better, option would be to use a block. This would have the benefit of not needing to be updated when you make changes to the theme colors. An additional benefit would be not needing any shell access to accomplish this modification, which could be useful for some people.

Create a block called something like “CSS Block”, that contains only the above CSS, wrapped in a <style> element.

Place that block somewhere in the header area of your site using the blocks administration screen, and you’re in business!

Bugs

As of this writing, i have a seen couple of warts with this modification.

First, if your content, such as a large image, forces the body wider than 560px, in IE the right edge of the body will be misaligned with breadcrumb area of the header image. Firefox copes with this, and lets wide content flow outside the body area.

Second, on pages without left sidebar content, such as the 404 page, the header will completely misaligned.

I haven’t looked into these two issues much yet.

I love your comments. Don't be shy, reply!

There are 5 replies to “HOWTO: Custom header for Drupal’s Minnelli theme

  1. Steve

    Thanks for this tutorial!

    Just a question (which is probably a stupid one, my apologies, I’m a newb to all of this) … what do you mean by

    Now, after I have the theme configured the way I like it, I simply cat the fix file to the theme’s style.css, like so:

    cd mysite/files
    cat minnellifix.css >> color/minnelli-xxx/style.css

    I’m just not sure where to put this code, in the style.css file?

    Thanks

    Reply
  2. sebastian Post author

    Hi Steve, thanks for your comment. Yes, the idea is just to place the extra CSS content at the end of the style.css (The one found not in the theme directory, but in the files/color/minnelli-XXXXXX/ directory). This tutorial assumes you are using the color module.

    “cat” is a unix shell command that “prints” the content of a file. In my example, I used another shell trick (the two arrows, e.g. “>>”) to append the output of the “cat” command to the end of the style.css file.

    Hope that helps!
    Sebastian

    Reply
  3. Anonymous

    Can you please tell me how to change the header height in the theme Minelli?

    See our website for a better explanation. You can clearly see the problem: http://tinyurl.com/m75rqr

    I assume it is in the style.css but I am not sure what line of code it is.

    Please help!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

The "are you a human" quiz *