Build Your Own Business Website header image

What’s New in Thesis 2.0 Part 5 – Add a Clickable Image and Menu to the Header

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to -

In this session we show how to add a clickable image and menu to the header in Thesis 2.0. We add 2 columns in the header, one for the logo image and the other for the menu and tagline, and create a package to style the columns. And we show how to add the HTML for the clickable logo image to a text box inserted into one of the header columns.

The next thing we’re going to do now that we’ve created our 2-column layout and our 4- column fat footer in Thesis 2.0, is add the header image and the nav menu beside each other in the header up here. And we’re going to create a default header and then we’re going to create a header for our front page and for our blog page after. So we’ll have custom headers here.

Create Default Header Style in Page Template

We’re going to start off with our page. In order to put an image on the left and our nav menu on the right in Thesis 2.0, we need to put 2 columns in our header. So we are going to create 2 columns here by creating a new box.

HTML: Create the Structure – Add Column Boxes

Let’s add a new box, drag our box up here. We’re going to create a container and it’s going to be header columns. Add we’re going to call this one header columns typical. And we’ll just drag that up into place. Shift drag that up. Now we need to create a couple of columns for that. So header left and header right is what we’ll create. Container header left, add box and just like before, that’s going to be C1. And then we’ll add a new box, header right. Add the box and that’s going to be C2. We’ll shift drag header right up into header columns and then header left up into header columns.

Arrange Contents

We are also going to take header columns and shift drag it and drop it into header. So shift drag and drop it into header. Then we’re going to open up our header here. We’re not going to be using the site title so we’ll drag that out of the way. We are going to use the site tagline though and I’m going to put the site tagline in header right and I’m going to put the nav menu in header right. So we’ll shift drag and the nav menu, drag it into header right. Shift drag the tagline and drop it into the header right.

Create CSS Header Styles

Now we have the tagline above the nav menu and header left is blank. We’ll save this template then come over to CSS and create a new package. And again, it’s going to be a columns package. Add the package. This will be typical header columns. Actually, I’m going to call it header columns typical. Let’s save this package.

Actually, let’s go ahead and change the options. So we’ve got 2 columns. Column 1, the width is going to be 300 pixels wide and it’s going to float to the left. It’s not going to have any padding at all. Column 2, we’re going to make auto and in this case, we’ll float it to the left as well. And I’m going to give it 100 pixels of left padding and you’ll see why in a minute. If you don’t say anything here, if you just say 100, Thesis 2.0 assumes it’s pixels. If you want it to be ems, you have to type in em and so on and so forth. Let’s save and compile.

So here it is. I’ve got nothing in the first columns so the second column just pushes all the way over. As soon as I put something in here, it’ll push back.

Add an HTML Text Box

Now we’re going to add an entirely brand new type of box and that box is going to be an HTML box. Come down here and we’ll say add a box and it’s going to be a text box and this will be typical header image. Let’s see, header image typical and add the box. And I’m going to drag this box up and drop it into header left and then I’m going to open it. We’ll place HTML in here but in order for us to do that, we need to go back to the site.

Set Up the Clickable Header Image

I’ve got a sandbox page set up to do this. And in it, I’m going to put my header image. So I’m going to select add media, go to my media library where I’ve got the header image. I’m using my smaller header image here and I’m going to use the full size version of it. Okay, I want the title to go back to our homepage. I want the alternate text to be The Barking Chihuahua Café. I want the link URL to be my homepage. I’m going to float this one to the left. It’s going to be full-sized. We’ll just insert into post. That writes all my HTML so now all I have to do is copy it.

Add the Image to the Text Box

Come back over to the skin editor here and open up HTML, paste it, close it, save the template. Let’s come back over and refresh it and now my header image is there. And come over like this, we can click on the header image and it takes us… okay, the header image is not clicking. Let’s go over to CSS and make sure I didn’t screw up that. Oh it’s because I haven’t put any definition in here for my header yet. So header columns typical right. Okay, let’s do that again. Copy, cancel, header columns typical. Hit save and compile. Come back over here and refresh this. And now it works.

The menu is in the wrong place. It was covering up over The Barking Chihuahua Café. But if you click on that, you may now get it. If you go to news though, notice that the heading is not any different, right? And that’s because, of course, this is only currently applying to pages.

4 Comments… add one
4 comments… add one
  • Jennyfer January 23, 2013, 3:21 pm

    Thanks again for another great tutorial. I was curious to know though, have you had any browser incompatibility issues? in addition to chrome and firefox, I also have IE7 ( haven’t updated it because I need this version for a job I do from home.) on IE7 the page looks very different. How can I make sure my site looks uniform on all Browsers?

    • Rick Anderson January 24, 2013, 7:25 am

      Jennyfer you do need to test the design in IE7 because some folks still use it. However, that does mean that you also accept the limitations of IE7. There are many things we take for granted that IE7 can’t do. It can’t do gradients, multiple background images, border radius, box shadow and many other things.

  • Evandro Pastor July 30, 2013, 7:53 am

    Hello!

    Your video has a streaming problem. :/ I can’t see it.

    • Rick Anderson July 30, 2013, 2:49 pm

      Evandro – just try it again. I trust that you realize you are watching the 2.0 version rather than the 2.1

Leave a Comment