One thing I noticed on a few movable type blogs was they had customized comment bubbles at the bottom of their pages like this one. I thought that this was much easier on the eyes and was wondering if perhaps there was a plug-in that people were using to get this effect. I looked around and found nothing. I realized it must not be that hard to edit the CSS to do this and it wasn't.

So here is what you will need.

download these images:

this one




and this one



You are going to want to copy these images to where your screen.css file resides. You can find out where this is by looking in the source of your entry page and following the trail to find out where the css file is. It may link to a different .css file that imports the screen.css file. Find out where that is and then copy these images into that directory.

After you have done this you are going to want to add a couple lines of code to your .css file.


.comment .comment-header { background: #fff url(entry-comment-bg-bot.gif) no-repeat 0 0; padding: 8px 0 0 25px; }

.comment-content { background: #eeeeea url(entry-comment-bg-top.gif) no-repeat 0 0; padding-top: 5px;}


Depending on which style template you are using you may need to make sure that the comment boxes are not being changed in the base .css file. Typically this should work on its own as is.

Now if you refresh your page with your comments you should see the comment box, but does it look like this?




That is because the default comment template displays the person who wrote the comment above the bubble. We want the person who wrote the comment below instead so we need to move some of the document tags around. Here is what the tags should look like.


Text File with Comments Template Code up to where Footer Begins

 If you replace everything in your comments template up to where the footer begins with the code inside the referenced text file, you should get nice looking comment bubbles like the test one at the bottom of this page. Lastly you may need to edit the comment images themselves to fit on your screen. I custom made mine to fit to the width of my blog. If you have any questions let me know. Thanks, Matt