+- MyBB Codes (http://www.mybbcodes.com)
+-- Forum: Mods Database (/forumdisplay.php?fid=4)
+--- Forum: Tutorials for 1.4.x (/forumdisplay.php?fid=29)
+--- Thread: How to create ballons talking text... (/showthread.php?tid=643)
How to create ballons talking text... - exdiogene - 12-22-2009 10:18 PM
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 :
<iframe src="Tutorials/Bubble.html" width="716" height="360"></iframe>
Here are the two images used for this example :
<div style="background-color:#806000;width:700px; padding:8px;"><img src="Tutorials/Bubble.gif" width="700">
<img src="Tutorials/BubbleCenter.gif" width="700"></div>
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...
RE: How to create ballons talking text... - Chandy - 03-19-2010 01:57 AM
nice tutorial man,ty
RE: How to create ballons talking text... - Bane95 - 04-24-2010 02:37 AM
very nice, thanks
RE: How to create ballons talking text... - pumas09 - 01-18-2011 12:36 AM
thanks and nice tut!
RE: How to create ballons talking text... - JonP - 01-31-2011 11:33 AM
This is cool but where does the html go?
RE: How to create ballons talking text... - exdiogene - 01-31-2011 11:43 AM
(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.
RE: How to create ballons talking text... - _Un!corn - 08-08-2011 09:13 AM
hm.. Nice Tutorial Thanks
