Changing list and bullet style in WordPress to add a background image

Sometimes you want to spice-up your WordPress pages (especially sales-letter pages) to replace the standard list-bullet dot or square with a custom images, for example compare:

• Feature #1
• Feature #2
• Etc…

To:

• Feature #1
• Feature #2
• Etc…

A bit more visually appealing eh?  You could always go to W3 School CSS tutorial and figure out the CSS code to do this, and then apply it to your CSS file, but then it would apply site-wide (globally) which you may not want.  Better instead to create a custom class called “redcheck” or similar, as follows:

.redcheck {
    background:transparent url(/images/redcheck.gif) no-repeat scroll 0 0;
    list-style-type:none;
    padding-left: 20px;
}

Add this to your CSS file (any good theme will allow you to create custom CSS, otherwise just edit the default style.css in Theme > edit)

The easiest way to apply the style to your text is with TinyMCE Advanced, as described in a previous article.

The above HTML will then look like:

<ul>
 <li class="redcheck">Feature #1</li>
 <li class="redcheck">Feature #2</li>
 <li class="redcheck">Etc…</li>
</ul>

If you are working by hand (rather than with  TinyMCE) then you don’t want to put the “class=” on every LI element, so you would instead write this:

ul.redcheck li {
  background:transparent url(/images/redcheck.gif) no-repeat scroll 0 0;
  list-style-type:none;
  padding-left: 20px;
}

and apply the class only to the high-level element (UL) as follows:

<ul class="redcheck">
  <li>Feature #1</li>
  <li>Feature #2</li>
  <li>Etc…</li>
</ul>

Note that you will have to upload the checkmark image (or similar) to somewhere on your site, I suggest a directory “images” off your WordPress root.

Good luck!

PS: Try this too:

.bigred {font-size: 24px; color:red;}

and then <span class=”bigred”>Some text</span>
Much better than sprinkling font changes throughout your document

PPS: If you have WordPress Spire Theme all these things (and much more) will be taken care of for you