Chances are if you just copy and pasted the code on page one you'll notice that your shoutbox well doesnt looked like one... Not to worry! All you have to do is to copy the code below and put it on top of your shoutbox.php file.
<style type="text/css">
<!--
#contentbox {
background: #E5E5E5;
padding: 5px;
width: 195px;
height: 200px;
overflow: auto; }
ul#shoutboxmessage {
margin: 0;
padding: 0;
list-style-type: none;
color: #000000;
font: normal 10px verdana,tahoma,arial; }
-->
</style>
You can obviously change the hex colors to your likings or the width and the height of the shoutbox. Two things you should not remove is the overflow and list-style-type property as they hold the shoutbox together.
It would be a good idea to put these files into one folder, you could then test if everything works. Say you put the files in a folder called "sb", all you have to do is go to http://www.yoursite.com/sb/shoutbox.php. If you want your shoutbox to be included in your site main page use PHP's include function.
<?php include("sb/shoutbox.php"); ?>
Use the code above where you want the shoutbox to display, just make sure the path is correct!
Since this shoutbox doesnt use frame if somone refresh the page right after post, the post will be duplicated, you could prevent this by using frames however you may have to do some editing on the script.
There are probably a few things you want to be added like clickable smileys or some other protection but this is pretty much you should be needing for quick and simple shoutbox.
