Thesis 1.6 Header Customization, Part 2

by Matthew on December 30, 2009

In Thesis 1.6 Header Customization, Part 1, I rewrote the code for the header in an effort to improve SEO for the site, and to make the header more stylable going forward. In this article, I will cover how to style your header in various ways using images. Our core code is already set in place, so for this article we will be dealing only with the custom.css file. These techniques assume you have been following along with previous articles and are using the Full-width HTML Framework.

We have a number of options in applying images to our new header. I will cover them all in this post, though I will not necessarily use all in my end design. We can insert images for various effects to the following elements:

  • body.custom – the entire page background
  • #header_area – the header element spanning the entire width of the page
  • #header_area .page – the header element spanning only the limited width of our content
  • h1 – the logo only

Each of these techniques may be mixed and matched, ultimately allowing you a great deal of control over your page design using only a small amount of CSS. I will discuss each of these separately, one piece at a time, leaving it to you to put those pieces together in your design.

For this demonstration, I’ve chosen a hideous background image from Squidfingers only because it’s free and easy to see in screen captures.

Hitting body.custom first, we can apply a background image to our entire site using the following CSS:

body.custom {
background-image: url(background_image.jpg);
background-repeat: repeat;
}

You will, of course, need to specify the correct URL to your background image. This will give you something like this:

Next, applying a background image to the #header_area element will give us a full-width background only for our header. Add this CSS to your custom.css file:

.custom #header_area {
background-image: url(background_image.jpg);
background-repeat: repeat;
}
.custom #header_area .page {
background-color: transparent;
}

Here, we must tell the #header_area .page to have a transparent background, otherwise it will cover the background graphic we’ve applied to the #header_area element. With this code, we add a background image such as the green background shown here:

Rather than making the #header_area .page element transparent, as above, we can instead add a background image by writing our code this way:

.custom #header_area .page {
background-image: url(background_image.jpg);
background-repeat: repeat;
}

This causes the background image to be limited to the width of our page content, as shown by the blue header background in this image:

For the final example, we will replace the default textual logo with a graphical logo. Rather than throwing yet another image onto the heap of patterned ugliness I’ve been building throughout the article, I’m going to remove the other backgrounds and take the page back to a blank white. Of course, you can use a graphical logo on top of any of the previously discussed background techniques; no worries there. I think it will just be easier to see the screen capture if I do away with all that.

Our textual logo is clickable and can be used to return to the front page of the blog; this behavior we will preserve with our graphical logo. Here’s the code:

.custom #header {
	margin: 0;
	padding: 0;
	}

.custom #header h1, .custom #header h1 a {
	margin: 0;
	padding: 0;
	height: 150px;	/* should be equal to the height of your logo image */
	background-image: url(logo.png);
	background-repeat: no-repeat;
	background-position: left top;
	}

.custom #header h1 a {
	display: block;
	}

.custom #header h1 a span, .custom #header h2 {
	display: none;
	}

This yields a left-aligned, hyperlinked logo image within the limited-width span of the page content. Here’s an image:

As an alternative, let’s try a full-width, center-aligned header:

.custom #header_area .page {
	width: 100%;
	}

.custom #header {
	margin: 0;
	padding: 0;
	}

.custom #header h1, .custom #header h1 a {
	margin: 0;
	padding: 0;
	height: 250px;	/* should be equal to the height of your logo image */
	background-image: url(logo.png);
	background-repeat: no-repeat;
	background-position: center center;
	}

.custom #header h1 a {
	display: block;
	}

.custom #header h1 a span, .custom #header h2 {
	display: none;
	}

In this example, we must increase the width of the #header_area .page element, allowing the h1 element to expand into that space as well. When increasing the width of the #header_area .page element, you might want to delve into Thesis’ Design Options > Fonts, Colors, and More! > Body (and Content Area) options to disable “Show interior layout borders”. The result might look something like this:

And there you have it, a plethora of ways to add images to your site and header backgrounds and logo, based on the very simple code we built into our header in the previous two articles.

Leave a Comment

Previous post:

Next post: