Build Your Own Business Website header image

Using the Agility Skin for Thesis 2 – Part 9 – Agility 2 Column Header Box

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.

The Agility Skin for Thesis 2 has two different types of smart header boxes. We’ll head over to the skin editor to take a look at these. You’ve got the Agility 1 Column Header and then by default the Agility 2 Column Header is actually in here. I’m calling the Agility 2 Column Header the Typical Header.

Column Configuration

You can specify your own id although it will automatically add the id of header columns. You can select the header configuration. It can be 2 columns equally sized, 2 columns where is the left is two-thirds wide and the right is one-third wide or 2 columns which is this is the default, the left is one-third and the right is two-thirds. There’s also 2 columns where it’s three-quarter and one-quarter or 2 columns or it’s one-quarter and three-quarters.

So you can set that. I’ll choose this one, say okay and save the template. Now it made our header image a little smaller so that it fit inside of that and then it made this section larger.

Configuration Options

By default what happens is the left column has the header image and the right column has the site title and tagline buy you actually have a choice. You can put the site title and tagline in either one, you can put the header image in either one, you can put a widget area in either one or you can put an empty container in either one.

Example Use: Add and Style Nav Menu

So let’s say you want a put a text box in instead or you want to put an opt-in box instead. You can just make one an empty container or you can add a nav menu to it. So if you add the nav menu, we’ll add the nav menu to this one then you have a choice of which menu to add. I’m going to add the category menu to that. Say okay to this and save it. Now what I have is a menu up here and a menu with fairly minimal styling.

If I want a more profound style then I can come back over to the skin design options and under menus I can select the header menu and 10, 20, 10 and 20 for padding. Let’s say okay to that and save it. That should get me back to a place where I can see my colors.

I could set the link color, that background color to that and say the hover background color to this and the current background color to that. If I save that, save design options, now I have a menu that’s styled.

Control Over Alignment and Padding

Anyway, you’ve got complete control over this. In fact, among the things that you can control is the padding and alignment.

Example #1

So if we come back over to design options and look at our layout, you can come down to this 2 column header right column. Let’s say I want 50 pixels of top padding there and I want to right align that menu. Say okay to this, save the design options and I think that will right align the menu. But it didn’t right align the menu, it right aligns the text.

I’m going to look for an update for that because I do want this to right align the menu but you can see I used that padding to move it down so that it wasn’t up against the top of this and you can use padding and margin to move things around.

I’m definitely going to fix this because I want you to be able to change the Agility header menu alignment. You can do that in your typical header. From the nav menu let’s go back to site title and tagline. With the site title and tagline, now it is right aligned and it’s got all that extra padding.

Right column header, get rid of that top padding but center the content so now the text is align center instead of align left. Anyway, those are the kinds of things that you can do with header styles.

Example #2

You can also actually do exactly the same thing in the left column. Let’s just say I want 10 pixels of padding on that left column just to bring that image down a bit, it does it. So it’s all there available to you in the design options for those header boxes.

Now, if you are not using the empty container as one of your header choices, you can always…I guess this doesn’t have the opt-in box but you can always just add something to the header. If you drop it in the header like that it’s going to go below the header so you got a Facebook Like button down there or whatever it is.

It could be an opt-in form that runs the length of it or whatever but if you insert it inside the header and the header is setup so that neither of these sections have an empty container then what you drag in there wil go below the header.

However, if you set one of these things as the empty container then if you drag it into the header it goes inside that container. So now you can see the Facebook Like comes over here because now the empty container is not below the header but it’s in the location that we set. It should be on the right hand side.

Create Your Own Agility 2 Column Header

Now, let’s take this back to 2 columns one-third, two-thirds with header image, site title and tagline. Save it and save the template. That’s the 2 column header configuration and you can have multiple headers. Let’s say you’ve got a landing page or you’ve got a completely different page and you want something different, you can always just create yourself a new Agility 2 column header.

If you create yourself a new Agility 2 column header, you can place this new column header in a template and it’ll take the settings that you give for this one rather than the settings that you set for the main one. That means that you can have a default header and then you can have a front page header that’s entirely different than your default header.

0 Comments… add one
0 comments… add one

Leave a Comment