This CSS trick replaces the typical boring bullet dots with an image instead.

here's an example

of a list with really

boring bullet dots

Copy and paste the following code into your CSS stylesheet

ul {
margin:.5em 0 1em;
padding:0 0px;
list-style:none;
line-height:1.5em;
}
ul li {
background:url("your-image.gif") no-repeat 3px .45em;
margin:0;
padding:0 0 2px 15px;
}

The image that replaces the bullet can be any size, but it's probably best to keep it as tiny as possible. To show the new customised bullets, you must use the "ul" codes between your entire list, and the "li" code must be used before every list point. Here's an example of what the list would look like.

[ul]
[li]listy list
[li]list list list
[li]look at my super cool list
[/ul]

SO.. when we add the html in, this is what shows up:

listy list
list list list
look at my super cool list