We’ve had a conversation about styling text with CSS in WordPress so now we’re going to talk about different list styles in WordPress. To begin that we’re going to go to w3schools and look at their section on CSS and styling lists.
List Style Type
Lists do have a lot of different types of things that can be set in CSS. What we’re going to look at at this point in our discussion is list-style-type and list-style-position. List-style-type gives you a lot of different choices here and these are all of the values that you can use for the property of list-style-type.
So what we’re going to do is come over and work at where the list is getting its style. Right now it’s getting this little square box and so this list item is getting its style from .post_box ul. This style type is square.
We’re going to copy that selector, come back over here, .post_box ul list-style-type: and in this case, I’m going to say circle. If we were to load this, now it’s got a circle instead of the square. Notice this is not affecting that ordered list because we said list-style-type for the ul not the ol.
We can also say none if we don’t want anything showing up there. And now you can see there’s nothing there. We could also try a disc and I guess that’s it really for unordered. So that gives it a little dot. We’ve got more choices for ordered lists.
Now, a similar kind of thing happens with this for ordered lists. If we look at the ordered list, neither a list-style-type or list-style-position is being specified so we can safely do the same thing here. Instead of ul you say ol and then instead of list-style-type:disc because that’s going to confuse it, what we’re looking for again is list-style-type.
You could use georgian or lower-greek, that sort of thing. So it’s a fairly simple process of determining how you want these list things to show up.
Using Images for the Bullets
Judith asks, “Would you remove the default bullet before putting an image in as a bullet?”. Well, you can have a list-style-image. The problem with the list-style-image is it’s too finicky I think to be particularly useful. So if I want to use an image as a bullet point I never use this style image.
What I do instead is say style none and then use a background image for the list item and give myself a bunch of padding on the right. You can go to my video on How to Use Images as Bullets in Lists to learn more. If you search for that phrase, you’ll see I’ve taught that a few times and it’s a much more reliable way of using an image as a bullet in a list than using the CSS value list-style-image where it just isn’t really reliable enough to really be used.
List Style Position
Let’s talk about list-style-position. List-style-position indicates where those little item markers should be, whether they should be inside the flow or outside the flow.
Let’s look at this here and if we look for list-style-position, it doesn’t look as there’s definition for that. So let’s edit our page and take a block of text to add to those list items so that now our list items are wrong.
This list-style-type is outside which means that the edge of the paragraph does not intrude into the dot. But we could say list-style-position:inside. And you can see that the dot starts right there and the text moves over right. So those are the two different settings that you can have for list-style-position and the default is outside.