Styling Custom Bullets in BP-Corporate Theme

Quick question guys. What would be the best way to go about adding custom bullets for individual posts and pages? The key here is that I don't want to use the custom bullets through out the whole blog, only on a list by list basis. Other times, the default bullets are fine.

A typical use case for me is as follows... I have a blog page that I'm using as a squeeze page for a newsletter. The page contains two lists. "List 1" lists the key benefits, and I'd like to use "greencheck.png" as the bullet icon. "List 2" lists the shortcomings of other methods, and I'd like to use "redx.png" as the bullet icon.

Basically, I'd like to define a couple of CSS classes for lists (in my child theme, of course). Then, whenever I needed to use one of the two custom images, I could just go into the HTML tab of my page editor and replace:

<li>Key Benefit Number 1</li>
<li class="greencheck">Key Benefit Number 1</li>

I'm just not sure how or where to properly define the classes and haven't had much luck with trial and error. Of course, if there is a better way to accomplish the same thing, please let me know.

The blog is running BuddyPress Corporate 1.3.8 on WordPress 3.2.1.

Many Thanks

  • Chris
    • The Bug Hunter

    If you are going to use a custom style only occasionally, and are happy changing the HTML code manually, probably the best way.

    Otherwise there might be a plugin that adds that custom style to the CKeditor. I'll have a look...

  • Mason
    • DEV MAN’s Sidekick


    Yeah, I'd recommend the child theme approach like what you're thinking.

    you'd then create new CSS classes for the list items and add it to your child style.css. Probably something like:

    li.greencheck { list-style-image: url("images/greencheck.png"); }
    li.redx { list-style-image: url("redx.png"); }

    You'll have to modify that further, but then the HTML replacement you're referring to should work as expected.

    Does this help? Will probably take some trial/error to get exactly what you want. I'd recommend creating a post with all 3 different list classes (default, green, and red) and publish it. Then you can easily go back and forth between the site and the code until you have what you want.

    Also, if you've never checked into it before. Firebug for Firefox is your best friend here.


    • Site Builder, Child of Zeus

    @bigonroad - Thanks for sharing that link. I followed the thread to a plugin call TinyMCE Advanced. It didn't solve my problem with the bullets, but it's a really cool plugin with some extra styling options I needed.

    @mason - Thanks for the CSS styling tip. It worked like a charm! In just needed to add the "!important" tag.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.