Build Your Own Business Website header image

A Beginner’s Guide to the Thesis 2.0 Skin Editor – Part 11 – Example #2, Add Widget Areas to the Footer

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.

Video Transcript

Now we’re going to do something that’s more complicated. And the reason I’m going to… I’ve demonstrated this a bunch of times but I’m going to demonstrate it again because it’s important for people to understand the columns package. And what we’re going to do here is we are going to create footer widgets in this column.

So I already created the one box called footer columns, right? I’m going to open this up and I’m going to create a class. And for the time being, I’m going to call it footer columns as well, footer columns. So that’s the class I’m going to call it and then inside of this wrapping container, I need to actually place container columns. So that means I need to add 4 columns. So I’m going to add a container and we’re going to call it footer 1. Add the box. Let’s see, create a new container called footer 2, add the box. Create a new container called footer 3, add the box. And then create another container called footer 4, add the box. Well, it didn’t add. Try that again, footer 4, add the box. There you go.

Okay so now that I have those containers, I’m going to drag them into place. So shift drag footer 4, shift drag footer 3, shift drag footer 2 and shift drag footer 1. See, I did, in fact 2 footer 4s. I just wasn’t patient enough. So this footer 4, I’m going to delete. I’m going to shift drag it down and drop it there.

And in this footer 4, I inadvertently dragged footer 3. So I’m going to shift drag footer 3 out and drop it into footer columns and then drag footer 3 down the place. And I got footer 1, 2, 3, and 4.

Okay now I call these footer columns. I’m going to call these footer 1, footer 2, footer 3, and footer 4. Okay so now I’ve given them all class names and inside of those, I’m going to add widget boxes. So we come over here and add a widget box and I’m going to call it footer widget 1, add the box. Add the box. My server must be thinking here. I haven’t ever had that kind of a delay before. 3… add the box. Oh, look at that. Okay, let’s build footers 1 and 2 then. I don’t know how that happened. Probably I wouldn’t be noticed doing something funny.

Okay so we’ve created these 4 widgets or these 4… they’re essentially widget areas, sidebars. Now, I’m going to give them a class. And you  may remember that I created that class called footer widget that didn’t apply to anything, right? I’m going to apply it here. So I’m just going to use that same class everywhere or in each one of these widgets so that they will all use that same style. And then I’m going to shift drag footer widgets 2 into 2, footer widgets 3 into 3, footer widgets 4 into footer 4 and footer widgets 1 into footer 1. Okay and now we have widget areas inside of containers, inside of columns.

So now what we have to do is create a columns package that will style that. Because as soon as we hit save this, come over and look at what we’ve got, we just have widgets all stacked up. 1, 2, 3, and 4. They’re not sitting side by side. So that’s what the column configuration is for.

We come over to the css and we’re going to add a new package. It’s going to be a columns package. We’re going to add that package and we’ll call it footer columns. And we’ll give it a reference of footer columns and we’re going to give it a selector of footer columns. And then we’re going to come over to our options and we’re going to say we want 4 columns. And then column 1 gets that selector that we gave it, the first column which was footer 1, remember? Footer 1 and we’re going to make this footer 1 with… let’s just make it 25%. And we’ll give it a left alignment and we won’t worry about padding here. We’re just kind of get through this quickly. And then footer 2… remember, it’s a selector so it’s not… it’s got to actually have the period in front of it. And I probably forgot that in the package too. No, I didn’t. Footer columns is there, that’s fine. But over here, it’s got to be footer 1. Footer 2, I’ll make that one 25%. Left… footer 3, 25% left and then footer 4. I’ll make this one right aligned.

Now if we hit save, notice nothing has changed yet because we haven’t added it to our reference list here yet. And the reference was &footercolumns, right? So we’ve got… now if we come over and take a look at it, now we have 1, 2, 3, 4 columns in a row. This box is called footer widget 1 but there are no widgets in it yet. This box is called footer 2 so on and so forth.

You know what? I think I must have not made these left aligned because it looked like they’re kind of center-aligned. Let’s just go look at that footer columns again for just a second. Oh, this line. This looks funny. Oh, it’s because the way I’ve got the widget done, okay.

And then this is our footer widgets, right? Here’s our footer widgets. The CSS selector I named it was footer widget. And text align is left that’s why it’s doing that. And then if we just go ahead and save and compile the CSS, now we have our 4 columns. It’s not exactly what I expected it to look like. Let’s look at the footer. I’m thinking that maybe there’s something funny in the footer that is changing that. No, okay.

Anyway so the point of this exercise… you know, I better give it some padding or it’s just not going to look right. Come back over to footer widgets and under our widgets, I’m going to give it padding. But actually, I think what I’m going to do is I’m going to use the same kind of padding that… yeah, single. So I’m going to use the same kind of padding as they’re using here and it’s going to be $half. Okay so I’m going to use this variable and I’m going to show you how to use a variable then. Come back over to footer columns. Over here, column 1 padding and then in order for it to be actually a variable, we have to put the dollar sign in there. Okay so that makes it a variable and I’m just going to paste that in all those places. It essentially puts 11 pixels of padding around the whole thing because the variable is defined as 11 pixels. And now we’ve got this like that.

So that’s example number 2. Now note that this exists here on this page. But if I go over to the home page, it does not exist. If we go to the articles page, it does not exist. If we go to the single post page, this does not exist and that’s because this change that we just made is a change to a specific template. We made this change to the page template. But if we go over to that front page template for example, those boxes are all sitting over here. They haven’t been moved into our footer yet so they’re not reflected in this Template. And that’s the way these kinds of things work. That’s why the front page doesn’t have the footer and this one does. That’s how you can have different templates with different styles.

Now it’s easy enough to add the stuff here because all we have to do is get our footer columns. In fact, I’m just going to drag it here first. So shift drag footer columns there, there, there and there. And then drag that over to the footer and then open up footer columns and shift drag widgets to footer widget… and 4 and 1 and 2 and then hit save. And you know, then it actually does show up down here. But it still doesn’t show up on the blog page because we still haven’t done that yet. That’s the way editing template works.

0 Comments… add one
0 comments… add one