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.jpg
Click image for actual-size JPEG. Download the example in PSD format

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.


AttachmentSize
980header-example.psd399.75 KB
980header-example.jpg4.62 KB

Comments

Thanks for this

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


Style

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


Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • Images from SmugMug can be added to this post.
  • You may use [inline:xx] tags to display uploaded files or images inline.
  • Insert Flickr images: [flickr-photo:id=230452326,size=s] or [flickr-photoset:id=72157594262419167,size=m].

More information about formatting options

Captcha Image: you will need to recognize the text in it.
Please type in the letters/numbers that are shown in the image above.