Current time: 08-14-2022, 08:34 AM Hello There, Guest! (LoginRegister)


Announcement
We have the biggest collection of MyBB Plugins here on the Net. We have currently 175+ MyBB Exclusive Plugins, 80+ MyBB Compatible MyCodes and 16+ MyBB 1.4.x Themes (Some are still under construction...) Thus, we provide you the largest MyBB Stuff on the net including tutorials. Stay with us, you will find out some more to come.
Now you can easily create your own buttons set for MyBB! Click here to have a look...
*** You cannot do your registration behind any Proxies anymore! ***
Welcome Guest[44.200.171.74], connected from San Diego, California United States
Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
How to create ballons talking text...
12-22-2009, 10:18 PM
Post: #1
How to create ballons talking text...
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;
  
bordernone;
}
.
table_bubble_top_left{
  
background transparent url(Bubble.gifno-repeat left top;
  
padding-top32px;
  
padding-left32px;
  
padding-bottom8px;
  
font-weightbold;
}
.
table_bubble_top_right{
  
backgroundtransparent url(Bubble.gifno-repeat right top;
  
width40px;
}
.
table_bubble_center_left{
  
background transparent url(BubbleCenter.gifleft top;
  
padding-left32px;
  
color:#0000ff;
}
.
table_bubble_center_right{
  
background transparent url(BubbleCenter.gifright top;
  
width40px;
}
.
table_bubble_bottom_left{
  
background transparent url(Bubble.gifno-repeat left bottom;
  
height 48px;
}
.
table_bubble_bottom_right{
  
backgroundtransparent url(Bubble.gifno-repeat right bottom;
  
width40px;


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...

exdiogene's signature MyBBCodes.com administrator
Cool " It is not what you know that matters, it is what you do or do not do!"
Visit this user's website Find all posts by this user
Quote this message in a reply
03-19-2010, 01:57 AM
Post: #2
RE: How to create ballons talking text...
nice tutorial man,ty

Chandy's signature
Visit this user's website Find all posts by this user
Quote this message in a reply
04-24-2010, 02:37 AM
Post: #3
RE: How to create ballons talking text...
very nice, thanks

Bane95's signature http://www.yuforum.org
Visit this user's website Find all posts by this user
Quote this message in a reply
01-18-2011, 12:36 AM
Post: #4
RE: How to create ballons talking text...
thanks and nice tut!

pumas09's signature
Visit this user's website Find all posts by this user
Quote this message in a reply
01-31-2011, 11:33 AM
Post: #5
RE: How to create ballons talking text...
This is cool but where does the html go?

JonP's signature THE BIGGEST COLLECTION OF PLUGINS THEMES AND MYCODES FOR MYBB
Visit this user's website Find all posts by this user
Quote this message in a reply
01-31-2011, 11:43 AM
Post: #6
RE: How to create ballons talking text...
(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.

Wink

exdiogene's signature MyBBCodes.com administrator
Cool " It is not what you know that matters, it is what you do or do not do!"
Visit this user's website Find all posts by this user
Quote this message in a reply
08-08-2011, 09:13 AM
Post: #7
RE: How to create ballons talking text...
hm.. Nice Tutorial Thanks Smile

_Un!corn's signature
Visit this user's website Find all posts by this user
Quote this message in a reply
0 member(s) viewed this thread in the last 365 days :
Post Reply 


Was This Thread Useful ?
Please Link To Us
URL
BBCode
HTML

Forum Jump:

 
New To Site ?
Some Useful Links
  • Help

  • You Might Need To Register

  • Forum Statistics

  • Mark All Forums Read

  • Forum Staff

  • Log Out
  • Contact Us

  • Mybbcodes

  • Return to Top

  • Return to Content

  • Lite (Archive) Mode

  • RSS Syndication
  • Powered By MyBB, © 2002-2022 MyBB Group.
    Golden Crown - Designed and Published by ghazal & exdiogene of MyBBCodes.
    Hosting provided by WWWHostingServer.com