adding chatterbox Options

[xenosaga]

can someone help me add a chatterbox in the left side of my module..the extra module?

<!-- begin code provided by createblog.com --><br /><DIV style="margin-top: -15px; margin-left: 100px; padding-bottom: 0px"><br /><p><map name="FPMap0"><br /><area href="http://www.xanga.com/signin.aspx" shape="rect" coords="35, 52, 74, 65"><br /><area href="http://www.xanga.com/claf" shape="rect" coords="32, 63, 102, 76"><br /><area href="http://www.xanga.com/Private/SubscribeTo.aspx?user=zer_wil_de_mach" shape="rect" coords="34, 75, 80, 86"><br /><area href="http://www.xanga.com/Private/subs.aspx" shape="rect" coords="32, 86, 106, 98"><br /><area href="http://www.xanga.com/Private/profilebasic.aspx" shape="rect" coords="32, 96, 68, 110"><br /><area href="http://www.xanga.com/guestbook.aspx?user=zer_wil_de_mach" shape="rect" coords="34, 109, 73, 120"><br /><area href="http://www.xanga.com/logout.aspx" shape="rect" coords="34, 119, 80, 131"><br /><area href="http://www.createblog.com" shape="rect" coords="33, 129, 94, 143"></map><br /><img src="http://img.photobucket.com/albums/v667/zer_wil_de_mach/kosmo.jpg" usemap="#FPMap0" width="767" height="1062"></p><br /><br /></body><br /><br /></html><br /><div style="overflow: auto; width: 205px; height: 653px; margin-top: -570px; margin-left: 23px;"><br /><br /><b>About Me</b><br /><br>Name: Donna<br><br />Age: 15<br>Birthday: August 15 1989^th<br><br />Hobbies: playing games, going online, playing ddr =P, and others as long as its not boring<Br><br />Expertise: being myself!<p><br /><br /><b>Misc.</b><br><br /></div><br /><br /><!-- begin code provided by createblog.com --><br /><div style="<br />overflow: auto;<br />width: 477px;<br />height: 528px;<br />margin-top: -642px;<br />margin-left: 264px;"> <br /><style type="text/css"><br />.#rblEprops{display:none;}<br />#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops <br />/* width of the comment page */<br />{width:245px;}<br />.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer <br />{display: none;} <br /></style><br /><style type="text/css"><br />/* Name of Your Skin - By You*/<br />body <br />background-image:url();<br />background-repeat: repeat-x;<br />background-color: #C7DFF7;<br />scrollbar-face-color: #BFDFFF;<br />scrollbar-shadow-color: #C7DFF7;<br />scrollbar-highlight-color: #fffFFF;<br />scrollbar-3dlight-color: #BFDFFF;<br />scrollbar-darkshadow-color: #fffFFF;<br />scrollbar-track-color: #C7DFF7;<br />scrollbar-arrow-color: #ffffff;}<br /><br />/* edits the date */<br />div.blogheader, .caption <br />{background-image: url();<br />background-repeat:no-repeat;<br />background-position:center;<br />font-family: FONT FAMILY;<br />text-transform:none;<br />font-size:#px;<br />line-height:#px;<br />font-weight:normal;<br />color:#000000;<br />letter-spacing:2px;<br />background-color:#COLOR CODE;<br />text-align:center;<br />border:1px solid #ffffff;}<br /><br />.blogbody b, .standard b, p b, strong {<br />/* edits bolded text in your entry */<br />font-weight: bold;<br />color: #000000;}<br /><br />input, select, textarea, iframe.htmleditor, .textfield, .button {<br />/* this edits the buttons, dropdowns, etc. */<br />border: 2px solid #80BFFF;<br />font:normal #px FONT FAMILY;<br />background-color: #transparent;<br />font-color:#000000;}<br /><br /> table.footer TD {<br />/* this makes the footer at the bottom centered */<br />/* leave it alone unless you know what to do*/<br />text-align: center;}<br /><br />table.left th {<br />/* on your menu module, this edits the title part of it */<br />/* like BLOGRINGS, POSTING CALENDAR, etc */<br />background-image: url();<br />background-color:none;<br />color: #000000;<br />font: bold 10pt FONT FAMILY;<br />text-transform: none;<br />text-align:center;<br />border: #80BFFF 2px solid;}<br /> <br />table.left { <br />/* this edits the menu module */<br />width:180px;<br />color:000000;<br />background-color:#COLOR CODE;<br />BORDER: #80BFFF 2px solid;}<br /><br />font,td,p,xmp<br />{color:#000000;<br />font-face: FONT FAMILY;<br />font-weight:normal;<br />font-size:10pt;<br />text-align:justify;}<br /><br />table.blogbody tr td { <br />/* this edits the left margin of blog */ <br />width:0px; <br />padding-left: 0px;} <br /><br />table.blogbody {<br />/* this edits the other the place where the  blog is */<br />background-color:transparent;<br />family-font: FONT FAMILY;<br />BORDER: #80BFFF 2px solid;<br />width:470px;} /* <-- The width for this should be around 5-15 pixels less then the width for your blog's div layer. */ <br /><br />a:link<br />{line-height: 10pt; <br />font-family: FONT FAMILY;<br />font-weight:normal; <br />color:#COLOR CODE; <br />text-transform:none;<br />font-size:10pt; <br />cursor:crosshair;}<br /><br />a:active<br />{font-family: FONT FAMILY; <br />color:#000000; <br />text-transform:none;<br />font-size:10pt; <br />cursor:crosshair;}<br /><br />a:visited<br />{font-family: FONT FAMILY; <br />color:#000000; <br />text-transform:none;<br />text-decoration:strikeout;<br />font-size:10pt;<br />cursor: crosshair;}<br /><br />A:hover {font-family:FONT FAMILY;<br />color:#000000;<br />text-transform: uppercase; <br />cursor: crosshair; <br />font-weight:bold;<br />font-size:10pt}</style><br /><br /><!-- end code provided by createblog.com --><br /><!-- end code provided by createblog.com -->

here's the xanga link of the one im testing my skin

[xenosaga]

how about the cbox (new one) where you can change color of your cbox...i tried that but i wont work..what kind of chatterbox works with it