Build Your Own Business Website header image

Thesis 2.1 for Web Design Professionals – Part 7 – Create a 2 Column Responsive Header in Thesis 2.1

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

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

So now that we have an understanding of the Thesis Classic Responsive media queries, it’s time for us to actually do something with that. And what we’re going to do is create some responsive columns in our 2.1 skin using those media queries and using the responsive code that is already included in These Classic Responsive.

We’re going to make 2 columns here in the header where the left hand column will be an image about this size, a header image here and then the right hand column is going to be the tagline and then the menu.

Remove Existing Header Image

And so we start that whole process really by removing this header image. So we’ll come back over here to Thesis home and go down to the header image. And remove the header image and then come back over to the skin editor and we’re going to create our columns here.

Create Columns Using HTML Containers

We’ll just start off by adding a box and we’re going to add an HTML container. We’re going to call it header left. We’ll create another HTML container and we’ll call it header right.

Add Text Box and Header Image on the Left

Then we’re going to use a textbox to add that header image so we’ll come down and create ourselves a textbox and we’ll call it header image. We don’t need any sort of HTML wrap around it so we’ll just say yes that to it. And then we’ll shift drag header image into header left and then shift drag header right in the header and header left in the header.

And open up header and then we’re going to just drag the title all the way out but we’re going to drag the nav menu in the header right and the site tagline in the header right. So we’ll have the tagline and the menu in the right hand column and we’ll have the header image in the left hand column.

Let’s go ahead and add the header image in here. So we’ll come back over to our dashboard and come over to our sandbox page. I actually have the image sitting in the sandbox right here, it’s this image. It’s all ready to go so I’m just going to grab that link with that image. You can see the image is 293 by 238 so it’s quite a different size than our last one.

We’ll copy it and then come back over to Thesis here and the content because that’s where we’ll enter the information in the box. Open up the header image, drop our code in there, disable automatic P tags and save our options.

Split Boxes in Header into Columns

Now what we need to do is split this up into actual columns. We’ve created the boxes obviously but we haven’t told the boxes what to do. Now Thesis 2.1 already has this little columns thing set up. They’ve got a columns wrapper with a class of columns and they’ve got the content column with a class of content and the sidebar column with the class of sidebar. We’re going to borrow those.

We’ll take the columns class and add that to the header. We’re just going to add the class, not replace it. So add it to the header and then header left will have the class of content and header right will have the class of sidebar.

Reverse Size of the Columns

Now we should have the class that’s set up. We do except of course, that we have the header image in the wide column and this is the narrow column so we need to get in and change that. And what we’re going to do is essentially, for the header, we are going to reverse the sizes of these columns.

So let’s do that first. Let’s come back over to our custom css and we are going to create a new definition for those columns. And I guess we’re just going to do it right here. So we’ll say #header .columns and .content and then we’ll insert the width of that content column.

We’re going to actually insert the sidebar width. W sidebar, so we’ll say width colon and then we’ll add sidebar width instead of the content width. And then we’re going to do the same thing for the header .columns .sidebar and we’ll use the content width.

So essentially, we’re using the same configuration but we’re reversing the widths in the context of the header. We’ll save our custom css, come back over here and refresh it. Now it should start looking a little bit more like it should.

Review Header and Identify Changes

Unfortunately, we have padding that is making it so that we don’t have enough room, padding in the header. So let’s just get rid of that header. So we’ll say border none padding 0. That should now get our columns so that they actually sit side by side. There we go.

Our columns are now sitting side by side although… oh my designation was incorrect. It should be #header .columns so I need to go back to my css here. These are connected, right? This class is the same… the class and the idea referencing the container so the space there is the problem.

We’ll save our custom css, come back over and refresh it. Now we should have our widths working correctly. There we go, we are.

Remove Background Image

I want to get rid of this background image in the header just like what we did with the feature box on Wednesday. So we’re going to come up to feature box columns and we’ll say header columns. So background image none for feature box columns and header columns. Save that, refresh it, there we go.

Change Tagline Style

And the other thing I want to do here quickly is to change the tagline font size and alignment here. So we’ll come on back over here to the class. Well actually, let’s do some of that in design and we’re going to edit the site tagline. Its font size is going to be 32 pixels and that’s really the only thing we have to do there.

And then back in custom css, we’ll just say site tagline and site tagline and text align center. And I’m going to give it a little bottom padding. So padding bottom colon and at the moment, let’s just call it 20 pixels. We’ll see what that looks like as we work our way through this.

Make the Changes in All Templates

Go ahead and save that, refresh it. Okay, that looks pretty good. We have to go to the homepage, I mean the newspage because I haven’t done this elsewhere. And let’s just go ahead and change this whole thing. Let’s go in this editor and make sure that we make this change to all of our templates.

Single Template

So that was the home template. We’d come over to single and we’ll add the header left box, add the header right box, add the header image box. Shift drag header image in the header left, header right in the header, header left in the header. And site title out of header, site or nav menu into the right, tagline into the right so we’ve got our tagline in our nav menu and save our template. And then we can come take a look at our single template and it’s been changed now.

Page Template

Let’s go to our page template which has not been changed yet. So go to the page template and just repeat that. So header left, header right, header image, shift drag header image into header left. Shift drag into header right in the header, header left in the header, site title out, nav menu into header right, site tagline right into header right. Save the page template. Let’s take a look at it. Okay, it’s working in the page template.

Front Page Template

Now let’s go to our front page template. Again, header left, header right, header image, shift drag image in the left. Shift drag right in the header, left in the header, site title out, nav menu into right, site tagline into right. Save it, look at it.

You can see we’ve got a little border thing here now and this border is caused by the post box class that we gave to this widget area in the feature box. So we’re going to have to get rid of that but we’ll do that here in just a moment after we change our archive page.

Archive Page Template

So we’ve got our archive page and we’ll do header left, header right, header image, shift right in the header, shift left in the header, shift title out, nav menu in the right, tagline in the right, save the template.

Remove Border from the Feature Box Area

Okay let’s go back over to our custom css and then under feature box post box we’ll say it here. #featurebox .postbox and border none. Okay, save that css, refresh it. There we go, we got rid of that border.

Review Changes and Identify Issues

And then if we take a look at this in the Responsinator, it’s not quite right. Something’s not right about that. Oh, because we have to add these classes to…the header column’s content and the header column sidebar need to be added to our media queries. That’s what it is.

Add Additional Media Query

So if we come back over to this and copy that. Well actually, I think we need to add a media query because we’re got our negative media query here but now, we’re going to need to add our positive media query.

We can get that positive media query from our cheat sheet. And the positive media query that we’re going to use is the largest one because that’s where Chris changes his column sizes. So we’ll copy that and come back over here to the large media query and then go back up to these two rules, header columns content and header columns sidebar and paste those rules. But now we’re going to say width is 100%.

Review Changes and Fix Issues

Save the custom css and take a look at it in the Responsinator now. So now it’s looking pretty good in the phones but we have a little funkiness here because this is wider. We still have a float going on so we also need to clear the float and in this case, not clear it but… that’s interesting. Oh yeah, let’s fix the tab on this. There we go, now it’s working right. Float none and then we’ll add clear both to this just to make sure it actually works. This should make those things stack on top of each other. Let’s check it and see if it had any effect on the desktop which it didn’t.

So now let’s come back over and refresh the Responsinator view. We’re going to scroll down here and it looks fine in this device. Okay, it’s looking good there. Perfect.

This is exactly the way Chris has handled it as well where the columns just automatically start stacking as soon as you get to the mobile view.

0 Comments… add one
0 comments… add one

Leave a Comment