Want a cool chatbox like mine?

[RockHard]

You can get the chatbox I'm using from yellbox which is pretty plain on it's own & by comparison you can see I spruced up the code quite a bit. They have a free version which only has a few less features but otherwise works about the same. If you're savvy with coding, try playing around with my code below & style it to your liking or if you need some help, I don't mind helping. I can even code it live while you watch.

1st the css:

button:hover { box-shadow: inset 0 0 0 2px #000, inset 0 0 2px 3px #03AC00 }

.msg { background:#080808; outline: 2px solid #000; font-family:arial;font-size:13px; color:#4583FF; border: 1px solid#807060;border-radius:3px; padding:7px  }
.sub { background:#080808; outline: 2px solid #000; font-family:arial; font-size:13px; color:#4583FF; border: 1px solid#807060; border-radius:3px; padding: 7px }
.sub2 { background:#080808; outline: 2px solid #000; font-family:arial; font-size:13px; color:#4583FF; border:1px solid#807060; border-radius:3px; padding:7px }
.send1 { background:#080808; outline:2px solid #000; font-family:arial;font-weight:bold; font-size:13px; color:#4583FF; border:1px solid#807060; border-radius:3px; padding-bottom:3px; width:29%; height:35px }
.send1:hover {background:#000;font-family:arial;font-weight:bold; font-size:13px; color:#4583FF;}

* the next 2 lines can be deleted as you likely won't use them *
.slot { margin-bottom:-8px }
.dime { display:inline-block; background:#080808; border: 1px solid #807060; outline: 2px solid #000; border-radius:3px; padding: 8px; padding-bottom:9px; font-family:arial;font-size:13px;font-weight:bold; color:#4583FF }

.yellbox { background:#111111;
background-image:url('http://use your background image here.jpg');
display:inline-block;
width:850px;
box-shadow:0 0 0 2px #000, 0 0 0 6px #3E3422, 0 0 8px 12px #000;
padding:3px;
padding-top:14px;
padding-bottom:8px;
padding-left:3px;border-radius:1px;
border:6px solid #3E3422\9;
}

.yellbox iframe { height:120px;
background-color:#0b0b0b;
padding-top:12px;
padding-bottom:6px;
padding-left:8px;
padding-right:8px;
border:3px solid#3E3422;
border-bottom:4px solid#3E3422;
box-shadow:0 0 0 2px #000;
border-radius:3px;
width:96.1%
}

.yellbox input { width:17% }

Now the html:

<div style="text-align:center">
<div class="yellbox">
<script src="http://www.yellbox.com/ybscript_enhanced.js" defer="defer"></script>
<script language="Javascript" type="text/javascript" src="http://www.yellbox.com/ybscript_enhanced.js" defer="defer"></script>
<iframe name="ybframe" frameborder="1" allowtransparency="false" src="http://www.yellbox.com/yellbox.php?name=your user id here"></iframe>
<form action="http://www.yellbox.com/addmessage.php" method="post" target="ybframe" name="yellform" style="margin: 4px;">
<input type="hidden" name="sub_username" value="your user id here" />
<p style="font-size:7px; font-family:arial; color:#000; font-weight:normal;" align="center">.</p>
<script language="Javascript" type="text/javascript">
 var name = get_cookie('yellboxname');
 if(name == null || name == 'null' || name == '')name = 'Name';
 function set_cookie(){ name = document.yellform.sub_name.value; document.cookie = "yellboxname=" + escape(name) + "; expires=26/03/2088 00:00:00"; }
 function get_cookie(cookie_name){ var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' ); if(results)return(unescape( results[2])); else return null; }
 document.write('<input name="sub_name" span class="sub" value="' + name + '" maxlength="30" onfocus="if(this.value == \'Name\')this.value = \'\';" />');
</script> 
<noscript>
<input name="sub_name" span class="sub2" value="Name" maxlength="30" onfocus="if(this.value == 'Name')this.value = '';" />
</noscript>
<input name="sub_message" span class="msg" style="width:75.5%" value="Message" maxlength="400" onfocus="if(this.value == 'Message')this.value = '';" /><br />
<p style="font-size:14px; font-family:arial; color:#000; font-weight:normal;" align="center">.</p>
<button onclick="set_cookie(); return clearMessageBox();" span class="send1">Hit Enter or Click Here to Send Msg</button>

* the following code is my own embellishment you likely won't want & can be cut up to the closing form tag *

<span style="display:inline-block;box-shadow:0px 0px 2px 3px #000"><img class="slot" src="http://my coin slot image you can eliminate.gif"></span>
     <span class="dime"><span style="font-family:verdana"><---</span> Drop a dime in slot for postage  this line you can do away with as well
</span></form></div></div>