Build Your Own Business Website header image

Adding a Background Color to a Category Widget

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.

This member is concerned that her category widget doesn’t look good because it doesn’t fill the space available. I suggest using a background color to frame the widget and demonstrate the code needed to accomplish it.

Video Transcript

Lorraine: You’re looking at categories… between the end of categories and the page?

Rick: You mean right here? Let me just turn that pen back on. You mean, right here? Too much space there?

Lorraine: I don’t see it… yes. Don’t you think that looks kind of…

Rick: Well you know, the problem is as soon as you get a longer… as soon as it’s not a 2-word thing here, right? You could always add some custom CSS to this and you know, and indent that in a bit. It’s going to be indented in more than the rest of the stuff here is. I mean, if you want to… I guess, one trick that I play sometimes is I wrap this in a… I put a background color in the box so that it stands out a little bit more and its shape is a little bit more obvious. So if we just look at you know, I guess it’s probably widget categories. It’s probably the thing I would use for that and edit CSS. Okay Lorraine, can you see better now? Can you see… oh you must be able to see it because you saw my question about the… you saw what I was doing with measuring, okay.So then what I would do here is let’s see… .custom and then I would say LI .widget .widget_categories.

Lorraine: What does LI mean?

Rick: That’s list item. That’s what this is right here. This is an HTML list item.

Lorraine: Okay thank you.

Rick: And that’s… when you see this…see me hovering over it, you can see it turning blue on the right. That’s what I’m doing. I’m hovering over this list item and I’m going to affect that list item. And then you know, I would probably then give it a background color… I mean, just for grins… background color. I’m not being artistic here. I’m just showing you an idea, efefef.

Lorraine: We know you’re artistic. It’s okay.

Rick: Yeah, I know. Sometimes but let’s see… and then padding: 10 px. Let’s see, so with my list item, do we actually give a definition to that width?

Lorraine: Look at that, yeah, sticking out there.

Rick: It shouldn’t be sticking out. So I wonder if my LI’s have a width. Oh it does have a width… into it. So then my mistake then I would just reduce the width down to say, 90%.

Lorraine: Okay are you doing intermediate stuff here? I’m certain to get a headache.

Rick: Oh yes, of course it is. Anything related to code intermediate by my definition, yeah.

Lorraine: So watch the video 5 times.

Rick: Well, the first video you want to watch if you’re going to do this are those Introduction to Custom CSS because you know, these are all… I mean, this is a skillset that you want to acquire. If you want to make changes like this…

Lorraine: That looks nice, Rick.

Rick: What’s that?

Lorraine: I like that. That looks nice.

Rick: Okay well, see, that gives shape to that, right? I mean, that’s essentially what we’re trying to do is we’re trying to impose a shape on this that’s different than the ragged edge. And so, we drop a little bit of background color in there and you know, give ourselves some padding so it’s spaced away from the edge. And then you know, it’s essentially the same shape as you know, the search or sidebar and actually, I think the background color is the same as that background color. So I’ll put this code in the forum for you so that you can have access to it. But I mean, the place to start is the very beginning of Customize Thesis Like a Pro then and start with the first couple of lessons so that you can get an understanding of what the main concepts are here. You know, the first 4 of the lessons are relatively basic you know, you shouldn’t have too much difficulty figuring that out. And everything that I do in those first 4 lessons… everything you would need to learn in order to do what we just did here, you are going to learn in those first 4 lessons so…

Lorraine: Excellent.

Rick: Okay? But I will add this code to the site when we’re finished today. It’s under Forum Answers Code.

Lorraine: Thank you very much. Forum Answers code, okay.

Rick: Okay, I mean, Live Answers Code.

Lorraine: Live Answers Code.

Rick: Okay?

Lorraine: Thank you, Rick.

Rick: Great, you’re welcome.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment