In an effort to have as nice a blog as Kelly and Eric , I added pictures to the banner of my blog. There are 14 different pictures that can show up at the top of the page. With the exception of the Escher lizard pattern, Susan or I took all of the pictures. Most are from our trips including Baja California, Galapagos, New York, and Colorado, but also local trips to Stone Mountain and the Kangaroo Center. One (a funny one of Katie) is from my backyard. You can keep clicking Refresh (or Reload) to see more images. Or you can cheat and click here to see a list of them.
To do this I used Kelly’s site as an example. I noticed that her images were sized to 702 pixels by 73. So I decided to to make mine the same size. However it’s really hard to see what’s going on with such a short picture, so on the first picture (the one of Katie) I decided to crop my pictures to 702 x 136. Once I had collected a bunch of images of the proper size, I logged on to my blog and used “Upload File” to transfer the files one by one to a local folder I called “rotateheader”.
Then I had to read Jeb’s blog entry about rotating pictures to figure out how to make that work. They key thing was I had to download the rotate.php script and upload it to the same folder as the pictures.
Then I tried to figure out how Kelly made hers work. At first I edited the main template and put an image link where the header went. But that just inserted a picture and then the text was below that. I wanted the picture to be the background of the title. I found out I had to edit the styles-site template, adding all of the stuff Kelly had after the stylecatcher code. Kelly’s folder of images is called “rotatebanner” so I had to change that first in the “banner” section. Also she uses a reddish background color for the banner and I wanted to use the olive one that my site uses.
But when I tried that the images didn’t come out quite right so I had to adjust the padding for the banner-header (Ted’s Blog) and banner-description (Do not meddle . . . ). To see all of my taller pictures I had to increase the padding at the top (the first number for banner-header padding) to 50 pixels. The header itself is a font that is 30 pixels high, then there is 5 pixels of padding below that (the third number; I guess it goes top, right, bottom, left). So far that is 50+30+5 = 85 pixels of height for the banner area. Then the description has 5 pixels of padding at the top, plus the font is 12 pixels. So that gets you to 85+5+12 = 102 pixels. For whatever reason, that is exactly the right amount to see 136 pixels of height (actually I clip a couple of pixels off of the 136). On Kelly’s all those numbers added up perfectly to 72. Kelly’s template also had padding on the left and right, but I found that the pages for the individual entries, which have narrower banner areas, would wrap the description onto two lines and make the banner taller than it should be. To fill up that extra vertical space it would tile another copy of the image so you’d see a strip of the top of the next image in the banner below the image. That didn’t look right. However by eliminating the side padding I was able to make the description fit on one line.
It took me most of the afternoon.