Member Login

You are not currently logged in.






» Register
» Lost your Password?

Lesson 11 – Part 10 – Add CSS Styling to Footer Widgets

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 11 – Part 10 – Add CSS Styling to Footer Widgets

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

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.

Add Padding

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.

Heading Style

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.

Adjust Margins

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.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!

{ 9 comments… read them below or add one }

chung tang December 3, 2010 at 7:32 pm

Hi Rick,

For Some reason, my footer shows up just like your demonstrated in Firefox and Chrome but I cannot make it show up properly in IE…

is there some css compatible code that i can write?

Thanks.

Chung

Reply

Bryan January 3, 2011 at 9:22 am

Rick, I couldn’t figure out why my Copyright mark was just showing up as a question mark. I finally made it work by writing it as the following in quotes “©” to make that symbol appear. Was there an easier way I missed?

Thanks,
Bryan

Reply

Bryan January 3, 2011 at 10:01 am

Rick, my last comment didn’t make sense when the word processor automatically changed my code into the actual copyright symbol. What I was saying is that I wrote it as the “and” symbol followed by the letter “c” followed by a semi-colon.

Bryan

Reply

Rick Anderson January 3, 2011 at 10:47 am

Brian, that is the HTML code for the copy right symbol. That is the only way to represent it in HTML.

Reply

Melissa O'Neil September 12, 2011 at 2:09 pm

Hi Rick,
As I follow along and do this, nothing is changing on my site. The boxes do not move over etc. I know this is elementary, but I can’t figure out what I am doing wrong.

Reply

Melissa O'Neil September 12, 2011 at 2:45 pm

Where is the editing taking place? Is it in custom css?

Reply

Rick Anderson September 12, 2011 at 3:32 pm

Melissa – the code shown in this specific video goes inside of the text widget that you’ve put in your sidebar. I looked at your site and it appears that you have the PHP part of the footer working just fine. Unfortunately the CSS part is missing from your custom.css file. What is happening right now is that your footer sidebars are stacking on top of each other. You need to add the CSS that makes them sit side by side. The CSS styling is in Lesson 11 Part 3 and that code goes in the custom.css file.

Reply

Rick Anderson September 12, 2011 at 3:34 pm

You might consider trying my BYOB Thesis Footer Widgets plugin. It will allow you to create up to 3 rows of widget areas each containing up to 5 widget columns. You can get this plugin on my Facebook Fan Page – http://www.facebook.com/byobwebsite/

Reply

Bob Bessette April 13, 2012 at 3:39 pm

Hi,
I cannot get this widget to stay in my sidebar. It allows me to place it there in Appearance>Widgets but when I check the site it is not showing up. When I go back to Appearance>Widgets it is back in the Available Widgets and not in the sidebar.
Any help would be appreciated.

Best,
Bob

Reply

Leave a Comment