Custom Markers for HTML Lists


Do you want to use custom graphics instead of the simple round circles or squares for you lists? Do you want to use a small graphic image such as a check mark for your bullet lists instead of the standard circles?

This is an example of how to use custom markers in your web pages. First, you will need a graphic. A 24 x 24 png graphic is used here. The inspiration for this is from the book HTML and CSS Quick Start Guide, Eighth Edition by Elizabeth Castro and Bruce Hislop. It is on pages 394 to 396. I have modified the code a little bit. Since this website is a WordPress website, I uploaded the graphic using the Media Library. The graphic is shown below.

checkmark

The HTML for this is very simple. The learning curve is in the CSS. Below we show the list without any styling. This is the default styling that the browser provides.

My Heading…

  • One
  • Two
  • Three

To accomplish this the HTML elements ul and li are styled in the file styles.css in a WordPress Child Theme. I do not want to style every single ul and li in my whole web site with this styling. I only want to style the ul elements that are a child of an element the has the class custmarkers. Custmarkers was a name that I created, but it could be anything other than reserved words. Also, the li element will only be styled for custom markers when it is under the ul element that is under an element with the class custmarkers.

Below is the result of our styling. Below that is the code you will be using.

My Heading…

  • One
  • Two
  • Three

Mark up your HTML as you would normally except that you assign a class to the div element as shown below.

<div class="custmarkers">
    <h3>Heading for List With Custom Markers</h3>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</div>

Add the CSS code shown below to your style sheet styles.css. This defines what custmarkers is.

/* Unordered Lists with Custom Markers
*  ===========================================================
*  I am using a WordPress Child Theme for this site.
*  This css code goes into your styles.css file of 
*  the Child Theme.
*/
.custmarkers h3 {
  font-size: 1.5em;
  margin-bottom: 0;
}
.custmarkers ul {
  margin-top: .4em;
}

.custmarkers  ul {
  list-style: none;   /* turn off the default markers */
  /* remove indentation of list items */
  margin-left: 0;
  padding-left: 0;
}

.custmarkers li {
  /* Show image slightly down from top of item.
     Note that the url to the image file needs to go up 
     2 levels and then back down to the file, because 
     the location is relative to this css file. Your
     png file location will almost certainly be different. 
  */
  background: url(../../uploads/2015/10/checkmark.png) no-repeat 0 .1em;
  margin: 0px 0px 0px 0px;     /* remove margins */

  /* make line tall enough to show full checkmark */
  line-height: 1.8;

  /* bump the text over to make room for the checkmark */
  padding-left: 2.2em;
}

Be sure that your code points to the png graphic file on the server. As the notes above say, “Your png file location will almost certainly be different”. In WordPress you can go to the file in the Media Library, select it and take note of the file location specified.

Leave a comment

Your email address will not be published. Required fields are marked *