Chatbox v 3(★★★)Messenger Style

[br]Css

 .chat-right {background-color: #DFF0D8;display:inline-block; line-height:1.3em;width:55%;float:right;margin: 5px; padding: 4px; position: relative;text-align:right; border: 1px solid #D6E9C6;}.chat-right:after, .chat-right:before{right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .chat-right:after {border-color:  transparent  transparent transparent #DFF0D8; border-style: solid; border-width: 7px; position: absolute; top: 3px; right: -12px; }.chat-right:before {border-color: transparent  transparent transparent #D6E9C6; border-style:solid; border-width: 7px; position: absolute; top: 3px; right: -14px}.chat-left {background-color: #eee; display: inline-block; line-height:1.3em; margin: 5px; padding: 4px; position: relative;text-align:left;border: 1px solid #ddd;width:55%;} .chat-left:after, .chat-left:before{right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }.chat-left:after {border-color: transparent  #eee transparent transparent; border-style: solid; border-width: 7px; position: absolute; top: 3px; left: -12px; }.chat-left:before {border-color: transparent  #ddd transparent transparent; border-style:solid; border-width: 7px; position: absolute; top: 3px; left: -14px}#clear{clear: both; display: block}.dash {border-bottom:1px dashed #fff; border-top: 1px dashed #ccc;margin-bottom:3px; margin-top:3px;}#padd{padding:5px;background-color:#fff;}.tpcl {padding: 5px;color: #000; text-shadow:0 1px 0 rgba(255,255,255,0.5);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;}.chat1:hover{background:#fdfdfd;}.chat1:focus{color:green} .c{font-weight:bold;background-color:#f6f6f6;border-bottom:1px solid #ddd; }

Create a Simple Forum. :pNote The Forum’s Id Number.& Past The Code

 </p><br />
<div id="chat" class="mainblok"><br />
<div class="nfooter">Chat Box </div><br />
<div id="unlogged" class="tpcl chat1" align="center"><a href="/login_site.">To Make Chat Required Login </a></div><br />
<div id="logged" class="tpcl chat1" style="border-bottom:1px solid #eee"> :forum-111541419/form:</div><br />
<div id="padd">:forumlist:f=111541419, l=1,t=--, s=:geti-chat(1):, ::</p><br />
<table cellpadding='0' cellspacing='0' width='100%'><br />
<td></td><br />
<td align='left' width='auto'><a href=''></p><br />
<div class='p'>:color-#888:%tname%:/color:</div><br />
<p></a></td><br />
</table><br />
<div class="tpcl chat-left"> :color-#666:<b>%text%</b>:/color:<br />:color-#888:%time%:/color: </div><br />
<p>:: :/forumlist::forumlist:f=111541419, l=1,t=--, s=:geti-chat(2):, ::</p><br />
<table cellpadding='0' cellspacing='0' width='100%'><br />
<td></td><br />
<td align='right' width='auto'><a href=''></p><br />
<div class='p'>:color-#888:%tname%:/color:</div><br />
<p></a></td><br />
</table><br />
<div class="tpcl chat-right"> :color-#666:<b>%text%</b>:/color:<br />:color-#888:%time%:/color: </div><br />






<p>:: :/forumlist::forumlist:f=111541419, l=1,t=--, s=:geti-chat(3):, ::</p><br />
<table cellpadding='0' cellspacing='0' width='100%'><br />
<td></td><br />
<td align='left' width='auto'><a href=''></p><br />
<div class='p'>:color-#888:%tname%:/color:</div><br />
<p></a></td><br />
</table><br />
<div class="tpcl chat-left"> :color-#666:<b>%text%</b>:/color:<br />:color-#888:%time%:/color: </div><br />
<p>:: :/forumlist::forumlist:f=111541419, l=1,t=--, s=:geti-chat(4):, ::</p><br />
<table cellpadding='0' cellspacing='0' width='100%'><br />
<td></td><br />
<td align='right' width='auto'><a href=''></p><br />
<div class='p'>:color-#888:%tname%:/color:</div><br />
<p></a></td><br />
</table><br />
<div class="tpcl chat-right"> :color-#666:<b>%text%</b>:/color:<br />:color-#888:%time%:/color: </div><br />
<p>:: :/forumlist::forumlist:f=111541419, l=1,t=--, s=:geti-chat(5):, ::</p><br />
<table cellpadding='0' cellspacing='0' width='100%'><br />
<td></td><br />
<td align='left' width='auto'><a href=''></p><br />
<div class='p'>:color-#888:%tname%:/color:</div><br />
<p></a></td><br />
</table><br />
<div class="tpcl chat-left"> :color-#666:<b>%text%</b>:/color:<br />:color-#888:%time%:/color: </div><br />
<p>:: :/forumlist::forumlist:f=111541419, l=1,t=--, s=:geti-chat(6):, ::</p><br />



<table cellpadding='0' cellspacing='0' width='100%'><br />
<td></td><br />
<td align='right' width='auto'><a href=''></p><br />
<div class='p'>:color-#888:%tname%:/color:</div><br />
<p></a></td><br />
</table><br />
<div class="tpcl chat-right"> :color-#666:<b>%text%</b>:/color:<br />:color-#888:%time%:/color: </div><br />
<p>:: :/forumlist:</p></div><br />
<div id='clr'></div><br />
<div class="tpcl chat1" style="border-top:1px solid #ccc" align="center"> <a title="Icons, Smiles &amp; Emotions Tpcl" href="">Icons</a> • <a title="Refresh or Reload to see Chat Box's Recent Activities" href="#chat">Refresh</a></div><br />
</div><br />
</div><br />
<p>

Change This Code’s Forum id to yours.Enjoy If this code be erorr please copty this code from→ (CoPy)