Build Your Own Business Website header image

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 11 – Add CSS Styling to Text Widget

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.

Welcome back to the eleventh and final part of Lesson 11 of the Build Your Own E-Commerce Website tutorial series. In this part of the lesson we are going to take a look at styling of the text widget with CSS in that footer area.

Let’s take a look at the site to remind ourselves what it is we’re trying for. We want to go to, scroll down to the bottom and this is what we want that text box to look like. We want this red header, this stuff all to line up and these to be nice and close. Where we left off in the last part of the lesson this absorbed the same kind of styles as these other sections. So let’s go ahead and get started with it.

Review the Structure in Firebug

Open Firebug and Web Developer. Go to custom.css and down to Footer. Looking at this section, if we inspect that element we are looking at byob-footer-sidebar-4 and this element right here is the h3 element. All right, byob, 4, sidebar-4, h3 and currently it is being defined by byob-fat-footer-sidebars-h3 but we are going to change that definition to be more specific to this right here.

Text Widget CSS Styling

Let’s copy all of byob-footer-sidebar-4. Paste it. Let’s get rid of most of this, then h3 and in the case of float:right we’re going to say background-color, hyphen, color and it’s going to be transparent and then the text color is not going to be white. Say color, it’s going to be that red color which is 9b0000, semi-colon.

Then this is looking a little bit too close here and so that suggests to me that it’s getting a line height that’s not appropriate for its size. If we shift this over for a second and then scroll down here you see the line height is coming from that. We want to give this header a line height of normal rather than specifying it. Over here we’ll say line-height, colon, normal, semi-colon. Okay that gives us a better space there but now you can see that our red is pushed over further from the edge of the text and that must be coming from the original padding.

We gave this heading padding with CSS styling, right? Scroll down here for a second and look at the other one – we’ve got this padding of 3 and 5 pixels so we should give this a padding of none or 0. Come over here, sidebar, h3, padding, colon, 0px and that brings that nicely in line in the Text Widget.

Line Spacing

Now the only problem in the Text Widget with this is that we have too much space in between these list items so we need to figure out where that space is coming from. Come over here and inspect the element. The li item has a bottom-margin of .692 – see that. In fact if we turn it off you can see it stacks up the way we want it to. Let’s make sure we give this a bottom margin of 0 and in this case we want to address ourselves to this li element of the ul element of this byob-footer-sidebar-4. We’ll copy this footer-sidebar-4 and paste it here, give ourselves a closing brace, go up, in, margin, colon, 0px, semi-colon and then that needs to be applied to – not to everything but to the ul li element. Now we have  byob-footer-sidebar-4, ul, li and these things have gotten nice and close to each other after styling with CSS.

I’d also like to have a little bit more space between the top heading and the bottom of the thing that’s above it so that it’s really clear we’re making this title reflect the text below. We can do that by giving ourselves a little bottom margin for this element right here which is the ul element. But we don’t want to address it to every ul element. We are going to have byob-footer-sidebar 4, ul, li and then ul – that would be it ul, li,  ul. Come back over here and take this, copy, paste, footer-sidebar-4 ul li ul and we’ll say margin-bottom –15 pixels. That gave us a little bit of extra space there so that this space is smaller than that space. It helps to just give it a bit more definition.

Adjust Overall Height of the Text Widget

Now we have to fix this overall height of the Text Widget with CSS styling because this is projecting down into the green area and it’s covering up our line. First, we’re going to make the height of this say 395. That’s the height of those sidebars. That allows this thing to jump up here a bit above the line which is probably where I want it.

Bottom Footer Text and Link Colors

I want to get rid of all of the padding for .page here, so instead of saying padding-top we’re going to go with padding all the way around as 0 for .page and then we need to give this line some top margin. Inspect Element – that’s the byob-footer that we want to give some top margin. So that was down here byob-footer, let’s give it a margin-top of say 15 pixels. Yeah, that looks good.

While we’re at it let’s give it a text color of white, colon, number ffffff, semi-colon and then we may as well give this a different color that can be read more easily. Take byob-footer and paste that down here, paste that there, give ourselves an a for the link and then say color, colon, pound sign, efefef, semi-colon. That makes it a grayer color so it’s not quite white but it’s also readable there.

Correct the Overflow of the Text Widget

The very last thing we have to address ourselves to in the Text Widget now is that this extends below the area available to it. We have to give these guys an overflow property of hidden. Come back up here to – in particular you see it in action on sidebar-2 and you can see what happens here if we say overflow, colon, hidden – you can see that, that no longer shows up there.

Maybe what we should do is just push this up a tiny bit more with CSS styling– really one way to deal with this would be to reduce the number of characters that we allowed to be shown for the description. If we reduce the number of characters then it will no longer project down below. We could also make this box a little bit smaller by giving that a top margin here. If we gave fat-footer-sidebars a top margin it would make the box a little bit smaller, so let’s do that: fat-footer-sidebars, margin-top, colon, 10px and then now we need to make this section smaller so it should be 385 or we could give it a top margin of 5, and make it 390. You can play with those kinds of things here a bit but that works here for this configuration.

To finish off the styling we’ll take all of our Footer stuff that we have in Firefox – or in Web Developer – and copy it all. Open up our custom.css file, scroll down here to the Footer area and we’re going to replace all of that Footer area. Save it, open up Filezilla, open up our site, go to themes, Thesis_18, custom, upload our custom.css file, go back to our site and close these things, refresh it.

It looks fine here in Firefox so now let’s take a look at it in Chrome – okay it looks good in Chrome. Let’s take a look at it in Internet Explorer and it looks good in there.

That wraps up Lesson 11 in the Build Your Own E-Commerce Website tutorial series, Add CSS Styling to a Text Widget.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment