Agility Skin’s Smart Header
Now we’re going to talk about this smart header. If you open up your Skin Editor, you’ll see that inside of header area page, I’ve got this box called typical header. And the box that’s typical header is actually an Agility 2 column header. This is a box that does a lot of specific things for you.
In the course of this class, we’re never going to enter ids or things like that in here. But if you are that kind of person who wants to specify an id for this thing, you can. If you don’t know what I mean by that you should go watch the video that I suggested, the Beginner’s Guide to Thesis Skin Editor, you’ll see what that id is. But you don’t need to worry about entering an id here.
Choosing a Column Configuration
You do have to decide what the column configuration is. Now out of the box, the column configuration comes in two columns with a 1/3 column on the left and a 2/3 column on the right. You actually have a choice though of 2 equally sized columns. You could put 2/3 on the left and 1/3 on the right, 1/3 on the left, 2/3 on the right, ¾ and ¼ or ¼ and ¾.
What You Can Add to the Columns
In any case, what you do here is you choose a column configuration and we’re going to stick with 1/3, 2/3 here. Then you decide what you want in each one of your columns. Your choices are, site title and tagline, a header image, a widget area or a nav menu. I’ve selected header image here and I put the header image URL down here.
We’re going to play with the header image here in a minute. But you have this exactly the same set of choices here. You could choose the put the site title and tagline which is the way it comes.
You could put the header image. You could put the widget area or you could put the nav menu.
If you want to put a call to action up there beside this, you may choose to put a widget area instead. You may want to put a nav menu there and if you put the nav menu in then this is the place where you can choose the menu that you’ll use.
Example – Add a Menu
Let’s, save the template now and our menu pops up here. The menu is too big actually to fit in the space that’s available for it based on this menu size and based on these settings. So we’ll have to change some menu settings to make the menu work up there and we would also want to drag this menu out of the way so we could do that.
We could take our top menu area and drag it so that it’s no longer there and then save the template. And now that top menu area is missing. It’s gone and we could have our menu here. And it’s possible for us to, of course, add space above the menu so that the menu gets more centered and that sort of styling. We’re not going to do that at this moment but it’s absolutely possible for us to do that.
Example – Header Area
Let’s come back over here to this and we’re going to put site title and tagline back in. And we’re going to drag our top menu area out of the body or into the body and then just drag it down under the header area. Save the template, come back over and look at our thing.
Adding a Header Image
So this is the kind of layout that you can do with that. I am going to look at different ways of dealing with the header image. We need to start off by adding an image that we can put in our header and you might try to use this images thing here but you can’t. These images won’t work for the header image. This only works for background images.
So what we’re going to do is come back over to our dashboard and we’re going to go to the Media Library and hit add new. We’re going to upload an image, our header image here, hit select files and then I’m going to go to the place I have these things stored, which in this case is graphics, tutorial graphics and start building your website here.
What Happens When the Image is too Big
Let’s see, I’m going to take an image that is way too big first and this image is 1008 pixels long. It’s way too large to put there and I’m going to show you what happens when you put the image in that’s too big.
Come over here and copy the file URL from there, go back to our editor, open up the typical header and place that URL here. Save the template and here’s what happens. The image is shrunk to fit in the available space.
This is the basic responsive behavior of Agility, it always shrinks images to fit in the available space. And since the available space is 320 pixels wide, 1008 image is going to be shrunk down proportionally so it also gets shorter as it’s getting narrower and fits inside that spot. So if you’re using a 2/3 thing here, you want to use an image that’s closer to 320 pixels wide because that’s the space that’s available.
Adding an Appropriately Sized Image
So we’re going to come back over here and add another image. Add new and we’ll choose a header image that is 300 pixels wide. We’ll edit it, grab its URL, come back over here and change the header image URL to one that’s more appropriate for its size, save the template and now you see we’ve got our image sitting in here in this spot.
Change the Text Size to Better Match the Image Size
Now obviously, with the image this size, this is way too big for these things, for the text. And you can adjust that by coming over to the Thesis home and under Skins, Agility Nude options, come over here to a site title of font styles and just change the size.
Let’s say that we wanted to take it down to 32 pixels wide and let’s change the tag line down to 18 pixels wide or 18 pixels. If we save these settings then come back over to our Skin Editor, over to css and save the css… let’s see, make sure that reloads. Well obviously, we need to make it a little bit smaller so we don’t end up with that funky thing there. So let’s make it 30 pixels wide, save the css and now, that has gotten down to be a little bit better.
In a later class, we’ll talk about how to adjust things like padding because this configuration is intended to be used with an image that is similar in size to the text that’s being used here. And so there are some other adjustments that need to be made with this. But having said that, this is roughly how you would adjust those kinds of things. And roughly what happens when you pick images or choose images for your header images.