Creating a flexible header using Thesis and WordPress

The following is a tutorial on how to create a full-width image header using the em based layout in the Thesis theme for WordPress.

Increasingly I’ve been using the WordPress framework Thesis to develop Web sites. Some call Thesis a theme, others a framework. I think it’s more of a framework because there’s too much design work to do after installing Thesis, if you really want to customize it.

One of the aspects of Thesis I see people struggle with is the em based design, which is in contrast to the pixel based design so often found on the Web (here are some em resources: Wikipedia definition and history; pixel to em conversion table; general information about using ems in CSS; and using ems to create an elastic layout with css). Out of the box Thesis uses ems to measure just about everything you can think of, including font and column sizes. In general, that’s a good thing expect for the fact sometimes it can cause layout problems with images.

Bird Language site in Safari

Bird Language site in Safari

Depending on the browser or operating system, ems may scale differently; plus the pixel to em conversion isn’t an exact science. Yes, despite all these issues I still think em based design is often the way to go. For visitors to your sites, ems are more flexible.

I want to show you how to create a full-width header for your site that has an em based layout. This technique isn’t really Thesis dependent; you could apply the same technique on any Web site with an em based layout. Onward!

First, let’s look at the problem. The screenshot to the left is of a site using the Firefox Web browser for Mac OS X. You’ll find similar design reproduction in Safari for the Mac too. Notice that header image? It doesn’t span the entire header because the image is measured in pixels, but the layout is defined in ems. Mark this: even though in Thesis preferences you’re defining the column widths in pixels, the CSS is produced in ems. That is my biggest complaint about Thesis because most people don’t understand what this means.

Eagle Hill School site in Firefox

Eagle Hill School site in Firefox

Think of it like this: you bring plans to a cabinetmaker measured in inches, but when the cabinets are delivered they were produced based on centimeters. You could do that using a conversion, but the finished product might not be exactly what you were expecting.

Let me help you create a full-width image header that solves this problem (and retains the search engine optimization Thesis gives your site).

The two example sites I’m using are the Eagle Hill School Teacher Training (that I designed) and the Bird Language site someone pointed me towards. I’ll be showing you how to create a header like the Eagle Hill School site.

background image

#header background image

First, start with your image design. Your final design will actually be broken into either 2 or 3 different images (all PNG files). With the example at hand I used 2 different images, but I’ll show you why you might want to use a third image.

Take a look at that #header image on the left. The image is much wider than the design would ever require (1840 pixels), but we do that just in case. This image is for the background of the header ID, which is defined thus:

.custom #header {
position: relative;
height: 199px;
padding: 0;
border:none;
margin: 0 0 1em 0;
background: url(images/grass_wide.png) 100% 100% no-repeat;
}

That CSS defines the height of the header (no more than the image height), give a margin if you like, hooks up the background image (which you put into your custom directory in Thesis), and ensure that the image spans both 100% of the height and width without repeating. Notice that I used a PNG file here even though it wasn’t absolutely necessary (it’s not a transparency). I could have used a JPG image, however if I used a JPG for the background and a PNG file for the floating logo, there would have been a problem with color reproduction and matching. Better to make all images PNG.

background image 2

background image for the #logo

The next image I need is for the logo ID in CSS. This is a transparent image that floats over the background. When you’re designing the header create your background and logo together, then export each image individually. Also, this is important: depending on where you plan on positioning the logo, give your background plenty of space to put it. Notice the tractor in the background is on the right of the image, but the left side (where my logo will be) is clear of distracting information.

Let’s look at the CSS code that produces the logo:

.custom #logo {
text-indent:-9999px;
width:694px;
height:199px;
margin: 85px 0  0 15px;
position: absolute;
padding:0;
}
.custom #logo a {
display:block;
text-decoration:none;
height:119px;
background:transparent url(images/headertext_trans.png) 0 0 no-repeat;
}

We’ve got two things going on here: a definition for the logo (positions where the logo will be) and the link inside the logo property (where we put the image). One important note: the width and height of the #logo is the width and height of your image. That’s it, except for one more thing …

In the Thesis header there’s also the tagline ID. There’s a couple of different ways to handle the tagline: you can do like I did in this example and hide it using CSS (it will still be available for indexing by search engines), or you can create another image (the third image) and float it opposite from your logo. Here’s the code I used for hiding the tagline:

.custom #header #tagline {
text-indent:-9999px;
width:1px;
height:1px;
display:hidden;
}

That’s pretty straightforward, but what about using a background image for the tagline and hiding the text? I can help you with that. Just look at the header of this site. While I don’t use a background image for the header, I do replace the tagline text with an image (the image of people in the header is actually the tagline). Here’s the CSS code that will make that happen:

.custom #header #tagline {
text-indent:-9999px;
width:363px;
height:77px;
position: absolute;
top: 10px;
right: 0.6em;
background:transparent url(images/people.jpg) 0 0 no-repeat;
}

The trick here is positioning the image. Depending on your site, you’ll have to play around with that. Looking back at the example we started with, I could have made that tractor a third image to replace the tagline text, instead of hiding the text.

I hope this tutorial can help in your Thesis development. If you have any suggestions please drop it in the comments below.

14 thoughts on “Creating a flexible header using Thesis and WordPress

  1. This is great. Thanks! It works for my IE browser, but I can’t get it to work for my Firefox browser. Any ideas?

    1. Glad it’s helping you, Cindy. That’s strange you’re having a problem with Firefox. All my development begins with testing in FF, then IE. Have you tried doing a hard refresh of your cache? Are you using one of the WordPress super cache plugins? If you aren’t logged in to your blog in FF this could be a problem — the cache doesn’t get cleared.

      Otherwise, I have no idea what the problem would be. Double check the code. If you want, please leave a link to your blog for me to look at.

  2. Thank you SO much for your quick reply. I ended upclearing out the code in my custom.css file and took the code from yours and replaced it. Then it worked. I must have had some code that was working against it. All is well now.

    Here is the site I am working on: http://scrapbookdimensionsmagazine.com/TestSite

    A couple of thoughts…

    1. What I really wanted was the header with an scalloped edge around the polkadots that was elastic. When I did that before I discovered your site, it fit fine in my browser in FF and my screen but not in my client’s screen, and then it was definitely not fitting when I looked at it in IE…it went past the header space on the right side. Is there a way to do elastic, but keep the left and right sides at the edges?

    2. Or… If I use a complete background image (the whole logo) without the layer on top and just combine the whole thing into the background image…how do I make it start at the left and flow to the right. Your example starts at the right and flows to the left. I hope I am making sense.

    Thanks, again, for your help and your time.

  3. Thank you SO much! I’ve been struggling for the past two hours with simply understanding all the forums, blog posts on creating a custom header in Thesis (mainly as they were written by PC users who just love their geek speak!)

    It is so refreshing to have an explanation in plain english.

    I’m book-marking your site, thanks! x

  4. Great tutorial, but after trying for hours on my localhost site, my 1070px-wide header png still sits against the edge of the logo/tagline area. Can’t figure out how to display the whole thing centered above 850px-wide content area.

    Here’s my css code at the moment:
    /* trying to put on the full width banner */
    .custom #header {
    position: relative;
    height: 166px;
    padding: 0;
    border:none;
    margin: 0 0 1em 0;
    background: url(images/menpla_header.png) 100% 100% no-repeat;
    }

    .custom #header #tagline {
    text-indent:-9999px;
    width:1px;
    height:1px;
    display:hidden;
    }

    /* making the page all green */
    .custom #content_box {background-color: #abd150; }
    .custom #content {background-color: #248d82;}
    .custom .full_width > .page {
    background:none repeat scroll 0 0 #ABD150;
    }

    .custom .full_width .page {
    margin:0 auto;
    padding-left:0;
    padding-right:0;
    width:89.8em;
    }

  5. Bill,
    this is a great tutorial. Im having an issue with the second step-adding a transparent logo .png over top of the background header. I copied the code, and uploaded a transparent png to my media gallery, and inserted the location url into the code you provided. it’s not showing the logo, just the header image, which is also png. thanks for your help.

  6. Hi Sean,

    What I see is that you’ve maybe edited your template and the #logo ID is not being output into the html. I don’t exactly know how you did that.

    But if you look at the css above, you’ll see the second half of the process — adding your name above the background, requires the #logo part.

    I hope this helps. The site is looking good.

  7. Hey Bill, thanks for the help. I go it to work putting the transparent logo as the tagline like you said, instead of as a logo. Dont know why it works, but dont care!
    Only issue is, I’d like to add padding on the top and left of the image, and cant figure out where that margin would be, can you give me some code for that? Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>