Build Your Own Business Website header image

Creating and Styling an Un-ordered List

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

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.

In this session we show how to create and style an unordered list in the Thesis theme. We demonstrate how to do this by first creating an unordered list, giving it a class and then taking out the span tag in the html. We then show how to style it by adding a margin, specifying the width, color and the text format within the CSS.

Video Transcript

Rick: Sure. So you’re looking at this thing right here, this sidebar?

Member: Yes.

Rick: And what you want to do is reduce the space between this line and this line…

Member: Yes.

Rick: And the way you’re accomplishing this line, I mean, if we take a look at the HTML, the way you’re getting here is you’ve created a UL here, an unordered list. That unordered list has an LI item in which you put these dash lines…

Member: Yes.

Rick: And then you have another LI item, a list item where you have your actual link then you have another list item where you got lines and then another list item where you have a link, so on and so forth, right?

Member: Yes sir.

Rick: And what I’m suggesting that you do instead of that is to create… and so I’m just going to create this with you on a demonstration site. Let’s see, you know, actually I think I’m just going to do it here, just for grins. I think I have a sample page here if I’m correct.

Member: Yeah, I’m more of a visual learner so this is going to be great.

Rick: Perfect. I do have a sample page. Okay so the way I would do this, and I’m going to show it to you in the text area but it doesn’t really matter where to do it. I’m going to take some of your examples. So let’s see, you’ve got… alright, copy that, copy as HTML. Yeah, that worked. Yeah, old school versus new, okay. So what I’m going to do is just take all of your stuff here and I’m just going to do this several times. Okay, so I have that link in there a few times.

And then I’m going to take this link and I’m going to make it an unordered list and update it. View the page and there’s our unordered list of these links. Okay so what I told you to do was take this UL and give it a class, class equals underscore. So we’ve got UL class equals underscore and then each of our links is an LI. Now I’m going to actually take out the span tag because we’re going to include this… that colored definition in our CSS. So I’m going to get rid of the span tag in each case… oh, that wasn’t what I wanted to do there. I wanted to get rid of the span tag, not the link tag.

Okay so there we are. We’ve got an unordered list with a class of underscore and we’ve got a bunch of list items that are links. So then what I’m going to do is create a style for this. I had to come over here to… create a style for this. Okay, my custom CSS has been already added into this so I’m just going to start at the bottom of layout CSS for this. And I’m just going to say UL .underscore LI. And then what I’ll say is border bottom colon dash 1 px and let’s see, what color of grey do we want to use? What was that color I suggested to you? COCOCO so I’m just going to grab that.

Okay so there’s our gray. Actually, in this case, we’re also going to need to… UL .underscore list style none. You’re not going to need to do that in the sidebar. And then let’s see, what else are we going to do here? We’re going to say change our… let’s give ourselves a little bit of bottom margin, call it 5 px so we get a little bit of separation. And then if you want to make sure that these things… well, the way this automatically happens is it expands to fill the space. If you want to specify a specific width, you can say width: 300 pixels so that the width is you know, whatever width you want it to be. And let’s see, what else would you do here? These are… okay, you’re going to want to specify the color so that is the A is where you’re going to specify the color. What was their color? Your color was that. So there’s your color, UL underscore LI a. You know, I think we’re going to have to add something else to this, .custom .format text. Okay, where is this getting its color? No, that is the color, isn’t it? 0052… did I get that wrong? No, that is the blue color, I’m sorry my mistake. I was thinking it was a different color now.

So now we have color there and now I think all we really need to do is say text decoration none so we get rid of that underline. Okay so the critical part of this was that we… and actually, I guess there’s one other thing you want which is this line on top as well, on top of the first one?

Member: Yes.

Rick: And so you could do that one or two ways. One of the ways is you could put a blank LI up here or the other way is that we could take this. Let’s say LI .top and then border top, okay. Border top dash and then I think we could probably get rid of these two things because we’ve already got that defined. And then what we do with this one is we give that first one a class of top. Okay, before I get too far with this, I’m just going to copy this, put in a text file, come back over here to the UL. And so for this LI, we’ll just say class equals top. Okay so we’ve got a UL underscore LI class equals top, update that, update this and now our top one has a thing over the top of it.

0 Comments… add one

Save $200 on Membership Now!

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