XF 1.5 Make your bullet lists awesome

[Senpai]

you can see the difference between the two pics right ;D
here's what you need to make it possible:

open your EXTRA.css template and add this

.message ol{
counter-reset: li; /* Initiate a counter */
list-style: none; /* Remove default numbering */
*list-style: decimal; /* Keep using default numbering for IE6/7 */
font: 15px 'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.message ol ol{
margin: 0 0 0 2em; /* Add some left margin for inner lists */
}
.message .baseHtml ol li {
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #ddd;
color: #444;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
.message .baseHtml ol li hover{
background: #eee;
}
.message .baseHtml ol li:hover:before{
transform: rotate(360deg);
}
.message .baseHtml ol li:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background: #87ceeb;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}
.message .baseHtml ul li {
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #ddd;
color: #444;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
.message .baseHtml ul li hover{
background: #eee;
}
.message .baseHtml ul li:hover:before{
transform: rotate(360deg);
}
.message .baseHtml ul li:before {
content: '*';
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background: #87ceeb;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}