Build Your Own Business Website header image

How to upgrade from Thesis 1.x to Thesis 2 Using the Thesis Classic Skin – Part 6 – Customize the Header

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Now that we’ve made some of the big changes to this site we’re upgrading to Thesis 2, we’re going to start taking this thing piece by piece and bringing it up to speed with the original design or converting the original design. We’re going to start off with the header.

Review Original Header Set Up

Let’s refresh our memory of what this header looks like. It’s comprised of a background image that goes all the way across then it’s got this other background image here that sits over the top of it then we have our title and tagline that we’re going to shove over a bit. We’ve got our search function and we’ve got our nav menu.

Make Changes to the Header in Thesis 2

What we’re going to do here is move on to customizing the header so that the header looks like this. The way this works is we’ve got a header, background image then we’ve got another header background image over the top of that. Then we shove our title and tagline over a bit and we put this search widget in there and we put our Nav Menu in.

Add Header Background Image

This is what we’re going to try to get to by the time we are completed and we’re going to start right off the bat by putting this background image in. Now, this is the background image that we downloaded from the site. So I’m just going to upload it now, choose the file and I have it stored under Websites, Thesis eStore and my top background is there.

I’m going to add that image and while I’m here, I’m going to take the logo image as well and add that image. Then I’m going to copy this image, come back over to the CSS and I’m going to open up my body because I’m going to put this first back on the image up in the body.

If we come over to options and background, place that background image there and background position, we can leave alone because it will default to top left. We’re going to leave attachment alone but we only want to repeat in the X direction so you can go ahead and hit save to that and now, you can see it running all the way across our body there.

Position the Nav Menu

The next thing we want to do with that is move our Nav Menu down to where we want it then we’ll insert our other background image. Let’s come back over to the HTML editor, open up the Header Area, take our Nav Menu and drag it below the Header, save the template. There we go, now it’s dropped down the way we want it.

Place a Background Image in the Page Wrapper

Now, the next thing we’re going to do is put a background image here in the page wrapper so it sits behind the site title and tagline. That means we’re going to actually need to create a new package. Recognizing that we’ve got our Header Area and our Header Area Page, what we’re going to do is create a style for Header Area Page and that’s called Header Area Page Wrapper.

Let’s come over to our CSS and we’re going to create a single element style package called Header Area Page then header_area_page and #header_area .page_wrapper, there’s our selector. This is going to affect only the page wrapper that’s in the header area, it won’t affect the other page wrappers.

If we come over to our options, actually what we need to do is just save this, come back over to our images, copy the logo image, back to CSS, now we can open up that page wrapper and put that logo image in there. If we come to background and now we’ll say 0 0 which top left again and this time it’s no repeat, hit save, come back over and look at the site.

I haven’t put the reference in yet so &page_wrapper and this was &header_area_page, now we should be able to see it just fine. Not quite, #header_area .page_wrapper okay. Well, that’s a little bit better.

Change the Box Sizing

The other thing I need to deal with is box sizing, that was my other problem. Under Header Area Page, when I added that padding to that I also needed to change the box sizing to border box so that it didn’t enlarge that section. Because now it’s brought the header image over where I wanted it in line here.

We’re going to take the padding out of Header Area Page and we’re going to put it into Header instead. I knew that but I just got carried away with it. So the next thing we’re going to do then is move this over by adding padding to its contains and what’s containing it right now is the header.

You can see that in the HTML, come over to the Header and you can see the Site Title and the Site Tagline inside the Header. Come over to the CSS over to the header section and just add some padding to the header. Left padding, instead of half we’ll say 120 pixels, hit save and now it’s pushed over. There we go, that looks like what I want it to look like.

0 Comments… add one
0 comments… add one

Leave a Comment