I saw your comment about quality of support. (Just to say you did that a nice and polite way).
Your posts a good example of what kind of dilemma the support team is stuck in.

Frankly your post is a a general css or design question. The are hundreds of answers for this on google.

But I don't think this is a bad question as it explains how styling is done for lists.
It's not really template related or even Joomla related.
Personally I like questions like this but tho is a simple thing it takes some time and draws me away from template related stuff.

But now back to your topic.

let us assume you have this in your html

<ol class="custom">
<li><span class="bullet">-</span><p>This is my 1. line</p></li>
<li><span class="bullet">-</span><p>This is my 2. line</p></li>
<li><span class="bullet">-</span><p>This is my 3. line</p></li>
</ol>

add this to your css (I used css3 here but you could simply use a background pic too)

ol.custom li span.bullet {
display: block;
width: 20px;
height: 20px;
background-color: orange;
position: absolute;
left: -22px;
z-index:-1;
overflow: hidden;
text-indent: -20px;
border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;}

ol.custom li {position: relative;z-index: 1;}
ol.custom {color: white;padding-left: 20px;}
ol.custom li {padding-left: 10px;}
ol.custom li p {color: black; margin-bottom: 5px;}

But there are many ways to style this …
Where to begin where to stop?

I used Reflex for my example, tested only in Safari.
Probably would need some adjustment for other browsers.
But I hope this helps.