WordPress 2.5 Tip: Oh Those Pesky Bullets Just Won't Line Up!!

I don't know about you, but I like consistency when I write my blog posts. 

I take the view that my blog is like my "shop front" and I like things to look neat and tidy. 

Now, before WordPress 2.5, I and the other Semiologic Pro users were blessed with a WYSIWYG editor that the developer, Denis de Bernardy customised and, I loved it.  The new text editor that comes with WordPress 2.5 is okay but in my view, it's feels like we've been relegated to a 3rd division WYSIWYG editor …

There's no table icon, no highlight, no font size change and no font style change and what's worse, they have so say streamlined the HTML coding but in my view, it's a headache!  Changes to the HTML code just don't always stick and the text editor seems to have a mind of it's own.

I've worked out how to make some of the changes but on one of my blogs, I put the entire page HTML code in "Notepad" (not Wordpad) and each time I want to make a change, I simply update the Notepad document and copy and paste the code into the text editor.

I know … fine if you know and understand HTML!

Well, each time I come across one of those pesky little issues, I'll let you know about it and, since I've just had to tackle one, I thought I'd create the first of the blog post series …

This one relates to those pesky bullets that just won't line up!!

I don't want my bullets to look all sqashed up as though I have to pay for each pixel space on my blog post … I want my reader to see some white space around each bullet point so it doesn't look like this:

• bullet one
• bullet two
• bullet three

So, in times past, with the old WYSIWYG editor, you could simply go to the end of each bullet, hold down the shift key and press enter … not any more.

So what about going to the html code and adding <p> … nope, doesn't always work.

But I want my bullets to look like this:

• bullet one 
• bullet two 
• bullet three 

So, what did I do?

Okay, here is the original code:

 <ul>
 <li>bullet one</li>
 <li>bullet two</li>
 <li>bullet three</li>
</ul>

And by just adding </span> at the end of each bullet like so:

<ul>
 <li>bullet one</li></span>
 <li>bullet two</li></span>
 <li>bullet three</li></span>
</ul>

you get an extra line space between each bullet.

You do have to be in "code view" to make these changes - i.e. you have to select the HTML tab on the text editor so you expose the source code.  If you're not at all familiar with HTML, I would suggest finding some tutorials online before you tackle this … I have actually written a HTML Code Guide For Bloggers but not published it yet … I know, gotta get my skates on!

Anyway, one more thing, generally when you make changes in code view by clicking on the html tab of the text editor, click save before switching back to the visual tab … the editor has a habit of doing strange things and you may find your code messed up.

Hope this little tip saves you from tearing your hair out!

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!