Blog, WordPress, WordPress Shortcode

Styling WordPress Lists with CSS

If you're in business, the generic bullet-style of list is a little bland. Thankfully, styling lists in WordPress is easy. Instead of using the boring dot or hyphen provided by a default WordPress installation (or via your theme) you can style the list icon to be anything you like.

This is what a standard list looks like (on our site, anyhow).

The list is boring.
There's no icon to convey a message.
It has no personality.

A Styled List

A styled list looks like this:

It has personality.
It is different...
It conveys a message.

... or if you wanted to go the other way and show a cross.

This is a list of bad things.
Makes it clear that it's something you shouldn't do.

In our case, we might use a small BM icon to represent company lists (it's the same as our tired favicon).

The BM icon makes it clear that it's a BeliefMedia list.
You could use icons that represent the type of list you're making.

To prove a point, you can put anything you like as an icon in a list.

Since we do a lot of work in the aviation field...
... an aircraft icon or two might be used.

The Code

You will have to modify two files; your functions.php file (or if you have it installed, your custom-functions.php file), and your custom.css file. If you've downloaded our custom plugin plugin this whole process is going to be a piece of cake.

CSS

Copy and paste the following into custom.css. Alter the URL to reflect the location of your own images.

.bm_cross ul {

margin-left: 50px;

list-style: none!important

}

.bm_cross ul li {

list-style-type: none;

padding: 5px 5px 5px 30px;

background: #fff url('http://www.yourdomain.com/images/cross.png') no-repeat center left;

}

.bm_tick ul {

margin-left: 50px;

list-style: none!important

}

.bm_tick ul li {

list-style-type: none;

padding: 5px 5px 5px 30px;

background: #fff url('http://www.yourdomain.com/images/tick.png') no-repeat center left;

}

Alter the margin and padding as required.

WordPress Shortcode

Copy and paste the following into your custom functions file.

<?php

Styling WordPress Lists with CSS

http://www.beliefmedia.com/wordpress-lists

function beliefmedia_custom_list($atts, $content = null) {

$atts = shortcode_atts(array(

'type' => 'tick'

), $atts);

return '<div class="bm_' . $atts['type'] . '">' . $content . '</div>';

}

add_shortcode('bmlist', 'beliefmedia_custom_list');

Usage

To style the list, wrap your list in the appropriate shortcode. To render tick list items, use:

[bmlist type="tick"]

<ul>

<li>This is item one</li>

<li>This is item two</li>

<li>This is item three</li>

</ul>

[/bmlist]

To render cross list items, use:

[bmlist type="cross"]

<ul>

<li>This is item one</li>

<li>This is item two</li>

<li>This is item three</li>

</ul>

[/bmlist]

The code can easily be modified to include whatever icon you like, and create unlimited types of lists.

Download

Title: Styling WordPress Lists with CSS
Description: Styling WordPress Lists with CSS. Requires a custom functions and CSS file. Plugin forthcoming.
Download • Version 0.2, 7.6K, zip, Category: WordPress Shortcodes