Simple Guide to Styling Lists Within Your Posts for Those with Limited Technical Skills

Part seven of: “Stylizing Your Content”.

For this, there is only one file you will be working with:

1. style.css

You can find this in your WordPress admin under Presentation > Theme Editor - listed on the right hand side.

The ordered list, by default, is fine and generally shouldn’t be changed. It simply lists things by number like so:

1. Hello
2. this is a
3. ordered list

What we will do, is change the unordered list to display an image instead of the usual dot:

• Hello
• this is a
• unordered list

To this:

• Hello
• this is a
• unordered list

Adding a Bullet Image

Let’s open up the style.css file — listed as Stylesheet in your admin — and navigate to the following code:

.entry ul li:before, #sidebar ul ul li:before {
content: "\00BB \0020";
}

What!? Exactly. Pretty convoluted stuff. We don’t care about this stuff though. We’ll just add this little bit of code under the above code:

.entry ul li {
list-style-image: url(images/arrow.png);
}

This simply means, the “list item” within the “unordered list” should display the file called “arrow.png” which exists in a folder called “images” on the server.

So, this of course means: add your image, whatever it’s called, to your images folder in the same directory as your WordPress installation. Make sure your image is small enough, no one likes bullets that are bigger than the text that follows.

Bonus! — Here are a bunch of free bullet images.

Voila!

Image credit: Bob Jagendorf.