Build Your Own Business Website header image

Customizing Templates in the Carta Skin for Thesis – Part 2 – Make a 3 Column Header in Carta

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 I’ve introduced the Carta skin’s Responsive Column System for Thesis 2, we’re going to start off by making a 3 column header in Carta.

Create a Custom Template

We’re going to do this in a custom template so I’m going to go here to click on the home template and over custom template, say add new. I’m going to give this a name and call it 3 Column Header.

This is going to be a page template which means that once I’ve created this template, I’m going to come over back to here again click on that title then I’ll choose copy from template. I’m going to copy from page template, say copy template. Now all of the page template itself has been added to this new 3 Column Header.

Remove the Header

The typical header is this Carta 2 Column Header and this box is a special box. It’s not one of the Carta Responsive Columns, it’s a special box all by itself that has very specific behavior that we’re essentially replacing. What we’re going to do is take this Header and we’re going to drag it off and drop it off up here.

We are not going to drop it on the pink because that would delete it everywhere and we don’t want to do that, we’re just going to remove it from this page. Then we’re going to come over here and we are going to create a wrapper.

Add New Column Wrapper for the Header

So we come down to the Carta Column Wrapper, say add new. We’ll call this 3 Column Header. While we’ve got it up we may as well set the columns and we’re going to make it 3 columns. We’ll have one quarter on the left, one quarter on the right and half in the middle. So, pick that one as our choice and say okay to that.

Create Three Columns for the Header

Then we’re going to create 3 Columns. Just come down here and create 1 Carta Column. This Carta Column is going to be called the Left Header Column. Remember that this is going to be one quarter wide and then the next one will be the Center Header Column. And it will be 1 ½ wide and then finally, the Right Header Column. That will be one quarter wide.

We’ll drag the Right Header Column into the 3 Column Header, the Center Column and the Left Header Column. Let’s open it up and you can see that they’re all sitting in there. Then we’ll just drag this into the Background Wrap so it’s up at the top.

Add Content to the Columns

These are all empty columns, right? So, now we need to add content to them. The first thing that we’re going to do is add the header image to this one, we’re going to add the site title to this one and we’re going to add an AWeber sign up form to this one.

Header Image, Site Title and AWeber Sign Up Form

First off we’re going to create a text box and we’ll call that text box Header Image. It doesn’t need a wrapper. We’ll drop it in the Left Header Column. Then we are going to take the site title and drop it in the Center Column. Then we’re going to create an Aweber form and we are going to call it Aweber Header Form.

For the time being we’re just going to leave all these blank I’m just going to put it in. Shift+drag that into the Right Header Column. Save our template.

Add the Header Image

Then we are going to come over here first and I need to put that Header Image in. So I’m going to go to Pages and to my Sandbox Page. Let’s pretend that this one is a decent header image. We can just go ahead and use this.

We are going to use a Custom URL, we’ll use the medium size of it and then http://thesis2demo.com. We may as well center it and then our title would be Return to our home page. Insert that into our post, come back over and grab that html. Then let’s just update that for the time being. Then come over to Skin Content, open up the Header Image and then we’ll paste that here and we’ll Disable automatic p tags.

Assign the Template to a Page

Then the next thing to do is to assign this template to a page because we can’t see it working until we place it on a page. We’ll just go to this Test HTML page and set our 3 Column Header Page. View the page.

How the Header Behaves Responsively

Now we have our header image, we have the title and we have a signup form. If we look at this responsively, you can see that the Sign Up Form on the right drops down under the Site title, so the one is sitting on top of the other with the header image on the left.

If we make this even smaller, then it just bumps over there so all three of them stack. And that’s how it shrinks down, okay? So, that’s the responsive behavior that this creates.

Adding Styles

Then if we want to add styling to this we can add the ID of header columns to it which will then allow the styles that we have in the Design Options to apply to it. For example, let’s come here and we’ll just say header_columns and save the template.

Then go over to Skin design. You can see we’ve got this background color set as our background. Let’s give ourselves 20px of Top Padding as well, say okay to that. Save Design Options. Now the style has been applied to this area.

We could also instead apply any of those background settings. They can be applied to this simply by adding the class header_colums to it but we aren’t going to do that so I’ll just delete the Header Column style here.

0 Comments… add one
0 comments… add one

Leave a Comment