Comments Speech Box

Keywords:

CSS
Drupal

25 Apr 2007

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

/* NZ Web Hosting - www.nzwhost.com 
 * Comments Speech Box Demo
*/
.nzwh-wrapper {
  color: #696969;
  font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, Verdana, sans-serif;
  font-size: 0.9em;
  font-weight: normal;
  margin: 20px 0 20px 0;
}
.nzwh-wrapper .rounded-box {
  margin: 0;
  padding: 0;
  border: 1px solid #ccc;
  background-color: #fffaf0;
  font-size: 0.9em;
}
.nzwh-wrapper .lt {
  background: url(images/lt.gif) 0 0 no-repeat;
  position: relative;
  top: -1px;
  left: -1px;
}
.nzwh-wrapper .rt {
  background: url(images/rt.gif) 100% 0 no-repeat; 
  position: relative;
  left: 2px;
}
.nzwh-wrapper .lb {
  background: url(images/lb.gif) 0 100% no-repeat;
  position: relative;
  left: -2px;
}
.nzwh-wrapper .rb {
  background: url(images/rb.gif) 100% 100% no-repeat;
  position: relative;
  top: 2px;
}  
.nzwh-wrapper .comment {
  padding: 10px;
  text-align: left;
  margin: 0;
}
.nzwh-wrapper .arrow {
  background: url(images/arrow.gif) 0 0 no-repeat;
  top: -1px;
  left: 30px;
  height: 15px;
  position: relative;
  }
.nzwh-wrapper h2.title {
  border: none;
  font-size: 1.2em;
  font-weight: bold;
  color: #3e565f;
  margin: 0;
  padding: 0;
  }
.nzwh-wrapper .author {
  font-size: 1em;
  margin-left: 28px;
  display: inline;
  }

The Images