Build Your Own Business Website header image

Thesis 2.0 Launch Party Part 5 – Create a 4 Column “Fat Footer”

Difficulty Level -

Listed Under Lesson Subjects -

Applies to -

The next thing we’re going to do is create a 4 Column “Fat Footer” and it is exactly the same process. Come down here, I want to remove the wp-admin link so I’m going to shift, click on it, drag it up there and drop it then I’m going to create a new box. I’m going to add a box, it’s going to be a container, the name of the box is Footer Widgets, add the box, we’re going to give it the class of columns-44. We’re dividing the page by 4 and we’re going to have 4 columns.

Create Footer Widgets

I’m not going to do a hook at this point. I could also pick different HTML tag but really, for the columns, the div is the right one so we’re just going to do that. I’m going to drag my Footer Widgets to place and now, I need to create those columns to put inside of here. I’m going to create Footer Column 1, add the box, now the HTML class I want to use here is c1. That’s what Thesis is looking for, c1 stands for Column 1.

I’m just going to do that again, another container, Footer Column 2, add box. We’ll say Footer Column 3 then one last container, Footer Column 4. CSS class, this is c4, this one is c3, this one is c2. I’m going to shift drag 4 into Footer Widgets, shift drag 3 into Footer Widgets, shift drag 2 and shift drag 1.

Create Widget Areas

Now, it’s time to create widget areas so I’m going to come back over here to Add Boxes and I’m going to add a widgets box and the widget box name is going to be Footer 1. Footer 1 is my first widget box, we’re going to create another one, Footer 2, add another one, Footer 3 and add another one, Footer 4.

Now, I can set my own HTML class for each of these if I choose and I can choose what the title is going to be, whether it’s 3 or 4 or whatever. For the moment, I’m just going to say, widget as my HTML class. We already have a package for that so I’m just going to use that one. Widget, I’m going to paste that again and paste that again and paste that again.

Thank you, Philip. That’s right, I did put a dot in there. The reason I pointed out the first time was because I made this mistake the first time I was playing with it. I couldn’t figure out why things didn’t work right. No dot in the place where there’s a class, thank you Philip. Then we’ll just shift drag Footer 1 and drop it into Column 1,, Footer 2 drops into Column 2, Footer 3 drops into Column 3, Footer 4 drops into Column 4.

If we come up here and save the template, come over and go to our widgets panel, you’re going to see those are now created. Footers 1 through 4 have been created and they’re there and ready for you to drag stuff into.

Style the Widget Areas

Now we’ve created our footer here but we haven’t created our style for the 4 widget areas yet so that’s the next thing we need to do. Let’s just grab our code, we call that HTML class 44 so I’m going to copy that. Come over to our CSS, create a new package, it’s going to be a columns package, the CSS selector is that, the reference, we’ll make that an underscore and the name is 4 Columns. In this case, it’s going to be 4 Columns, I am going to make the width 25%. I could use ems, I could use pixels, I could choose inches even oddly enough and I’m going to make it left floating.

In terms of padding, I’m not going to have any right padding but I’m going to do a left padding of 11px. Column 2, 25%, alignment is going to be left, I’m going to do a right padding of 11 and left padding of 11. Column 3 is going to be 25%, it’s going to float left, I’m going to do 11 and 11. Column 4, 25%, I’ll float that one right, left is 11 and right is none and hit save.

Just like we did to columns_32 here, we come over and do columns_44, save and compile, come back over and look at our site and we now have four widget areas down in our footer which sit above this. What about text alignment, left, right, justified and centered. Those things are going to be handled by a widget style so right now, we have widgets here and the selector is .widget and in options, you can set things like all these in this.

Widgets With Text Alignment

There are also other things you can do as well and it does have text alignment. You can create another widgets style like widget right then over in the HTML side, go down to widget 4 and instead of saying, “widget”, you could say, “widget r” for widget right or whatever then you could set the right one differently than the other 3. We are going to save that template, come back over and look at it, let’s go to our homepage.

Notice how it’s not in this? That’s because we’ve been working in the page template. If we want this footer to exist in the homepage template as well, we just come over here to home and take our footer, we shift drag our Thesis attribution out of this and drop it here then shift drag footer widgets and drop it into footer, shift drag Column 4, Column 3, Column 2 and Column 1. Open it up, shift drag Footer 1, Footer 2, Footer 3 and Footer 4, hit save, come back over and refresh our homepage and now, those are there.

Single Placeholder Template

Want to see what it looks like in a single page? Come over to the single page, it’s not there anymore. What we’re going to do now is change the single template however, we aren’t going to make all those changes that we just did here. Actually, single is kind of complicated because single has comments and post nav and that sort of thing. I think what I want to do is create a custom template and I’m just going to call it Single Placeholder, create the template.

Single Placeholder is going to take everything from the single template, I’m going to copy that template. Now my Single Placeholder template is identical to the current single template so now I’m going to come over to my single template, I’m going to copy the page template to it and save it.

I’m going to replace an existing one like that and now the single, it doesn’t have comments and post navigation and things like that, that you want in a single so I’d have to add those back into it but it now has the 2 columns. Now, the only page that shows up as 3 Columns is our post page.

4 Comments… add one
4 comments… add one
  • Worajedt October 28, 2012, 9:11 pm

    Error 200 Stream Not Found.

    Please fix this. -_-! I’m loving the series.

    • Rick Anderson October 29, 2012, 3:21 am

      Just try it again, or try it with a different browser. This is usually an error in the browser.

  • Liz Stabbert July 1, 2013, 4:12 pm

    I’ve followed this tutorial to the letter (ok, not quite, I gave the columns etc names that made more sense for me), but I still can’t get the columns to align properly. The widgets show up, but are stacked on top of each other. How do I fix this?

    • Rick Anderson July 2, 2013, 10:16 am

      Liz, I can’t really tell you what’s wrong without looking at the site. However, it could be that the columns package isn’t referenced in Skin CSS or it could be that you have an error in the naming.

Leave a Comment

Cancel reply