Build Your Own Business Website header image

What’s New in Thesis 2.0 Part 7 – Create a Custom Header Style for the Homepage

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to -

In this session we show how to create a custom header style in Thesis 2.0 for the homepage (Front Page) and blog page since the last header we created only applied to Pages. We show how to add a text box for the logo image, get the HTML for the image and place it in the corresponding package. We add another text box for some introductory text in the header below the menu and show how to use id for styling that text in Single Element Style packages.

Rick runs into a few problems with the styling so you also get to watch him troubleshoot those problems.

The next thing to do is to create our 2nd header in Thesis 2.0 and we’re going to start off creating that 2nd header in our HTML section. And actually, what we’re going to do is move from our page to our front page because this is only going to apply on our front page and on our blog page.

HTML: Add the Structure

So we have our header columns here and what we need to do is create a new header column. So we’ll create a new container and that container is going to be called header columns big. And let’s shift drag this up and drop it in that. Now let’s give it an HTML class of header columns big. I’m going to copy that for use later and then I’m just going to drag header left and header right up into place and drag the header columns off and move header left up.

Add an Image in a Text Box

We’ve got header left and header right, we’re going to create a new image for this. So let’s create a new box and it’s going to be a text box. And that new box name will be header image big. And I’m going to drag header image typical off of this then we’ll open up header image big. Let’s come back over here and insert a new image from my media library and that’s our large logo. I’ll say go back to our homepage and at The Barking Chihuahua Café. We want to go to our home again and let it be left align in our full size, insert that into the post, copy the HTML, paste that HTML and save the template.

Create a New Package for Header Columns

Now we need to do something with CSS here. We have our header columns typical. Now we’ll create a new package and it’s going to be a columns package and it’s going to be header columns big. And the CSS selector will be header columns big and hit save.

We’ve got our header columns big and now we’re going to change our options. Our column 1, option is going to be 436 pixels wide. And with a left alignment, it’s not going to have any padding. Column 2 is going to be auto and it’s also going to be left align and it’s not going to have any padding this time. Hit save and save and compile CSS. If we refresh this, our menu still works right. Now we’ve got our big logo here.

Add Text Box for Additional Text in the Header

Next I want to put a bit of text down here below this. So I’m going to come back over to the HTML editor and I’m going to add another box. And this is going to be a text box and it’s going to be page intro text. We’ll add the box. And let’s see, shift drag into place and then drag it down, open it up. I’ve got this intro text sitting here already in my visual editor. I created the “Welcome to the Barking Chihuahua Café”, gave it a heading of 3 and then put this in.

I’m going to come over and copy that from this HTML to that HTML. I am going to wrap this in paragraph tags that’s just something I couldn’t get out of that. But now we’ve got our text. I’m going to give it an id in this case of intro text and I’m going to say page intro text. And I will be using this id for styling it. Go ahead and hit save to that, save the template.

Create a New Package for Header Text

Let’s come over to CSS. We’re going to create a new package and this package again is going to be a single element style. So add our package. The name will be front page intro text. The reference will be page intro text. The selector will be #page intro text. The options will be… the font size is 17. The font weight will be bold. I’m going to let Thesis 2.0 figure out what the line height should be. I’m not going to do anything with the font variants or letter spacing. The text color is again, going to be that brown color and we’re not going to do anything with the background. I am going to give myself 20 pixels of left margin and the typography is going to be 500 pixels wide. Thesis 2.0 will automatically calculate the right line heights and everything based on the font size, font style and width using the golden ratio.

Create a New Package for the Heading

Hit save to that. And then I need to create one more and that is going to be a style for the heading. Let’s create a new package. Okay, we’re going to make sure that we add this before I forget it. And then I’m going to add another one and that’s going to be heading. Okay, now we’ll add our package, front page intro heading and the reference will be that.

The CSS selector will be #page intro text h3 because that was the tag I used. And our options, the font setting is going to be larger. We’re going to call it 24 pixels and it’s going to inherit everything else except I want my text alignment to be centered. I’m going to give a line height of 44 pixels. I’m going to calculate the line height myself here and hit save.

Review Changes and Troubleshoot Errors

Save this and compile it, come back over and refresh this. And obviously, I put it in the wrong spot. So let’s get back over to HTML… where did I put it? In header right under… well, that should be right. I haven’t added the header columns big, she says. You know what, you’re right, Julia. I didn’t do that, did I?

So you get to see by my errors here how the process works. So there’s some benefit to watching me screw up. What is it? It is header columns big. Okay, obviously I’ve got something not quite right. Header columns big, options, column 2 is auto… Okay, let’s make this instead, 500 pixels. Actually, let’s look at it this way. 436 so my overall page is 959 pixels wide minus 436 pixels, that’s 523 pixels so let’s do that. Let’s make it 523 pixels and see what happens. Let’s see, header columns big.

You know, it’s going to be something really dumb too. I mean, I’ve mistyped something or probably. Inspect the element… let’s just take a quick look at this. Okay, it’s definitely C2. It’s definitely versus C1. My C2 is 523 pixels wide. What happens if I make it 500 pixels wide? Okay, it jumps right up there. Just to make sure that image is as big as I think it is…oh, that’s what it is. Oh yeah, I’ve got padding on this header. If you look at the header here and if you’re familiar with this, you can see some padding up there on the right and on the left. I’ve got header padding that I need to get rid of.

Let’s come back over to our header definition here which came with the style and look at our options and come down to padding, we’ll leave the top padding in place but we’ll get rid of the left and the bottom padding and hit save. Save and compile and refresh. There we go. Now we have it sitting there right.

I think maybe that doesn’t want to be centered though. I’m going to bump that over our intro heading. Settings, text align left. Okay, so here’s our Barking Chihuahua Café. If we come over to our regular page, now we have the smaller one and I still need to mess around a little bit with my blog skin.

Let’s just go ahead and click to edit the blog skin. And in this case now, we’re going to do what we did before. We’re going to bring over header columns big and then header right and header left. And then header left is going to have the header image big and header right is going to have the nav menu and the tag line and the page intro text, take site title, move it away and then page intro text comes down here. Site tagline, nav menu page intro text… we should be in good shape. Let’s view the site. Let’s go to our blog page. Perfect, okay. We now have our customer header set up for Thesis 2.0.

0 Comments… add one
0 comments… add one