Extremely astute observers of this blog – who happen to be visiting the web page versus reading it via RSS – will notice that the banner at the top of the page changed a wee bit over the weekend.  Over at the right side there are now two “conversation balloons” a la comic strips.  (Refresh your browser if you don’t see them.)  This was part of the vision of my original “blog split-up” back in January.  Each of the blogs (well, currently only this one and Disruptive Telephony, but I’ve probably got another in the queue) has a unique color for the banner but I also wanted a unique graphic. 

However – and this was a key point – I wanted the blog width to be “fluid” and the text to expand to the size of the browser window.  This naturally ruled out any fixed-size banner images and I knew that I was going to have to use CSS or something like that.  The answer appeared the other week when I noticed what a web designer was doing to change the format of an internal blog we are developing.  The code was really exceedingly trivial:

<div style="float:right;"><img src="imagename" align=left alt="somealttext"></div>

Now I also added a “margin-top:2px;” into the style attribute to move the image down a little bit, and you could also turn the image into a link if you wanted to. 

So now the trick is simply to put this into the right place in your TypePad templates.  As I mentioned previously, I used a “menu bar hack” from TypePadHacks.org to get the menu bar you see across the top of the page.  Because of that, I’m already deep inside TypePad’s “Advanced Templates” and already have a customized “banner-header” template.  I just inserted this one line (filled in with names, of course) into that template, republished the site and… ta da… I’ve got a graphic on the right side of my banner.  Well, I also had to create the image as a transparent GIF, but that’s a minor detail.  You’ll see I also have this over on Disruptive Telephony, although I’m probably going to change the image because I’m not sure that the white phone as I have it there is overly compelling or useful.  Need something a bit larger and more interesting… although I’m not sure exactly what.  For the record, I found that the images that worked best were about 50 pixels high.  (Larger images forced the banner to be thicker, and that’s not what I want.)

At some point when I have the time, I’ll write it up for John Unger’s TypePadHacks website.  I’d like to write up a bit more info about how to get the “banner-header” template if you don’t already have it.  Anyway, if you play with it, have fun…