Speech Bubble in Posts

[Ahmed]

If you would like to repost this code on your own forum, scroll down to the second post for more info.

This code will put post text in a speech bubble, the same code is used here at Bebop Labs.

Preview:
ahmedasad.com/pbresources/codes/images/speechbubblepreview.png

You will need to download this image (right click > save image as):


If you want to use a different color for the speech bubble, the arrow color will need to correspond. Create a similar arrow as the one above using the desired color (I suggest an image size of 14x14). Feel free to request an arrow color if you do not know how to create the image yourself.

---

Copy and paste into Global Header:
<style type="text/css">
.speechbubble {
color: #000000; /* Text color */
background-color: #FFFFFF; /* Speech bubble color */
padding: 20px;
}
.arrowpos {
position: relative;
top: 8px; /* Arrow positioning, no need to edit */
}
</style>

---

Copy and paste into Global Footer:
<script type="text/javascript">
<!--
/*
Speech Bubble in Posts by Ahmed
Feel free to redistribute this code
Visit the link below for repost information
bit.ly/ov5nvd
*/

//Speech arrow url
var arrow = 'URL';

var XI=document.getElementsByTagName('td')
for (k=0;k<XI.length;k++) {
if (XI[k].className.match(/windowbg/i) && XI[k].width=="80%" && XI[k].height=="100%" && XI[k].align == "left"){
XI[k+4].getElementsByTagName("HR")[0].style.display = "none";
XI[k+4].innerHTML = "<table width='100%' cellpadding='0' cellspacing='0'><tr><td valign='top' width='1%'><BR><img src='"+arrow+"' class='arrowpos'></td><td width='99%' class='speechbubble'>"+XI[k+4].innerHTML+"</td></tr></table>";
}
}
//-->
</script>

---

Enjoy!

[Ahmed]

You're more than welcome to repost this resource at your forum. Just a couple of guidelines:
1. Do not claim as your own
2. You may only repost the text below, do not add or remove anything.


Speech Bubble in Posts
by Ahmed
http://beboplabs.proboards.com

Description:
This code will put post text in a speech bubble.

Preview:
http://ahmedasad.com/pbresources/codes/images/speechbubblepreview.png

You will need to download this image, do not hotlink! (right click > save image as):
[img]http://ahmedasad.com/pbresources/codes/images/speecharrow.png[/img]

If you want to use a different color for the speech bubble, the arrow color will need to correspond. Create a similar arrow as the one above using the desired color (I suggest an image size of 14x14).

[hr]
Copy and paste into [b]Global Header[/b]:
<style type="text/css">
.speechbubble {
color: #000000; /* Text color */
background-color: #FFFFFF; /* Speech bubble color */
padding: 20px;
}
.arrowpos {
position: relative;
top: 8px; /* Arrow positioning, no need to edit */
}
</style>

[hr]
Copy and paste into [b]Global Footer[/b]:
<script type="text/javascript">
<!--
/*
Speech Bubble in Posts by Ahmed
Feel free to redistribute this code
Visit the link below for repost information
http://bit.ly/ov5nvd
*/

//Speech arrow url
var arrow = 'URL';

var XI=document.getElementsByTagName('td')
for (k=0;k<XI.length;k++) {
if (XI[k].className.match(/windowbg/i) && XI[k].width=="80%" && XI[k].height=="100%" && XI[k].align == "left"){
XI[k+4].getElementsByTagName("HR")[0].style.display = "none";
XI[k+4].innerHTML = "<table width='100%' cellpadding='0' cellspacing='0'><tr><td valign='top' width='1%'><BR><img src='"+arrow+"' class='arrowpos'></td><td width='99%' class='speechbubble'>"+XI[k+4].innerHTML+"</td></tr></table>";
}
}
//-->
</script>

[hr]
Enjoy! :D

[Lyss]

Ah, speech bubbles, how I adore thee~ I'll experiment with the speech bubble arrow colours.

Thanks for the code |D Although I do think the

[hr]
Enjoy! :D

part is unnecessary. |'D

[/sup]

[marshmallow ツ]

Hope more people see that you have released this, I'm getting accused of ripping.
Anyway, awesome code!