User:Billw58/Custom bullets

Let's create the front page "major sections" list here first

Obviously the checkmark graphics would be replaced with big blue number graphics.

• Number 1
• Number 2
• Number 3
• Number 4
• Number 5
• Number 6
• Number 7
• Number 8
• Number 9
• Number 10
• Number 11
• Number 12

Hover over and click on the image to learn more.
Skip image map and go to the More Details section

Gale 27May12: The only inline method I know that works on Wiki is this:

<ul style="list-style:none">
<li>[[image:CheckboxNotChecked.png]]Number 1
</ul>

giving :

• Number 1

"list-style-type:none" should also work to kill the Wiki bullet, but doesn't. You may still need some padding on the image.

Of course:

<ul>
[[image:CheckboxNotChecked.png]]Number 1
</ul>

gives an identical result but is not really semantically correct.

CSS styling can be used with either ul or li (I added the below to skins/monobook/main.css on the server):

CSS:

/* Custom bulleted lists */
li.num {
   list-style-image: url('/m/images/8/85/CheckboxChecked.png');
}
 
ul.num {
   list-style-image: url('http://manual.audacityteam.org/m/images/8/85/CheckboxChecked.png');
}

Wiki markup:

<ul>
<li class="num">Number 1
<li class="num">Number 2
</ul>

<ul class="num">
<li>[[User:Billw58|Number 1]]
<li>Number 2
</ul>

giving:

• Number 1
• Number 2

• Number 1
• Number 2

So to use CSS, you probably want to add 12 li classes at MediaWiki:Common.css.