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 5 – Part 5 – Style the Typical Sidebar

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

Style the Heading

Right now what we’re going to do is finish styling our sidebar. The first part of styling the sidebar is really just styling the heading. Remember that the heading has this nice big dark gray section here. That’s what we’re going to work on first and that gray color is 9097a9, grab that, refresh this.

Set Sidebar Design Option

I guess I haven’t set the sidebar design options yet. Just come down to sidebar design options, the sidebars are going to be Arial again, the main content is going to be smaller, I guess I did 13. The text color is black. Actually, my mistake. The font family is inherited from the body. It’s the heading that’s Arial and we’ll take it up to 18 pt. I don’t think that’s going to be enough though and that color is going to be white. I think that’s got those changes so let’s save that, update this, there we go.

Now we need to do a couple of other things to this. Thesis has a common sidebar setting where any changes you make affect any sidebar that you create so we want to target this sidebar specifically. The way we would do that here is to simply style div id sidebar 1.

For the moment, I’m going to give it its own background color pretending that it has this color just so that I can work around the problem with web developer and background images. We’re going to say #sidebar_1 then we’ll say background-color at the moment, I’m going to put a color in here just so we can see what we’re doing there.

Give Heading a Specific Style

The next thing we want to do here is give the heading the sidebar 1 h3 specific style so say, #sidebar_1 and then h3 which is what this tag is here. Actually, it’s styled with this dot sidebar h3 so let’s include that class with our definition here. So, sidebar_1.sidebar h3 and let’s give it a background color of what we did. There we go, we’ve got a background color there.

Now, I think we want the font to be bigger so I’m going to say, font-size:22px and I want padding all the way around the fonts so that the gray doesn’t just touch the letter so we’ll say, padding:10px. Then I don’t like the font variant that’s used here, it’s small caps font variant so we’re going to say, font-variant:normal, so now it’s not small caps but it’s upper and lower case.

We’re going to also make that letter spacing normal, letter-spacing:normal. There’s our nice gray color. Notice that we have this padding around the outside of this and this up here at the top.

What we need to do now is get rid of that padding so that the heading can butt up to the edges the way the design does and this padding actually comes from right there, ul sidebar_list. If we look at this, it’s sidebar ul.sidebar_list so we’re going to say sidebar 1 sidebar ul.sidebar_list and we’re going to say padding 0. That will be #sidebar_1.sidebar ul.sidebar_list then we’re going to say, padding:0px. Now that has popped our thing into place, our heading goes all the way over to the edge which looks great except that our fonts now go all the way to the edge.

The way Thesis handled that was by putting padding in the ul.sidebar_list but the way we’re going to handle it is by adding it to our widgets. Let’s inspect that so we’ve got ul sidebar_list, li div, that’s where we’re going to put our padding. We can’t because we can’t put the padding around the h3. so The padding has to go outside of the h3 so we can’t pad li, we have to pad this div that happens below the heading.

The way that works then is, come down here and we’ll say, #sidebar_1.sidebar and I think we’ll say, ul.sidebar_list li div. What that’s going to do is reference every div instead of the li that’s inside of ul.sidebar_list and most of these widgets are going to put their stuff inside of a div and this is going to handle most cases.

There’s a case that it won’t handle which I’ll show you here in a second but now we’re going to say that padding left, padding right. So, padding-left:1.1em was what they had before, padding-right:1.1em. Now our text stands away from this. I don’t have an example of this in a widget here but take my word for it, the category widgets tag widget and some other listing widgets don’t wrap these things in a div.

What they do is they wrap it in another ul so what we’re going to do with this is add another version of this with the comma there but instead of div, we’re going to say ul. This references any ul that’s inside of li item inside of ul.sidebar_list. That’s our sidebar so let’s just go ahead and grab that, come over here and take our comment as well.

We’ve got our padding, we’ve got our style there, let’s save this, upload it, save that and refresh it. There we go. now we have our sidebar styled.

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