Make Your Bullet Points More Sexy

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.