Welcome back to the tenth part of Lesson 11 of the Build Your Own E-Commerce Website tutorial series. In this lesson we are going to add the CSS styling to make the widgets in that footer look the way we want it to look.
Let’s take a look at the final product just to make sure we know what it is we’re shooting for. I have that open in Firefox. This is the final product. When we’re completed our site is going to look like this and this is what the footers look like. We have these four widget areas and we need to style them so that they look like this plus style this very bottom footer section.
Let’s open up the website in Firefox and here’s the site as it exists right now. First we’ll begin by making some of the big changes. So let’s inspect the elements in Firebug, we’ll edit the CSS, open up Web Developer and go to our custom.css file. I’m going to stretch this over here a bit.
Review the Structure in Firebug
Let’s begin by reminding ourselves of what the structure is of this part of the site. Inspect the element. We are going to start styling this by styling the CSS of the fat-footer-sidebars. This is the HTML structure that we created earlier. We’re going to copy that and set as many of the settings as we possibly can using this div id and then we’ll work our way down to smaller definitions as we go along.
Align the Text
Here we are in our custom.css file. Go down here to Footer where we already have a bunch of stuff and the first thing we’re going to do is make the text left aligned. Come down here to byob-fat-footer-sidebars we can start off by just saying text-align, left — colon, left, semi-colon and that gets it organized off to the side like that.
Link Color and Behavior
Next we’re going to change up the color on this with CSS. We want to change the a so that it’s a dark color when selected or when hovered over– well we want it to be dark all the time and we’re going to get rid of this underline. Start off then with this fat-footer-sidebars again, copy that, paste it here, give us a closing bracket, come over here and say a which addresses a link and we’ll say color, colon, pound sign, 111111 for black and now you can see all the links are black.
Then we want to get rid of this underline here. Often this is a text decoration but if you inspect the element here you can see that this is actually a border bottom. It says footer a, border-bottom, it’s 1 pixel solid and CCC…, I want to get rid of that border-bottom so again under a here we will say border, colon, none, semi-colon and that got rid of that. Now we have our a properly styled.
Set Background Color
In order to set the background color for these we’ll need to set each one individually with CSS– if we set the background color for div id, fat-footer-sidebars it would set the entire background color. We don’t want a background color there but we want background colors here for each of these.
Start off by byob-footer-sidebar 1 and we’ll copy that. We have sidebar-1 here so if we come down here and give it a background color – background-color, colon, pound sign, eef9dc, semi-colon.
Set Widget Area Height
Now we want this to go down to the bottom so we want to give it a height of 100%. You can see that what happens here is that it drops down but we’re not going to change this 100%. Later on in the lesson we’re going to adjust this so that it displays properly. It’s not going to be an adjustment of this, we’re going to adjust the height and the padding instead. But you’ll see what I’m talking about when we get there.
Now we’ll copy this to each of their successive choices. Copy and then that’s sidebar-1 so we’ll come down here and place sidebar-2, and sidebar-3, and sidebar-4. Now all four of these things have that light color and they’re all the same height.
We need to give them some padding with CSS to move this away from the edge. Again if we inspect the element you can see that this element here is class, ul, sidebar_list and it is inside of div-footer-sidebar-1 but it’s also inside of byob-fat-footer-sidebars. So we’re going to use this class, or this id and this class to apply what we do to all four of these.
That means we’re going to take fat-footer-sidebars, so scroll back up here and go to that and copy all of this and paste it. Instead of a I’m going to say ul. sidebar_list and then instead of color I’m going to say padding, colon, 10 pixels and we’ll get rid of this border here – border:none here.
Everything has pushed in 10 pixels on all of them. This is a way in which we can be very general about this by doing all the ul sidebars lists inside of this.
The next all-of-them thing to effect with CSS is going to be this header here. Again, we’ll paste that fat-footer-sidebars a but instead of that we’re going to call it h3, instead of this color we’ll use a red, ee0000– actually that’s supposed to be the background color. It is that color and the color itself is actually white colon, ffffff, and then we want to make it a little bit bigger so say font-size, colon, 1.5 ems, get rid of this with border:none and then we want a little bit of padding so say padding, colon, 3px, semi-colon. That gives us three pixels all the way around. I’d actually like a little bit more on the left so if you only give one number it’s everything. If we come over and give another number, say 5px then what that does is three on the top and bottom and five on the left and right.
Then we need to give it some margins because what I want to do is force this over to the right and down and I want to give myself some space here. Say margin, colon, 10px, 10px, 10px, 10px, semi-colon. Although what we’re going to make it a minus ten on this right hand side one so that it comes all the way to the edge. The way this order works is that this is top, right, bottom and left. Since it’s the right one we’ll put a minus right there and now that red line pops all the way over to the side.
We have these elements that are kind of sticking out too far. So now that we’ve done that we’re going to shove them over. Don’t worry about this we’re going to end up adding some custom styling for this as well. We’ll get there. Let’s take these and push them over so they don’t project out beyond the edge of this. To do that we want to address ourselves to this whole item here with CSS. Inspect this element – we want to get up here right now selecting one element of it but we want to come all the way up to this element right here. It is li of this ul, sidebar_list we are going to adjust the ul, sidebar_list, li. Take this and copy it, ul, sidebar_list, li and instead of having a padding of 10 pixels we’re going to say a margin left, margin-left, colon, 10 pixels. It’s not actually the li because it shoved that over as well, it must be the ul inside of it. It was the byob-fat-footer-sidebar ul.sidebar_list li and then ul. So this is what I wanted to shove over, not this – this, ul. We could have done ul class, xo, pages if we wanted to but I wanted to push all three of these over. By using the more generic expression, that is an unordered list that is a sub-list of this list item, that pushes these things over.
Fix Links Widget Display
Next we’ll start fixing our individual pieces with CSS. Something I fixed when practicing this that I forgot to unfix is over here. Under Thesis eStore 11 on our Dashboard under Footer Sidebar 3 we put this link in that says Great Thesis Resources, right? And we didn’t put anything in the link_after category and so it just had a span tag and a span tag, so I’m going to save it back to that condition. I am going to copy all this stuff against the possibility that I lose it and then I’ll refresh this.
You can see what happens is that the text just goes right up against the link, right? What I want to do is essentially a carriage return. I want a line break right here and the way we do that is what I just deleted. Come over here to link_after and put this HTML thing in called a break. So it’s an opening carat, and then BR, space, slash, closing carat; that is a line break symbol. If we save that and come back over to our site and refresh it now this line with the text here drops away from the link itself and that was what I wanted to accomplish.
That wraps up this tenth lesson, Add CSS Styling to Footer Widgets.