Next up in this Customizing Templates for the Carta Skin for Thesis 2 seminar we are going to look at how to create a new full width section.
Full Width Header
The first kind of full width section we’re going to create is this header. We’re just going to make this header a whole full width piece all the way across and we’re going to re-configure this so the rest of the content will be a page layout but the header will be full width.
Let’s come back over here to our Skin Editor and do this in the Front Page. It doesn’t matter what page we do this on because we’ll have to copy it to everything else anyway. This whole thing starts off by creating a new html container.
Create HTML Container for the Header and Arrange Areas
So, we’ll come down here to the html container and we’ll call this Header Area. And in fact, I think what I’m going to do is give it an id of header_area as well. Then we’re just going to shift+drag Header Area into Body but it’s not going to be inside of Background Wrap.Then we will shift+drag Header into that then I’m just going to open up top navigation.
I’m going to drag the Nav Menu out of that and drop it into the Header. Then I’m going to take Top Navigation and put it away up here at the top. Now, drag the Top Menu down. So I’ve got the Typical Header, and I’ve got a Nav Menu – Top, and I’ve got a Header.
Review Header Layout
Next we’ll go about styling this but first we’re going to save the template and take a look at it to see what it looks like. Now this header is outside of that page wrap it doesn’t really look like it’s full width yet because we haven’t done anything else to it but that’s coming up next.
Add Styling to the Header Area
Let’s come over to Thesis and start off with Skin Design. I’m going to choose something in this aquamarine color scheme. Then, I’m going to take that Style 4 and apply it to the header. We’ll take the Style 4 Background and I need a background image for that so let’s come back over to images. We’re going to choose a file, this one here, and upload it. Now it’s 220 pixels tall. Go back over to the design and open up Style 4 Background put that background image in.I want the background color to be white and background repeat is going to be repeat x. I think at the moment we’re just going to let it go with that.
Save those Design Options. Obviously it doesn’t change anything yet because we haven’t assigned that Style 4 to this. So we’ll come back over to our html and under Header Area we’ll add the class style-4. Say okay to that, save the template and while we’re at it here we’re going to grab a different typical header here.
Add New Header Image
Let’s go to Media Library we’re going to give it a different header image here. We are going to use this header image and put that URL there for that. Save that and refresh this. Okay we’re making a little bit of progress here.
Re-Configure Header Content
Now what we are going to do is to re-configure this typical header. So that the right content is going to take an empty container and then what we’ll do is we’ll take the Nav Menu and drop it in there. Then we’ll take the Site title and tagline and drop it in there. Now we have Site Title and Site Tagline and Nav Menu there. Almost there.
I think in terms of background position I want to push this down another bit. That looks like about 20 pixels. So we’ll come back over here to our Skin Design and in our Style 4 Background, in terms of background image position we will say 0px and then 20px let’s see how that works. There we go. We’ve got a little bar down there at the bottom and actually we could just move this menu down here on the top of this if we wished by giving ourselves some margin and padding.
You can see we’ve built what seems to be a full width element that spans all the way across. But in fact maybe what we should do is put a little bottom margin here. Or a little top margin on that. Why don’t we do that? Let’s come down here to Background Wrap background. Let’s give it say 20 pixels of top margin. That will give us a little bit of separation between the page and that line. Yeah, there you go. We’ve got a nice strong-looking full width element and then we’ve got the page element down below it.