hellorobot.org

The design/layout of hellorobot.org is a modified version of the Grid Focus WordPress theme – a fairly extensive modification, but the same basic structure. And although this blog is a smaller width and uses a different menu style, adding a header image to the default Grid Focus theme is not much different than it was here.

I’ll assume that anyone looking to add a header image to Grid Focus has successfully installed WordPress as well uploaded and activated the Grid Focus theme.

If you’ve not made any posts yet, your blog would look something like this:

I think you’ll find that adding a header image is pretty simple, really. It requires editing two files: first, the header.php file; and second, the style.css file. Both are found in the ../wp-content/themes/grid_focus_public/ folder. You can edit these files in a simple text editor like Notepad on Windows or TextEdit in Mac OS.

editing the header file

First add these lines at the end of the header.php file:

<div id=”headImage”><img src=”http://www.yoursite.com/path/to/photo.jpg” width=”965″ height=”172″ alt=”Brief photo description”/></div>

Some notes:

• Be sure to include the URL to the header image you want to display instead of http://www.yoursite.com/path/to/photo.jpg – and be sure to upload your image file to that path specified or nothing will show.
• Grid Focus has a width of 965 pixels. So you’ll probably want to make your header image that wide as well. But as for the image height, well, you can experiment with different heights until you find the one that looks best. In the example, I used an image with dimensions of 965px by 172px.
• Include a brief description of your image in the “alt” tag to keep your blog accessible to different users.

editing the stylesheet

You’re almost done. In order to display the image in a way that fits the Grid Focus style, you want to add a line to your blog’s stylesheet, the style.css file. The line you’ll add can go anywhere in the file, but for organization’s sake, I’d recommend finding this line – /* main - middle content and columns */ – and inserting your new line directly above it. Here’s what you’ll add:

#headImage {border-bottom:2px solid #333; margin-top:6px; padding-bottom:1px; }

border-bottom, as it sounds, draws a border line at the bottom of the image. I specified that line to be 2px in height and fairly dark. You can change it to something lighter and larger, perhaps, like this: border-bottom:3px solid #eee; – that’s the style of the border line across the very top of the Grid Focus theme.

The margin-top declaration controls the space between the header image and the navigation menu above it. Increase or decrease the number of pixels to increase or decrease the space.

And, lastly, the padding-bottom declaration controls the amount of space between the bottom of the image and the border line described by border-bottom. It, too, can be increased or even decreased to zero.

the end

You’re done! You can upload both of those files into the ../wp-content/themes/grid_focus_public/ folder on your server and refresh your blog.

Now that you’ve got a first draft of your header image in place, you can experiment with how it looks, how big it is, et cetera, until you find the look that’s right.