RBA Cash Rate: 4.35% · 1AUD = 0.67 USD · Inflation: 4.1%  
Leading Digital Marketing Experts</strong | 1300 235 433 | Aggregation Enquires Welcome | Book Appointment
Example Interest Rates: Home Loan Variable: 5.69% (5.89%*) • Home Loan Fixed: 5.39% (5.84%*) • Fixed: 5.39% (5.84%*) • Variable: 5.69% (5.89%*) • Investment IO: 5.69% (6.19%*) • Investment PI: 5.55% (6.02%*)

Styling WordPress Lists with CSS

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.

1
.bm_cross ul {
2
 margin-left: 50px;
3
 list-style: none!important
4
}
5
 
6
.bm_cross ul li {
7
 list-style-type: none;
8
 padding: 5px 5px 5px 30px;
9
 background: #fff url('http://www.yourdomain.com/images/cross.png') no-repeat center left;
10
}
11
 
12
.bm_tick ul {
13
 margin-left: 50px;
14
 list-style: none!important
15
}
16
 
17
.bm_tick ul li {
18
 list-style-type: none;
19
 padding: 5px 5px 5px 30px;
20
 background: #fff url('http://www.yourdomain.com/images/tick.png') no-repeat center left;
21
}

Alter the margin and padding as required.

WordPress Shortcode

Copy and paste the following into your custom functions file.

1
<?php 
2
/*
3
 Styling WordPress Lists with CSS
4
 http://www.beliefmedia.com/wordpress-lists
5
*/
6
 
7
function beliefmedia_custom_list($atts, $content = null) {
8
 
9
  $atts = shortcode_atts(array(
10
    'type' => 'tick'
11
  ), $atts);
12
 
13
 return '<div class=&quot;bm_' . $atts['type'] . '&quot;>' . $content . '</div>';
14
}
15
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

■ ■ ■

 
Download our complimentary 650-page guide on marketing for mortgage brokers. We'll show you exactly how we generate billions in volume for our clients.
Finance Guide, Cropped Top and Bottom
  Timezone: 1 · [ CHANGE ]

RELATED READING

Like this article?

Share on Facebook
Share on Twitter
Share on Linkdin
Share on Pinterest

Leave a comment