Styled Bullet Lists

list-styles-header

Added Feature

Rather than deal with bulky shortcode plugins for something simple like this, just use simple class names to apply custom list bullet styles.

Where to Find it?

There are no options for this feature

I’ve used several different shortcode plugins in the past to implement styled content, specifically for columns or buttons or styled lists. The problem with all of them is that their appearance comes from Bootstrap or some other CSS framework which makes them look really foreign inside a beautifully crafted page like Twenty Fifteen.

For example, most list styles use “hanging indents”. While Twenty Fifteen was being developed, I thought there was a bug with the lists, but I came to find out through the WordPress Slack channel that the list styles were done purposely with a typography style called “Hanging Punctuation“. It took me a while to adjust to it, but I now see the beauty of it and highly suggest it for theme authors.

I didn’t want to style all those things in the theme, but styled bullets is really easy particularly since Twenty Fifteen already enqueues Genericons for you.

Here’s examples and code for how to use these bullet styles in Matt2015

All Checks

  • Check 1
  • Check 2
  • Check 3
<ul class="genericons check">
    <li>Check 1</li>
    <li>Check 2</li>
    <li>Check 3</li>
</ul>

All X’s

  • Check 1
  • Check 2
  • Check 3
<ul class="genericons x">
    <li>Check 1</li>
    <li>Check 2</li>
    <li>Check 3</li>
</ul>

All Caret’s

  • Check 1
  • Check 2
  • Check 3
<ul class="genericons caret">
    <li>Check 1</li>
    <li>Check 2</li>
    <li>Check 3</li>
</ul>

All Plus’s

  • Check 1
  • Check 2
  • Check 3
<ul class="genericons plus">
    <li>Check 1</li>
    <li>Check 2</li>
    <li>Check 3</li>
</ul>

All Question Marks

  • Check 1
  • Check 2
  • Check 3
<ul class="genericons question">
    <li>Check 1</li>
    <li>Check 2</li>
    <li>Check 3</li>
</ul>

All Exclamation Marks

  • Check 1
  • Check 2
  • Check 3
<ul class="genericons exclamation">
    <li>Check 1</li>
    <li>Check 2</li>
    <li>Check 3</li>
</ul>

Mixed Bullets

  • Check mark
  • X marks the spot
  • Exclamation
  • Question
  • Plus
  • Caret

For this style, simply declare the “genericons” class for the “ul” element, and add the bullet style class name to the list element.

<ul class="genericons">
    <li class="check">Check 1</li>
    <li class="x">Check 2</li>
    <li class="question">Check 3</li>
</ul>

Bullet Colors

You’ll notice that I’ve made the checks and x’s colored. If you want to disable that or change the color of any of the other bullets, just use this (as an example):

ul.genericons li.x:before,
ul.genericons.x li:before {
    color: #ff0000;
}