I'm using lists in many places of the site I'm working on. That wouldn't be a problem until I'm using the following trick:
I put a span into every list-item to make the bullet a different color than the text:

Code: Select all

<li><span>Text here</span></li>

The li has color:blue and the span color:black on it.

I guess the normal approach would be to replace the complete list with an editable, but by doing this I lose the span tag on each element (since this can't be entered).
A work-around would be to use a repeatable for each list-item, but I'm already using the lists in a repeatable, so this ain't an option here ...

I'd like to avoid using bullet-graphics, but I guess that's the way to go here. Any ideas apart from this?

Answering this one myself:
I was able to get it to work using the each tag

Code: Select all

<cms:each class_facts sep='_' >
<li><span><cms:show item /></span></li>
</cms:each>

Just need to find a good separator that makes sense in a nicedit.

[KK]

Innovative
I was wondering though if the effect could not be pulled off using CSS alone?
What do you say, @cheesypoof?

[cheesypoof]

You could use the 'before' pseudo-element as a bullet so that your markup doesn't require a span:

Code: Select all

ul {
    list-style: none;
    padding-left: 1.5em;
}

li {
    text-indent: -.5em;
    color: black;
}

li:before {
    content: "\2022";
    display: inline-block;
    width: .5em;
    color: blue;
}

Links to find and use other bullet glyphs:
http://css-tricks.com/snippets/html/glyphs/
http://www.evotech.net/articles/testjsentities.html

That works perfectly of course, thank you! Hadn't thought about using the :before element here!