Thursday, November 02, 2006

Blogger: Image as Blog Header  

I'm going to do a brief series about how I wound up customizing my Blogger template (styles and widgets) after switching to the Blogger beta. First up, how I replaced the header with an image.

Why customize it?

Like a lot of people, I prefer to use an image instead of text for the header of my blog. I also want it to be clickable and always be a link back to the "home" page of the blog, which is a widely-adopted convention.

But I do not want to simply encode an inline image. For reasons of accessibility, I prefer a normal H1 tag that gets translated to an image by CSS.

Since I've been trying to keep the look-and-feel of my old template, I started with this image from my old template. It's 790 pixels wide by 105 pixels high.

Widget modifications

Here are the modifications I made to the default "Header" widget to accomplish this. Data that is specific to my blog, and which you'll want to change if you copy this code, is displayed in red.

<b:widget id='Header1' locked='true' title='Header' type='Header'>
  <b:includable id='main'>
    <div class='titlewrapper'>
      <h1 class='title'>
        <a href='http://drewthaler.blogspot.com/'><span/><data:title/></a>
      </h1>
    </div>
    <div class='descriptionwrapper'>
      <p class='description'><span><data:description/></span></p>
    </div>
  </b:includable>
</b:widget>

Widget explanations

The original Blogger template had a conditional so that the header was only a link if we weren't on the main page already. I removed the conditional because I think it makes more sense to always make it a link.

The original template also used 'data:blog.homepageUrl' for the link, but this resolved to 'http://drewthaler.blogspot.com/index.html', which is redundant. I wanted the shorter and more future-proof URL 'http://drewthaler.blogspot.com/' so I changed the link manually.

I left the description code as-is, because I don't use it. You may want to do something different.

You'll notice a single <span/> tag in the middle. That's required for CSS image replacement.

Stylesheet modifications

Here are the CSS additions that go with it. These are additions to the original stylesheet.

/* Replace the header with a graphic on computer displays */
@media screen, projection, tv {
  h1.title {
    width: 750px;
    height: 89px;
    left: 0;
    top: 0;
    padding: 15px 0 0 40px;
    margin: 0;
    border-bottom: 1px solid black;
    z-index: 0;
  }
  h1.title a span {
    background: url(http://homepage.mac.com/drewthaler/images/blog-header.gif) no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 790px;
    height: 105px;
    z-index: 1;
  }
  #sidebar {
    z-index: 2;
  }
}

Stylesheet explanations

The @media directive means that these styles should only be applied for certain types of media. For screen, projection, and tv renderers I prefer the nicer look. But they will not be applied for screen readers and printing.

I'm using the Gilder/Levin Method for CSS image replacement. In this method, the span does all the work: it gets resized and repositioned, and the image is displayed as a CSS background image for it. The image is clickable because it's on the span, and the span is inside the link tag.

The span is given a z-index of 1 so that it sits above the original H1. The H1 text is still there, hiding underneath at z-index 0. Then the sidebar is given a z-index of 2 so that it will float above the header image if the two overlap.

The pixel sizes (790px by 105px) are from the size of my image. The padding (15px 0 0 40px) and bottom border are in there to make CSS-on/images-off browsing still look acceptable. It's a personal preference and based on the size of my image and text, so you might need to tweak it for your setup. The H1's width of 750px is the image's width (790px) minus the horizontal padding (40px), and the H1's height of 89px is the image's height (105px) minus the vertical padding (15px) minus the one-pixel bottom border (1px).

11 comments:

  • Janet C. said...

    Thanks for that post. It explains the how to very well. I've been messing with header and fonts and colors for several weeks now. Wish I had seen this first.
    I must have done something that caused the new feature fonts and color not to work...Any ideas?
    I used my own colors, could that be it?

  • Drew Thaler said...

    The Fonts & Colors feature is activated by some code that looks like this in the stylesheet part of your template:

    <Variable name="bgColor" description="Page Background Color" type="color" default="#efefef">
    <Variable name="bodyFont" description="Text Font" type="font" default="normal normal 100% Verdana, Arial, Sans-serif;">

    These are probably only present if you (a) created your blog in the beta or (b) picked a new template after you switched. Your old template probably doesn't have them. (To see what they should look like you can go to "pick a new template" and just preview one of the new templates, rather than actually selecting and saving it. Then use your browser's View Source on the preview.)

    Inside your style sheet, you then use a dollar sign plus the "name" field to refer to them: $bgColor, $bodyFont, etc.

    After you save your template, the F&C feature should let you change those values pretty easily. It's a nice feature when it works. :-)

  • The Oregonion said...

    Awesome information. I'm having trouble figuring out how to shrink the vertical space under the banner and before the first date of the first post. I've reduced margins and buffers wherever I could, with no results. I got about a few pixels of savings by deleting references in the template to the blog title's "description" since I'm not using it. Any ideas?

    http://nottheoregonian.blogspot.com

  • Anonymous said...

    Next time you want a new header image, try out HeaderBar.com

  • Anonymous said...

    Hello. I have tried doing this, however, for some reason, after the header image, all my text shifted to the right, leaving a HUGE gap between a sidebar and content. If u could just tell me how to fix that, i'd appreciate that very much!

  • Chris Zammarelli said...

    Thank you for this post. It was very handy!

  • Ian J said...

    thankyou very much for this info. I'm really not familiar with any of this stuff, but with a bit of fumbling round i got there.
    thanx again

  • jorge said...

    Thanks for this. Here's my site where I used it:

    http://papistories.blogspot.com/

    and here's what I modified:

    /* Replace the header with a graphic on computer displays */
    @media screen, projection, tv {
    h1.title {
    width: 600px;
    height: 210px;
    left: 0;
    top: 0;
    padding: 15px 0 0 40px;
    margin: 0;
    z-index: 0;
    }
    h1.title a span {
    background: url(http://www.goycodesign.com/blog/PapiBlogHeader.jpg) no-repeat;
    position: absolute;
    top: 50;
    left: 50;
    display: block;
    width: 600px;
    height: 200px;
    z-index: 1;
    }
    #sidebar {
    z-index: 2;
    }
    }

    I went ahead and left the description, just pushed it below the image.

    Thanks again Drew.

  • jorge said...

    I've just been looking around and I've noticed that this code doesn't seem to be working in Internet Explorer on the mac (5.2), Internet explorer windows (7), but works fine on firefox mac (1.5.0.11) and fefox windows (2.0.0.3), and safari mac (2.0.4).

    Any idea why? CSS?

    jorge

  • Jay Galan said...

    This comment has been removed by the author.
  • Jay Galan said...

    Hi! Thank you for this post. You have discussed a very helpful topic with detailed information. Keep it up...=)