Create the Footer – Case Study, Styling a Gardening Blog Part 5

by Rick Anderson on April 26, 2012

In part 5 of this series on Styling a Gardening Blog, we add and style widgets for the Footer using our Footer Widgets Plugin.

Install Thesis Footer Widgets Plugin

Rick:  Now I want to go down to the bottom part. We’re going to come down here to the footer and play around with the footer widgets a little bit. And let’s see… we need to install the Footer Widgets Plugin.

So on our sample site, we have a tag cloud area, a recent posts, and a general links. Jared, does that make sense for the site?

Jared:  Yeah, that makes sense too. Yes.

Rick:  Okay so we’ll give the footer area 3 widgets and we will put the tag cloud, the recent posts, and the links widget in.

Jared:  Topics, would that be a place to put categories?

Rick:  Well, it could be categories instead of tags or it can be tags. Does Paula use tags?

Jared:  Yes, she does.

Rick:  Well, like I said, we’re going to put the categories in the sidebar so I don’t know if we need to put it in the bottom as well. I think probably if we put a tag cloud in there instead, that’s probably good enough. Be my guest.

Jared:  Just like you did is fine.

Rick:  Okay so then what we’re going to do here is install a new plugin. And in order to install that plugin, I actually have to go download it. So let’s go to Facebook, Fan Central, Plugins and Download. Okay, now that we’re doing that, we can come back over here to Plugins and Add New.

So we will come over and we’re going to upload a plugin. Choose a file and that is the BYOB Thesis Footer Widgets plugin, install it, activate the plugin. We’ll come down here to our Footer Widgets plugin. Okay, let’s try that again.

Configure the Footer Widgets

We’re going to have one row of footer widgets, I think. We’re not going to do anything with background color and image and the footer. We’re going to make 3 widget columns and for the time being, we’re going to say save to that.

And then in our widgets then, what we’ll do is we’ll come over to Appearance and Widgets and to each of our widget areas, we’re going to add recent posts, footer row 1, recent posts. Footer row 2, we will add our tag cloud. We’ll call it topics. And footer row 3, we’re going to add the links but we don’t have any links, I don’t think yet so… but we’ll add links and…oh, Steal My Reading List is what we’re going to do. We won’t use an image but we’ll use a link name, hit save.

Style the Footer Widgets

Let’s refresh this and see what it looks like. Now what we need to do is style this and the first thing we want to do is to add some top margin to this so it drops down and we need to change our text styles a bit here because we need to reduce the number of tags, I believe we have showing here.

Let’s do footer widgets here and this footer, we’re going to have top margin. I think we’re going to put 40 pixels in there. Let’s just see what happens after we did that. Oh no, that’s right. Not margin but padding, my mistake… 40 padding. I guess we need to go a little further down. It looks like it’s another 30 or so. Okay, there they are. The titles are down here now.

Using ColorZilla and Measure It

So next maybe what we ought to do here is give a background color to that. What is that color? Where on earth is my ColorZilla? Okay, I guess I’m missing ColorZilla here so let’s add the ColorZilla add-on. We’re going to allow it. We’re going to install it. When we restart Firefox, we can pull that color.

Somebody asked me, what was the measuring tool that I used and I used a tool called Measure It which is a Firefox add-on. I believe Measure It can also be added to Chrome but it was something that I added to Firefox here.

Now that we’ve installed this, we need to make the eye dropper show up someplace. So we’re going to come over here to the add-on or the Firefox Options, Toolbar Layout and then as irritating as this is,  I have to come back over here and drag that up so ColorZilla shows up there. Okay so now I’ve got ColorZilla there.

Add a Background Color

All we have to do is pull this color which is that color there. Actually, we’re going to do this under Full Width Backgrounds. Last night I made our footer area .page transparent. We’re not going to make it transparent now. What we’re going to do instead is we’re going to change it with that background color and hit save and then refresh.

Oh, that’s why. I can’t do it that way, can I? No, it cannot so we’ll go back to transparent. Okay, refresh this. We’ll work on getting the right depth on this image here pretty soon.

Adjust Widget Widths

Next we need to finish messing around with that footer. And we need to give these titles a specific style. I think I want to make my links widget a little bit smaller and I want this to be larger.

So under column, we’re going to give some automatic widths here and I’m going to say 250 and the widget column 3 is going to be 250. And then widget column 2, that’s 500 and this is going to be about 450, I think. I think that should work pretty well. Okay, not quite so let’s make that 425. Let’s take it down to 400 first.

Okay so that worked and then we should give ourselves a little bit of padding or margin. So 10 pixels, 10 pixels for a typical left and right padding. Did I not save that or did I do it in the wrong spot? I did it in the wrong spot. Okay, it doesn’t seem to have had the desired results.

Add a Heading Style

Let’s do a couple of things here with our style for just a second. I’m going to customize the heading style, let’s see… we want to remove the Thesis attribution. We want to customize the typical font style. And so the heading style, we’ll keep as Georgia. We’ll make it 18 pixels. We’ll leave it as all caps but we’ll take it down to normal spacing. We’ll make it bold and then our text style, we’re also going to go down to Georgia.

Review the Changes to the Footer Widget Style

For the time being, we’re going to leave that alone. Let’s see, let’s just see what that looks like, just like that. Okay and let’s take a look at it briefly over here. Okay so widget column, widget column, and widget column.

Let’s see what happens if I made that 420. 410? 400? I guess 400 was right. Okay, I want to change the size of the tags that show up here. I want to take that down to 4 things and I still want to end up with some padding.

Adjust Margin Settings

We’re just going to manually adjust that. Column 1 left margin is going to be 0 pixels. The right margin, we’re going to make it 10. Widget column 2, 0 pixels. Oh, left margin will be 10. Right margin will be 10. Widget column 3… left margin will be 10. Right margin will be 0. We may have to adjust the size of everything to make that work properly.

So we’re going to take 40 out of the width of this, see if that does it so 360. Okay that does do it. Now we’ve just got to get a better tag plugin here so we can actually adjust what’s going on here because it takes up too much space. Either that or we just swap out this image so that it goes all the way down to the bottom. Yeah okay.

The Difference Between Margin and Padding

Ken asks, “What’s the difference between padding and margin?” You know, I’ve got a whole video on the difference between padding and margin. But the short answer is that padding moves content in from its boundary and margin moves a boundary away from its adjacent object.

Let’s refresh this for a second. Okay you can see that the two little yellow lines, those are margin and what would happen… oh isn’t that interesting? I obviously missed that. Not that it really matters that much but those margins move each of these blocks away from each other whereas if I’d used padding instead, these things will still be adjacent to each other but it would have moved the content away from its boundary.
If you just search the site for the difference between padding and margin, you’ll see that I’ve got a nice little visual diagram and all the rest of that stuff on padding and margin.

Use Better Tag Cloud Plugin

Okay so let’s go back over and look at our widgets for a second. In terms of our recent posts, I’m going to take that down to 4. I think we need a different cloud plugin, Better Tag Cloud. So what we’re going to do is go over here to plugins, Better Tag Cloud, I believe, is the one I like.Llet’s just take a look at this, make sure this is the right one. Yeah, I think this one will work.

We’ll search for plugin, install it and activate it. Let’s go back over to widgets and instead of this one, tag cloud, we’re going to look at Better Tag Cloud. And it’s going to be topics, smallest will be… let’s see, 18.

Let’s use pixels and then we want to have the maximum number of tags to show, there it is. Let’s say 50 for a moment, see how that looks. We might need to reuse that… yeah, let’s try it again. Okay, we can reduce these. 8 is too small, obviously. I think 10 will work, 18 will work and 40. And hit save and refresh and I think we just need to do that one more time. Let’s take it down to 35. Okay, there we go.

So now we have a topics list that fits in the space that’s available to us. We have the potential for a reading list here.

{ 0 comments… add one now }

Leave a Comment

Previous post:

Next post: