Header Photos

There's been a little bit of interest expressed in our cute little header photo. When I figured out how to do it, I discovered that there were very few tutorials out there on standard ways to mess with your blog template. Fortunately, I'm mildly proficient in HTML, so I figured it out on my own. Here's the step-by-step for everyone else:

1. Get a picture.
   
   
2. Resize the picture to be 692 pixels wide. It can be a different size, but then you have to change the sizes of everything else in your template. If you know how to do that, then you certainly don't need my help.
   
   
3. Host the picture on a webserver.
   
   Unfortunately, Blogger.com gets cranky if you try to link to photos they host (anyone know how to get around this?). So, I host our graphics using my UW student web hosting. Flickr and Photobucket are probably also good options.
   
   
4. Change the template
1. Under your blog settings click on "Template"
2. Select "Edit HTML"
3. Find in the template something that says:
   
   <div id="'header-wrapper"> ... </div>
   
   This may span several lines.
   
   
4. Change it to look like this:
   
   <div id="'header-wrapper'">
   <img src="http://........" />
   </div>
   
   Substitute in the URL of your photo where the ellipsis is.
   
   
5. Preview the template. If everything looks good, then save.
   

I should note that I'm still reading a bit about how Blogger.com's template widgets work. In plain English, I may come up with a better way of doing this at some point.