This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.
Welcome back to Part 3 of this lesson on creating the fat footer with multiple widget areas. In this part of the lesson we are going to add styling to the widget areas with the CSS that makes these stacked widget areas go side by side in the footer area.
You can see that we’ve already accomplished these sidebar elements. Now what we need to do is change the way they look. Since we’re here in Firefox let’s go ahead and inspect the element and turn on web developer. Open up custom.css.
Review the Structure in Firebug
We’re going to be working on this in the footer. In a previous lesson we gave the padding of the footer of 360 pixels and that made the Thesis attributions stuff drop down to the bottom. Well now we’re going to get rid of that padding reference. For the moment we’ll just delete it and that brings all this up to the top here.
Next we’ll make these things sit side by side. Now you can see that under div we have created the byob-fat-footer-sidebars div and then inside of that we have Footer Sidebar 1, 2, 3 and 4. We are going to add some styling to this one and we’re going to add similar kinds of styling to each of the sidebars.
Style the Wrapper
We’ll start with the wrapping div. Grab the name there for a second byob-fat-footer-sidebars. We’ll come under Footer and say pound sign which is the id symbol and paste that – fat-footer-sidebars, opening and closing curly brackets, indent. The first thing we are going to do is to make it float left – float: left. Then we’re going to give a width – width: 100%. Let’s see what this looks like; you can see now that the width of this thing is 100 percent wide and while you can’t tell that right now it does float to the left.
Style the Individual Sidebars
Now we’ll add some styling to the first widget area. Grab the name of that one and put a pound sign in, paste that name, give ourselves some brackets, an indentation and we’re going to say the same thing. We’re going to float: left – colon, left, semi-colon, except they can’t all be 100% wide so we’re going to say that it is 200 pixels wide. We’ll adjust as needed. So we’ve only done Sidebar 1 you can see it has jumped all the way over there and if we just leave it at this then what’s going to happen is these will all stack side by side. Let’s give each one a bit of left margin, so we’ll say margin, hyphen, left, colon 20 pixels, semi-colon.
Now that doesn’t have any effect on the rest of these, it just has an effect on the one. Next we’re going to copy this and paste it three times and we’ve got 1, we’ll change the name to 2, 3 and 4. You can see that they are all four sitting there side by side each with 20 pixels of margin on the left hand side. You can also see though that this one ends before the edge of the actual footer area. If you recall, the way I want this thing to look is it will have three narrow ones and one wide one for our name.
At the moment I am making these 200 pixels wide and then we’ll make this one whatever is left over. We can experiment here I’m going to say that’s about 60 pixels. Then what we’ll do is make Sidebar 4 float to the right and now you can see that when Sidebar 4 floats to the right it goes all the way to the edge. Now we’re going to try and take up some of this space.
So now we’ll go to 260 pixels and see if that works. That does work but it looks like maybe there’s enough room for a little bit more space so let’s try 265 pixels. Okay, try 270 pixels. If we did 280 pixels you will see that it drops down because that’s too much – that’s too wide, right? So 270 pixels, let’s just leave it there for the moment and that should produce the desired results here.
We’re going to go ahead and copy all of this footer styling now – might as well go all the way up to Footer, copy all the footer stuff, come over to our text editor and we need to open up the custom.css file. You can see this is for Thesis eStore 10, we’ll switch that to 11 and then scroll down here to Footer, grab everything that exists and replace it with the new. We’ll save that, open up Filezilla, upload that to the site.
Let’s refresh it. In fact let’s just close this down for a moment and minimize and there it is in its refreshed condition with our one, two, three, four sidebars. Now isn’t that funny, it says Sidebar 41 – obviously I have a little mix up in the custom_functions.php file. Scroll down and take a look at that dynamic and you can see there’s its name Footer Sidebar 41. Delete that and go to 4, save that, upload it, refresh it and now it says Footer Sidebar 4.
If we come back over here and refresh this for a moment and look inside of our widgets panel we can see that these are here. Let’s take Sidebar 1 and let’s just say you moved a recent post into that. Then we come back over here and refresh this, you can see that the default behavior is gone and now the contents of that widget have replaced it.
That wraps up Part 3 of this lesson, Add Styling to the Widget Areas.