Replacing standard HTML list bullets with images can be a great way to tie them into your overall theme and make your site more visually appealing.

Note: This article applies to any website using CSS. You don't need to be using either WordPress or Thesis.

This is what a standard bulleted list looks like in a Thesis site, which has applied its own styles to the default HTML ones.

The HTML code to create this list looks like the following. The <ul> stands for "unordered list" and the <li> stands for "list item." (If you want to use numbers instead of bullets, you would use <ol>, or "ordered list".)

Before showing you how to replace those bullets with images, I'll add that there are some other shapes you can use built into HTML itself. These include a circle, disc (filled circle), square, and various number formats. You can see the full list on the w3schools website.

You change the style by changing the definition for <li> in your CSS stylesheet. In Thesis, that's the custom.css file and you would use this code.

Here's what the list looks like now.

Note: If you use the code above, it will affect every list item you have on your site. If you want to just have that style for certain lists, you'll need to create a new class to apply to the <li>. For example, you could create a style called "lower-greek" and your HTML would say:

and your CSS would change to:

Note that you could also apply the class to the <ul> tag instead of the <li> tag. That way you'd only have to add it once in the HTML (<ul class="lower-greek">) and it would apply to all the items underneath it. However, since I'm going to be adding more attributes to the <li> definition later on anyway, I might as well include the list-style-type attribute to it as well.

Now, to change the bullet to an image, you would start by changing the definition to "list-style-type: none;" so that none of the default bullets display. The list will still be indented.

Next, we have to give the <li> definition a background image to use as the new bullet. I've created an image of a leaf that's 24 x 38 pixels and here's the code to add it in CSS and the results of the code. Again, I'm adding a specific class to the <li> so I don't affect other ones on the page.

Now, obviously, we need to do a little more work. The bullet image is being cut off on the bottom so we need to set a list item height value that is at least as big as the height of the image. We also need space between the image and the text, which we set using padding-left.

Note: Padding values will change where the text appears relative to the image within an individual list item. Margin values will change where the entire line—including the bullet—appears relative to other items on the page, including the next list item. You can also control the position of the bullet image using the background declaration, replacing "top" and "left" with absolute pixel values, for example. Basically you have to start somewhere and then just play around with the values until you have them where you want them.

I can't give you exact values because it will depend on a number of variables including the size of the bullet, how much spacing you want, font size, and so on. But here's the HTML code I've written, the styles that are applied to it, and the result of it all.

Here's an example of a bullet list that uses a pretty image of a leaf as the bullet:

Posted in Code Sample, Formatting, How To, Thesis