Build Your Own Business Website header image

How to Use Images as Bullets in List Items of an Unordered 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 discuss how to use images as bullets in the list items of unordered lists as requested by a member. We show how you to do this by uploading background images to use as bullets in your list item and then use a little CSS to adjust.

Video Transcript

Okay so let’s see. So the next thing we’re going to do… actually, we have a couple of people joining us who have not posted questions. If you have questions that you want to post, please feel free to type them in the chat window so that I can see them. And then I will address them as we work on it here. I just want to make sure nobody else has signed in to that other meeting… nobody has. Okay, good.

So then the next question I have is let’s see, Eldo asked a question about using bulleted graphics as background images instead of using standard WordPress bullets. So I’m going to show you how to do that. Again obviously, this is something I do all over the place on my site, right? I have let’s see, you can’t really see it on… you don’t see it very much on pages where I’m logged in but if we go to a non-logged in version of the site and we for example… well, you can see it here. That’s what this is. These little bullets are actually… these are actually list items and these are bullets beside the list. And if we go over to Learn More again, it’s the same thing. These little stars are bullets in list items. And so, it’s something that I do a lot.

Now the reason why you would do this…well, the reason why you would do this system that I’m teaching right now, rather than say, using the image type of list item is because really, the image type of list items gives you really no control over the relationship of the image to the text and every browser does it differently.

So if we go to W3 schools for just a second and we look at CSS and then lists, here’s a little set of bulleted lists where they are using an image. And so, there is thing here that says list style image and then there’s this URL and you can theoretically, in terms of list style, you can use this. But the problem is that there is absolutely no way to make sure that this image lines up dead center with your text or above your text or wherever it is. And so, this is really not a useful method as far as I’m concerned.

So what we’re going to do is we’re going to look at a different method. We’re going to look at using background images as bullets and I am going to… in fact, I should just show it to you again in one more context actually. I just created something new on the site. Where should I begin?

And this is an instance where each of these images are. Each one of these images is a background image next to the list item and same thing with the stars here. But in this case, all of these images are together in a single image as a sprite. And then I used the position property to decide which image is going to display. I’m going to show you the simple version of this first though.

And I think we’ll do that in the let’s see… www.categories… Yeah. Let’s see if I’ve got a good page with list items here. Okay, I think that is… let’s look at this. Oh no, those are not lists. Okay well, we’ll just kill this then. I won’t do it in NextGen. Since I’m already here, go to the dashboard. Actually, I forget. I can just do it this way. Select edit page and then we’re just going to create a list.

So here’s list item 1, we’ll make it a bulleted list. Okay, list item 2, list item 3, list item 4. Okay so we’ll update this. We’ll view the page and now we have this set of lists here.

Now I probably am best off assigning a class to these. So if we go over to the HTML view and go into UL, we say class equals and let’s just say stars. Class = stars and say update and then it would probably be easiest for me to demonstrate this by… I’m going to upload an image to use as a background image into the Media Library.

So if we go to Media, Add New, select a file… let’s see. Let’s just grab that stars image. www.byobwebsite… Content, themes, thesis_18, custom, images… and let’s see. Actually, I’m going to grab that one, this one and this one. We’re going to grab those 3 different images.

Okay and then we’ll go back to the library. I’m going to start off with this one here. So we’ll grab this image and then let’s see, we should open this up in Firefox so we can do our editing in Firefox. Most of this should be relatively familiar to you just because NextGen… just because… what it really is is just dealing with the background images. But we… let’s see, let’s inspect that element. We’re looking at UL class stars LI so if we edit CSS and we just come down and we say .custom.

Now because this is inside of format text…you know actually, since format text is just a class, I think we’ll just do that stars. So that .custom .stars and it’s not .stars but it’s UL .stars because we’re talking about the UL with a class of stars. And it’s UL .stars and we want to add this background image to the LI item element so we go space LI. Then we say… oh actually, first we need to say that the UL… what type of UL it is. So we’re going to say list style none to make the bullets go away. Okay and then we’ll copy this and we’ll say UL stars LI and we’ll say background image: URL. And then that is we’ll paste the URL here… pardon me. That’s not what I wanted to do. Background image URL… I thought I’d forgotten I had… got to come back over to that image URL here. Copy that URL, back over to here, V enter and then that.

Rick: Okay I see, I think somebody has joined us here. Hang on a second.

Sean: Hello?

Rick: Hi. Are you joining a live meeting here?

Sean: Yeah, can you hear me?

Rick: I can hear you just fine. What I want you to do though is I want you to look in the chat window. You’ll see in that chat window that I have a link to the GoTo meeting.

Sean: Okay but that’s a problem because I’m not on my computer. I’m at work and I can’t… I don’t have a computer in front of me.

Rick: Okay so you’re just going to listen.

Sean: Yeah, I’ll just listen.

Rick: Okay, that’s fine. It’s interesting, I don’t see you in my list here though. Let’s try that again.

Sean: I thought I had registered. I got an email today saying that I didn’t but I thought I did. I asked a question.

Rick: Yeah, it’s interesting.

Sean: I mean, I live in Seattle.

Rick: I noticed that. I noticed Kent or something like that?

Sean: Yes. I’m in Kent, Washington, right.

Rick: Okay well, I don’t know why I can hear you because I don’t see you logged in into anything in particular. So we’re just going to let it go at that and I’m going to keep on talking. I’m going to get to your question here in a few minutes, okay?

Sean: Okay, thank you.

Rick: You’re welcome. And if anything happens to the audio, Sean, just go ahead and… oh yeah, right. No, I got you. You can’t log in without a computer. Okay, no problem. Well hopefully, this would work just fine.

Sean: Yeah, I’ll just listen.

Rick: Okay. So back to this question of… okay so we’ve copied the URL and now we are working on the… so there is the button as it sits all by its lonesome. And so the next thing to do is to say background repeat: no repeat semi-colon. Okay so now you can see we’re down to only one element and then we’re going to say background position colon and we’re going to say… let’s see, I think it’s going to be 5 pixels down and left. I need to say pixels though, 5 px and left. Okay, not 5 px, minus 5 px. That’s 5 px and 0..oh, semi-colon. There we go.

Okay that is actually… so this one should be the 0 and this one should be the 5 px. Okay and then we just need to get padding so that it doesn’t overlap. So we’ll say padding: left… – left colon let’s say 15 px. Okay, let’s give it 20 pixels and maybe it needs to go down a little bit more maybe down 6 pixels.

So see that adjustment right there cannot be done using the list style image as a… when you use it as a bullet. You don’t have the freedom to make an adjustment like that.

Now instead of using this red arrow, let’s use something that’s too big. That’s what I really wanted to show you was how to use something that was too big which is I think the star. This is only 14 pixels tall which is why this thing worked just fine but I believe the star is only 22 pixels tall. So if we go back to the Media Library and we get the star… it is. It’s 22 pixels tall so we copy that, come back over here and instead of… do this, now you can see that the image is cut off, right?

And so the way you handle that…well, first off, you may not go down so that’s one thing to consider and we can move this over 30 pixels. But the next thing to do is just to make the line heights taller. And you don’t have to do it by line height, you just do it by height. Say height: 22 px which makes… and then maybe give it a little bit of a bottom padding so padding bottom: 10 px so that’s spread it out a bit.

Now if you feel like you want this more centered, you could go back to this background position and go down 5 pixels there. And that drops the star down a little bit. Maybe that’s down too much, maybe we just go to 2 pixels. But that’s how you do that.

And if you want to vary each one so that…say some of them are stars and some of them are arrows. You could come down here and give the LI a class. So what I’m going to do here quickly is I’m going to copy this. Oh pardon me, I haven’t closed this one out, there we go. I’m just copy this for a second and I’m going to show you what I mean. Okay, if we come back over here and we look at our… go back to our page. Where did my homepage go? Demonstration homepage, edit and here we can say class red check… class = check. We’re just going to say check and update and come back over to Firefox and refresh it. Custom CSS, let’s paste that code back in again.

Now you can see that code works just fine here but something we could do is then copy this for the LI and paste it again. And then what we’re going to do is we’re going to change the background image URL but first, it’s going to be LI .check… is that what I called it? LI .check or checks?LI .check, okay. And so, now we’ll use that red check image, edit, copy it, come back over here. And in this place, change it. Okay so that one’s got a red check instead of the stars and then you can use that you know, background position. Let’s call it 6 pixels and let’s move it in a couple of pixels since it’s smaller than the… a couple more, 5 pixels. So now it’s kind of centered in that space, right?

So that’s how you manipulate this stuff you know, around in order to make it work like that. And essentially, that is how I accomplished… let’s see, I’m going to copy this first before we leave.

So actually, Eldo, I’m going to turn your microphone on. Eldo, did that make sense?

Eldo: Yes, I’m here Rick.

Rick: Did that make sense?

Eldo: Made perfect sense, yes.

Rick: Okay and the thing is that on my own site in that case you know, I created a class then for each LI item and applied that class independently to each LI item so that you know, each of these things could be different, right? That’s how each one of these bullets is different is because each LI item has its own class. Let’s see, with HTML so if we… come on. You know, sometimes, this stupid thing is flaky. Maybe it’s just me. Still, if we go down to format text and we go to UL status, you can see that each of my class names have their own… or each of my LI items have their own class name so that I could specify the specific image you know, for each of these elements. So…

Eldo: Where can we get these graphics from?

Rick: Well, these graphics, I purchased from Dreamstime Images. There’s a link on my site that takes you off to Dreamstime… I beg your pardon?

Eldo: Yes, I know Dreamstime, yeah.

Rick: Yeah, well that’s where I bought this. This is actually you know, culled from 5 or 6 different icon sets that I bought that are all the same. I mean, by the same…in the same style by the same author. But you know, that’s what I do. When I need an icon, I just go to Dreamstime and find something that I think is going to do the job for me and buy it and use 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