Speech Bubble in Posts (279 views)

[Zaxinou]

Speech Bubble in Posts
by Ahmed
beboplabs.proboards.com

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

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

You will need to download this image, do not hotlink! (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).

---

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!