Build Your Own Business Website header image

Thesis 2.0 Launch Party Part 7 – Create a 2nd Header Style

Difficulty Level -

Listed Under Lesson Subjects -

Applies to -

Create the Home Page Header

I want to take this another step further yet and make a completely different header. To this part is taking me longer than I expected it to take. There is our main header now, what we’re going to do is create our home page header. Let’s take our home page and inside of our header, we’re going to take our Big Header Columns and drop it in then we’re going to take Big Header Right and drop it in that and Big Header Left and drop it in that.

The title, we’re going to take away and Big Header Left is going to have our Big Header Image, Big Header Right is going to have our Page Intro, our Nav Menu and our Tag Line so now that template has it. Let’s go to News, perfect. Our single template still hasn’t going to have it.

Create Header Style for Regular Pages

Now we’re going to create another header style for our regular pages. We’re going to come over to page and say, Front Page. Our Front Page Header has got all that stuff in it just like we want so now we’re going to change out the regular page header. Actually, I’m going to have to confess that at the moment, Front Page doesn’t work in this version of Alpha but it’ll work in here sometime today so I’m going to show it to you on a custom template instead.

We’re just going to imagine this is working properly, I want to do this in the single template. In a single template now, we’re going to create a new column. Actually, we can use the Big Header Columns there too and just use a smaller header image. I’m just going to do Big Header Left and Right again. I want the tagline in there, I just don’t want the Site Title in there. Big Header Left is going to get the small header image so we’re going to create a new text box, Small Header Image.

Insert the Header Image

Let’s open it up, come back over to the sandbox and we’ll insert the Small Header Image. It says, “Go back to our Homepage, the Barking Chihuahua Cafe, it’s going to use the homepage’s return URL, we’re going put it in its full size. In this case, I think what we’ll do is left align it, insert it into the post, copy that HTML, paste it, close it and I need to bring it in there. Big Header Right still wants the Nav Menu but it’s not going to have the Page Intro so this is just the Nav Menu and the Tagline.

Hit save to this, come over to News, “Choose the Right Architect” and there you go. Now we have the smaller version of our header in another page. We want to get rid of this double line that’s also an artifact of the main header. Come over to the header and look at our options, we look at border. Notice how he’s described the border as being 0 0 3px 0? You can use the short version of the border width and place the individual elements and like that.

We’re going to say, no border and hit save, compile it, refresh it. Now if my front page is actually working correctly, what would happen is I’d have this on my front page but not the interior pages and on my interior pages, I would have the small menu.

0 Comments… add one
0 comments… add one

Leave a Comment