Comments Speech Box

Tags:

Extending on our previous example of styling a box with round corners by adding one additional small image and positioning with css our box is now a speech bubble with round corners.

We have provided all the CSS, HTML and Images to allow for easy duplication of this method.

As an added bonus for Drupal users we have also added a simple comments.tpl.php file to allow you to easily replace your current comments styling. Just add the CSS to your existing theme's style.css and create a new file called comments.tpl.php in your themes directory and paste the contents from our example.

Comment Title

This is a an extension of our box with round corners demo. This is just one example of how it might be used. We have added one additional small images for the speech bubble and positioned using CSS.

Comment submitted by me

The HTML
The CSS
The Images
left top image right top image right bottom image left bottom image arrow image

Drupal comment.tpl.php

Comment Example

Here is a real comment so that you can see how it looks!

Submitted by nzwhost on Wed, 2007-04-25 12:07.