Build Your Own Business Website header image

Example #4 – Add the Widgetized 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.

The next example that we are going to show is how to create a widgetized footer in Thesis 2.3. And we will be continuing to use the same methodology as we did before. We’ll create a column wrapper and then we will create the four columns with widget areas.

Then we’ll fix whatever CSS isn’t working properly. And we know some of it won’t be. And remember we’ve already got 1/4 defined here as 25% wide and then it’s float left, box sizing, border box and padding is single. So we’ve already got sort of the underlying definition of the 1/4.

Let’s come over here to the Skin Editor and we’ll start with the Front Page template. We’re going to start by creating our column wrappers. Come down to HTML container and we’ll call this “footer columns”. I’m going to give it the class of footer columns also.

Then we can start adding widget areas. Come down here and hit widgets and add the box. We’ll call this “footer widgets 1”. Now we could add a class. A class name that you add here would be added to each individual widget. You can decide what HTML tag you want to use here.

You can add a wrapping element. So this is something that’s different. The wrapping element would create a div that entirely wraps all of the widgets that are in this widget area and that’s what we are going to do for our column.

So we’re going to add a wrapping element as a div. Then as an HTML class we’re going to use that 1/4. So this is going to give us the div class 1/4 that the widgets will be sitting inside of. And now we just have to do that three more times.

Go down here to widgets, Add New. We’ll call that “footer widgets 2”. Show the wrapping element. And the HTML class is is one quarter. And then the third one, “footer widgets 3”. And our last one.

We’ve now created all four of our widgets areas and I can drop them in here. So we’ll drag column 4 in and shift drag column 3 in and shift drag column 2 and shift drag column 1. Then shift drag footer columns into the container and then drag it down to above the footer. That’s where we want it, right there above the footer.

Hit save template. Then let’s go to the site and take a look. Flush the cache. We’ve got widget area 1, 2, 3 and 4 here. Let’s just drop widgets in there.

Go to Widgets. You see now our widget areas are showing up here. I’m just going to drag recent posts widgets into each one.

Now we can reload this page. There we go, now we’ve got our widget areas and those widget areas are 1/4. And if we wanted it to adopt the regular sidebar styling, I’ll bet we could come over here to footer columns and add the sidebar class. Let’s try it out. Yes, that’s it.

So we’ll come back down here to our footer columns and add one more class, sidebar. That way it will borrow all those styles.

Now we want to check this in the responsinator. Let’s open up an incognito window and we want to look at Thesis 2.3 here. All that stuff is working as we expect and so are the recent posts. If we look at it here, these are going to 25% but what we really want them to do is go to 50% in this case.

Let’s look down here. Because they are floating they are just taking up the space they need regardless of their width because the width is not specified here.

So what we are going to do then is come back over to our CSS here and down to Custom CSS. And in this case, we’re going to steal this columns 3 1/3, width 50%. Actually we don’t have to steal it, we’re going to say dot footer columns, dot one quarter. So it will get a width of 50%.

Then we are going to need to do this as well, clear both. It’s going to be odd so we’ll just do this, one quarter and nth of type odd comma. That will clear the floats on the odd columns.

And then if we come down here to footer columns 1/4, we just apply that style to this and I think that’s all we’re going to need to do there.

Let’s look at it on the site again. That looks fine but we should flush the cache. Each of these widget areas is splitting into half and we’re showing two of them stacked on top of each other. Then we get down to this narrow dimension and now all of them are stacked.

So it’s behaving the way we expect but let’s just look on the responsinator to be sure. Okay, here we are looking good. Come down here I think we need to fix that menu again. Class 2/3 and we want it to be 100% and that to be 100%. So let’s fix that.

We’re looking at our header. We want to come over here and this is header columns. Dot header columns, dot one third, dot header columns, dot two thirds, width colon 100%. And then here we’ll make our header columns one third, text align center.

Let’s take a look at the site and see how it looks. Flush the cache. So header columns, one third should be there…maybe it didn’t save. Let’s check. Class name is header underscore columns. Save the Custom CSS. Go back to the site, flush the cache.

Looks like we have the wrong selector. It’s actually div id header columns, not class but id. So let’s fix that. Okay, that’s what it’s supposed to look like. Let’s see if there are any other issues we need to address. We have some extra white space here. It’s coming from 2/3. Let’s try padding zero and see what happens. Yes, that fixed it. Let’s say header columns two thirds, padding zero.

We can now flush the cache. It looks pretty good. Let’s take a look in the responsinator. That’s fine.

0 Comments… add one
0 comments… add one

Leave a Comment