New Headers at Art & Story Blog

New Headers

Published December 19th, 2006 in Design

Finally, here are some new header images made from photos taken on the October/November trip to South Carolina and Mississippi.

2 Responses to “New Headers”

Feed for this Entry Trackback Address

1 chris chua Dec 19th, 2006 at 9:07 am

I’ve always been curious, how do you get the pics onto the header once you take them?? Is it an HTML code or is there a button for it??? I’ve been trying for months now and still cant find out a way to make it work.
2 Lee-Roy Dec 19th, 2006 at 1:04 pm
Hey Chris —

I’m posting my lengthy response here for anyone else who might have the same question.

In my case it’s a wordpress plugin that I use (http://patdavid.sytes.net) which displays the header images randomly. First, I open my photo in Imageready, and resize/crop it to the right pixel dimensions, then save it as a jpg. With this particular plugin, all I have to do is use an ftp client to drop the image file into a designated folder on my blog’s server. This may all be “greek” to you if you’ve never used site/blog plugins or used an ftp client.

Anyway, that’s how I do it, but unfortuately, you won’t be able to use the same plugin on your blogspot site. I don’t know if a similar thing exists for blogspot which will generate the header randomly. But you can have a header image on your blog using a touch of html.

There are a couple of ways to do this.

Just using html, and without using tables (a type of html tag), you can place an img src tag in the header section of your template. The one potential problem of doing it this way, is the text and image will not overlap.

Look for this section:
```
‹div id="header"›

‹h1 id="blog-title"›
‹ItemPage›‹a xhref="‹$BlogURL$›" mce_href="‹$BlogURL$›" ›‹/ItemPage›
‹$BlogTitle$›
‹ItemPage›‹/a›‹/ItemPage›
‹/h1›
‹p id="description"›‹$BlogDescription$›‹/p›

‹/div›
```
If you place your img src tag after the <$BlogTitle$> tag, your image will appear on a line below the blog title. One way around this, if you want the text to overlap the image, is to design text into your image and leave the Title and Description boxes blank on your Settings page.

Another way around this, if you really want your image to be in the background of your text and not have the text as an actual part of the image itself, is to use css to set a z-index for your header image. This is a little more advanced.

And here’s another little piece of advice. If you see another blogspot blog that is designed in a way that you like, view the source and see if you can figure out how they’re doing it.

I hope that helps!

About Lee-Roy

I’m a Storyboard Artist and Illustrator currently in Los Angeles, where I live with my fiancée, three cats, and several colonies of ants. My earliest memory is as a three-year-old, drawing a picture. About three decades later, the picture is still being drawn. It’s one I never want to finish.