How to create ballons talking text...

[exdiogene]

Post HTML Suite Plugin's DEMO

*** If you are looking for an affordable hosting with great support quality, click here! ***

This tutorial will show you how easy it can be to show speech bubbles.

The method used is a table with different CSS backgrounds using only two small images. Here is an example of what you can do to display your text :



Here are the two images used for this example :

The CSS content is this :

PHP Code:[Highlight]

.table_bubble{
  background-color : transparent;
  padding:0;
  margin:0;
  spacing:0;
  border: none;
}
.table_bubble_top_left{
  background : transparent url(Bubble.gif) no-repeat left top;
  padding-top: 32px;
  padding-left: 32px;
  padding-bottom: 8px;
  font-weight: bold;
}
.table_bubble_top_right{
  background: transparent url(Bubble.gif) no-repeat right top;
  width: 40px;
}
.table_bubble_center_left{
  background : transparent url(BubbleCenter.gif) left top;
  padding-left: 32px;
  color:#0000ff;
}
.table_bubble_center_right{
  background : transparent url(BubbleCenter.gif) right top;
  width: 40px;
}
.table_bubble_bottom_left{
  background : transparent url(Bubble.gif) no-repeat left bottom;
  height : 48px;
}
.table_bubble_bottom_right{
  background: transparent url(Bubble.gif) no-repeat right bottom;
  width: 40px;
} 


The HTML content is this :

PHP Code:[Highlight]

<table class="table_bubble" cellpadding="0" cellspacing="0">
 <tr>
  <td class="table_bubble_top_left">Speech bubble sample #1</td>
  <td  class="table_bubble_top_right"></td>
 </tr>
 <tr>
  <td  class="table_bubble_center_left">
   You can have a very long line of text displayed with no interruptions...
  </td>
  <td class="table_bubble_center_right"></td>
 </tr>
 <tr>
  <td class="table_bubble_bottom_left"></td>
  <td class="table_bubble_bottom_right"></td>
 </tr>
</table>
<table class="table_bubble" cellpadding="0" cellspacing="0">
 <tr>
  <td class="table_bubble_top_left">Speech bubble sample #2</td>
  <td  class="table_bubble_top_right"></td>
 </tr>
 <tr>
  <td  class="table_bubble_center_left">
   Or you can<br / >
   have multiple<br / >
   lines over<br / >
   each other...
  </td>
  <td class="table_bubble_center_right"></td>
 </tr>
 <tr>
  <td class="table_bubble_bottom_left"></td>
  <td class="table_bubble_bottom_right"></td>
 </tr>
</table> 


As you can see this is quite simple to do, the trick is only use a 2 columns 3 rows table!

More explanations will come soon...

[Chandy]

nice tutorial man,ty

[Bane95]

very nice, thanks

[pumas09]

thanks and nice tut!

[JonP]

This is cool but where does the html go?

[exdiogene]

(01-31-2011 11:33 AM)JonP Wrote:  This is cool but where does the html go?

You can put the HTML in any templates, as an example, use it in the post template to display the $message variable.

[_Un!corn]

hm.. Nice Tutorial Thanks