Build Your Own Business Website header image

Upgrade a Thesis 1.8.5 Site to Thesis 2.1 Using the Classic Responsive Skin – Part 4 – Setup Front Page Template – 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 got the main structure setup for the Thesis 2.1 site done, it’s time for us to setup our Front Page. Now, our Front Page in this case is a one-column set up with this feature box.

Content Options

The first thing to do is come over to our Skin Editor and select our Front Page Template. Then, what we’re going to do is start with the Header. Let’s just jump back over to the Header and start with Content Options.

In terms of Site Title and Site Tagline we’ll turn both of those off because we don’t want to see those. So turn those off and save the Display Options.

Design Options

Then we’re going to come over to Design. Our primary text color here is this grey which is #808080. So we’ll set our primary text color as #808080. Then our secondary text color is going to be black actually, so we just set that as black. Our link color is this orange color here which is this #F47300 in Thesis Design Options.

To make this easier let’s go back over here to the dashboard and over to Thesis Design Options. Then under Body (and Content Area) here’s the site background color, here’s the primary link color; so we’ll grab those. Then I think we’re going to leave borders and highlights alone for just a moment. This is the link text hover color. So that’s our secondary color #422700, not black; and I think we’re going to let that be good at the moment.

We also want that to be our site background color. Let’s come back over and see our Design Options. Since we’ve got all green now we may as well add the white back in. We are going to add a white background to this. Llet’s go to Editor first just so you can see what we’re styling. We are going to style this container and that container has a class of container.

So, that’s what we’re going to style so we go back over to Custom CSS and we’ll say .container, and then background color colon and then we’ll just say white (#fff;), and close it out. Let’s take a look at Live Preview for a second and there we go, we’ve got a white background and the orange there.

Let’s save that Custom CSS and go back over and look at this for a second. I don’t think we want any padding on top of that we don’t. So we will be removing the top padding here and that is on the Body. So we’re going to say padding-top: 0 px here. Let’s look at the Live Preview and there we go that gets rid of the padding at the top. Let’s save that and then we’re going to work on our header image.

Add a Widget Area for Header Image

The way this header works currently is that we have a widget area up here that provides the place for the header. And so, what we’re going to do is follow through with that and create a widget area that allows us to put the widget in for the header image.

Let’s come back over to the Skin Editor and inside of Header we can leave Site Title and Site Tagline here but we are going to create a new Widgets Box. We are going to call it Header Widget Area and the title can have a “p” it doesn’t matter since we’re not giving it a title.

We’ll give it a class of header_widget. I don’t think that we’re going to need to style at it all so it won’t really matter here. Say okay to that. Then, shift+drag that into the Header and while we’re at it we’re going to drag the Menu down and save the template.

Add the Header Images

Now let’s go back over to Appearance and Widgets and put our header image in. This is going to be where we figure out whether or not we got the right header image; or the right size of site here.

That’s odd we’re going to save this again. Template saved it says so let’s see what happened. Oh, pardon me I’m in the Home too. Let’s go back to Front Page; that’s something that you have to stay on top of. But since the box was created we can now move the Header Widgets Box, select it, shift+drag it into the Header, drag the Nav Menu down; save the template.

Let’s go into our Widget Areas. So, that’s Appearance and Widgets, we should have our Header Widget Area. Now we’re just going to drag both of these images in here.

Now, the way this developer has developed it, she’s using display widgets to decide which pages is being displayed on. And so, one widget is being displayed everywhere except for the Blog Page and one widget is being shown everywhere else. And this should actually now result in our image showing up; okay, it does.

Remove Borders and Padding

Let’s just see what’s going on here. That width is 900 pixels, so I’ve got a little bit of padding here in this header that is giving me a bit of an issue. So we’ll go ahead and remove the padding, back in Custom CSS and body; actually it’s going to be .header padding: 0px.

Let’s look at the live preview again, okay that’s better. So, we’ll save that and actually, I want to get rid of all of these borders. Now, again if come back over to my Resources Page you’ll see I’ve got a Code Snippets for Thesis Classic. Both in the CSS format and in the Text File format. These code snippets will allow you to remove the borders.

So, that’s what we are going to do; we are going to remove all of the borders. I’m going to just take that piece of code and I’m going to add it in here, and then there’s a one piece of code that’s a little extraneous so we’re just going to delete that part. This removes the border from the menu, this removes it from the content and from footer; and from the header.

And in order to save me some CSS bytes I’m going to add the padding to this instead and loose this header reference. Okay, so that took care of setting up the Front Page Template header area.

0 Comments… add one
0 comments… add one

Leave a Comment