Bullet points are an excellent way to convey lists of information in articles on your blog. They’re easy to read, and generally quicker for readers to scan than the same information represented in full grammatically correct paragraphs. Bullet points are sexy, and here’s how to make them even sexier.

Often I find the information in the bullet points I want to present isn’t morally or emotionally neutral. There are good points, and bad points. Changing the bullet icon to a tick or a cross conveys this instantly:

  • Good point
  • Bad point

The advantages of using tick and cross icons in your lists are:

  • They instantly convey your emotional or moral choice about something
  • They’re easy to read
  • They look sexy

The disadvantages of not using them are:

  • Your blog looks less cool
  • It’s not as sexy
  • Everyone will think you’re boring

Some lists may contain a mixture of good and bad points, like in the first example above, while others might be inherently made up of entirely good or bad points, like the second and third examples. The style rules below take advantage of this fact to help optimize the creation of sexier bulleted lists.

To create lists which emphasize good and bad points, start by creating a child theme if you haven’t already done so, and then add these rules to your child theme’s style.css:

/* Good and Bad list styles with ticks and crosses */
ul.good {
	list-style-type: none;
	list-style-image: url(/wp-content/uploads/tick.png)
}

ul.bad {
	list-style-type: none;
	list-style-image: url(/wp-content/uploads/cross.png)
}

/* A neutral list with entries that can be both Good and Bad */
ul.neutral {
	list-style-type: none;
}

li.good {
	background:url(/wp-content/uploads/tick.png) no-repeat top left;
	padding-left:25px;
}

li.bad {
	background:url(/wp-content/uploads/cross.png) no-repeat top left;
	padding-left:25px;
}

Your theme may already indent lists, but if it doesn’t I suggest you also add:

/* Indent both unnumbered and numbered lists */
#content ul { padding-left: 20px }
#content ol { padding-left: 20px }

Do a Google Image Search to find a tick icon and cross icon that you like, ignoring the gross little blood sucking insects and religious paraphernalia respectively. Load them up into your favorite image manipulation program, and scale them down to around 20×20 pixels. Nick mine if you like, by right clicking on a tick and cross earlier in this article and selecting Save Image As; or whatever you do in your browser to save images. Upload them to your /wp-content/uploads directory.

Now you’re ready to create content with sexy lists. Create your lists as normal in WordPress Visual editor, then switch to the HTML editor and make the following tweaks. Look for the start of your list, which looks like:

<ul>

Change this according to whether your list is all good, all bad, or mixed (i.e. the list itself is neutral, but the entries may be either good or bad) respectively to:

<ul class="good">
<ul class="bad">

Or:

<ul class="neutral">

That’s all you need to do if you lists are entirely good or bad. If your list is mixed/neutral, you need to mark each entry in the list according to your preference. So look for each:

<li>

And change this to either:

<li class="good">

Or:

<li class="bad">

And you’re done. For example, here’s how the first list in this article, with both good and bad entries, looks in the HTML editor:

<ul class="neutral">
    <li class="good">Good point</li>
    <li class="bad">Bad point</li>
</ul>

And this is how the second and third examples look:

 <ul class="good">
    <li>They instantly convey your emotional or moral choice about something</li>
    <li>They're easy to read</li>
    <li>They look sexy</li>
</ul>

And:

 <ul class="bad">
    <li>Your blog looks less cool</li>
    <li>It's not as sexy</li>
    <li>Everyone will think you're boring</li>
</ul>

You can switch back to the Visual editor and finish the article. Your changes will be preserved even if you switch between modes, but you won’t see the ticks or crosses in the Visual editor. I’m not sure how to fix this yet. Hit the Preview button though, and you’ll see them in your article preview.

I’m also not sure yet how to get the ticks and crosses to show up in your MailPress newsletter. If anyone has ideas on these two minor nuisances, please drop me a line.

Categories: Themes

Graham

I'm the creator of BuildYourBlog.net.

7 Comments

D. Maak · August 7, 2012 at 6:47 am

Hey Graham,

Great tutorial. I did this not too long ago with one of my blogs. Would have been much easier had I found this first, but I figured it out.

I didn’t do it with ticks and crosses, but instead used an image that pertained to my site for the bullet points. For example, if you have a little mascot or icon that represents your site you can use that for bullet points. It’s unique and adds a bit of branding and personality.

    Graham · November 3, 2012 at 11:43 am

    Cool; great suggestion!

Amit · February 15, 2012 at 10:19 am

Thanks..That is really great post ..We can enhance the bullets

Kristen B. · December 14, 2011 at 2:06 am

I haven’t used bullets before in a post. I guess your suggestion of using bullets seem something new to me. I usually use bullets in word documents so probably I will apply the bullets on my post if I have a chance. Thanks for the HTML editor tips.

/Kristen B.
Onkyo tx-nr808 Reviewer

    Graham · December 14, 2011 at 9:22 am

    You’re welcome Kristen; they do make lists look funkier. Cheers, Graham

Ola · December 2, 2011 at 2:01 am

Great tips, this definitely gives the bullet points more character and makes them more appealling

    Graham · December 2, 2011 at 11:00 am

    Cool… glad you like it. 🙂

Leave a Reply

Avatar placeholder

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.