Build Your Own Business Website header image

How to Create a Landing Page in Thesis 2 & Agility – Part 6 – Style the Landing Page 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 gotten the structural part of the Landing Page in Thesis 2 completed, we’re going to style each one of these things. We’re going to start off by styling this header and then we’ll style the headline and we’ll do whatever styling necessary to make this work. We’ll wrap up the styling down here and then we should be good to go. But we’ll start by styling the header.

Add a Custom Body Class

One of the things I want to do that make styling this easier is add a custom body class. What I’ve done is I’ve come over here to the Landing Page template options which is what this wheel is. Then come over to body class and I’m just going to say landing_page. This is going to be the custom body class that every page will have when it uses this template, save that template.

Let’s refresh this now because the first thing we’ll do is give ourselves the bottom border that this has and then change its menu style and move the menu down.

Style the Landing Page Header Columns

So this is our header columns. We’ll give that a bottom margin and we’ll give it a bottom border. This menu is going to get a new style so let’s start off with that, let’s start off by adding a bottom border.

You can do this one or two ways. You can do the CSS either by actually writing the CSS or you can do it by creating packages. At the moment, I’m going to do it creating packages, for you CSS writers I just want you to know obviously, you can do this just by writing CSS.

I’m going to add a package and I’m just going to make it a single element style. Remember that what we’re doing is we’re styling this so we’re styling the header columns. We’re going to do a landing page, the class will be landing_page, the ID will be #header_columns and then we’re going to give it a bottom border. So Landing Page Header and selector is .landing_page #header_columns.

We’ll come over here to Options. Under our border, we’re going to say border width is 3 pixels, border style is going to be dotted, border color will be 888, bottom margin is 24 pixels and we’re going to hit save.

Then we’ll just come over here to our columns section, &landing_header, save the CSS and now we should have a bit of margin. I forgot to say it was just bottom margin, so Landing Page border, it’s not 3, top is 0, right is 0, bottom is 3 pixels and left is 0.

Okay, there we go, we’ve got the dotted line at the bottom, maybe a bit of bottom padding there as well, let’s make it 12.

Style the Landing Page Menu

The other thing we want to do is change up this menu style and then move it down. So, what we’re going to do with that one is landing_page .menu so we’re going to create a new horizontal dropdown menu style. It’s going to be Landing Page Menu, landing_menu and what we’re going to do is say .landing_page .menu. That’ll be the selector that adjusts this and then what we’re going to do is just get rid of the background color and the background color is going to be transparent.

That’s what we’re going to do first, we’ll just get rid of that background color, hit save. Come back over to the menu, save that CSS. Obviously, I missed something here. This is also the background color of this though. I forgot about that, I shouldn’t have done that actually with this skin, I may fix that later but we’ll come back down to this and say, background color:transparent, there we go.

Now, I guess we want our hover color to be a different color than white. We’ll come back over to that and our Landing Page Menu under our link settings, hovered links, we’re going to give it a color of 888.

We also want to pull this down and you can do that actually in the Landing Page Header. Actually, I’m going to go ahead and create another Agility 2 Column Header and this is going to be Landing Header and this will be .landing_page #header_columns .

Under my right column padding, I’m going to say, top padding, let’s give it 30 pixels. I don’t want to do this to the Main 2 Column Header because this is only existing on our Landing Page so I’m just going to go ahead and &landing_header_columns. Save that CSS, there we go. And we could make this right aligned and move that all the way over there if we wished, I don’t think we will.

0 Comments… add one
0 comments… add one

Leave a Comment