DVZ Shoutbox - pomoc w dobraniu stylów css

wersja skryptu MyBB: 1.6.11
adres forum: www.pda-lomza.tk
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu): Gamemania v2

Witajcie. Posiadam na forum styl Gamemania v2, i po prostu mam problem ze zrobieniem dobrego css dla shoutboxa DVZ.

Chciałbym aby shoutbox wyglądał tak jak wyglądał ChangUonDyU - Extra File Chatbox 3.6.0. Czyli tak:



Czyli po prostu cały styl został ściągnięty ze stylu forum. Nie chodzi mi o dosłowną kopię lecz o sam styl, czyli te brązowe tło, przyciski itp.

Tak wygląda szablon ChangUonDyU - Extra File Chatbox 3.6.0:

<table class="tborder" cellpadding="$theme[tablespace]" cellspacing="$theme[borderwidth]" border="0" width="100%">
<tr><td class="thead">$lang->fcb_title</td></tr>
<!-- EDITOR -->
<tr><td class="trow2">
<div id="fcb_smilieboxmain" style="display: none;">
    <div align="center">
        <input type="button" class="button" value="$lang->fcb_moresm" onclick="fcb_showsmilies();" />
        <input type="button" class="button" value="$lang->fcb_allsm" onclick="smiliepopup();" />
        <input type="button" class="button" value="$lang->fcb_close" onclick="fcb_hideshowsmiliebox();" />
    </div>
    <div id="fcb_smiliebox" align="center" style="margin-top: 3px; margin-bottom: 3px;"></div>
</div>
<form name="fcb_form" method="post" action="javascript:fcb_postshout();">
<input id="hmess" type="text" size="100" class="textbox" name="hmess" $fcb_disable />
<div style="margin-top: 2px;">
<input type="submit" class="button" value="$lang->fcb_shout" $fcb_disable />
<input style="font-weight: bold;" type="button" name="hbold" value="B" class="button" onclick="fcb_upstyle('b');" $fcb_disable />
<input style="font-style: italic;" type="button" name="hitalic" value="I" class="button" onclick="fcb_upstyle('i');" $fcb_disable />
<input style="text-decoration: underline;" type="button" name="hunderline" value="U" class="button" onclick="fcb_upstyle('u');" $fcb_disable />
<input type="button" value="$lang->fcb_smilies" onclick="fcb_showsmiliebox();" class="button" $fcb_disable />
<select onchange="fcb_upstyle('font');" name="hfont" $fcb_disable>
<option value="">$lang->fcb_font</option>
$fcb_fontlist
</select>
<select onchange="fcb_upstyle('color');" name="hcolor" $fcb_disable>
<option value="">$lang->fcb_color</option>
<!-- $fcb_colorlist -->
</select>

<input type="button" value="$lang->fcb_refresh" class="button" onclick="fcb_refresh();">
<input type="button" value="$lang->fcb_archive" class="button" onclick="archivepage();">
</div>
</form>
</td></tr>
<!-- END EDITOR -->

<tr><td class="trow1">

<iframe name="fcb_frame" src="$fcb_setting[changfcb_url]/index.php" frameborder="0" style="width: 100%; height: $fcb_setting[changfcb_height];"></iframe>

</td>
</tr>
</table>

<script language="JavaScript" type="text/javascript">
var textstyle = document.getElementById('hmess');

if (fcb_getCookie('fcb_b_userid{$mybb->user['uid']}').length > 0)
{
    document.fcb_form.hbold.value = fcb_getCookie('fcb_b_userid{$mybb->user['uid']}');
}
if (fcb_getCookie('fcb_i_userid{$mybb->user['uid']}').length > 0)
{
    document.fcb_form.hitalic.value = fcb_getCookie('fcb_i_userid{$mybb->user['uid']}');
}
if (fcb_getCookie('fcb_u_userid{$mybb->user['uid']}').length > 0)
{
    document.fcb_form.hunderline.value = fcb_getCookie('fcb_u_userid{$mybb->user['uid']}');
}
if (fcb_getCookie('fcb_font_userid{$mybb->user['uid']}').length > 0)
{
    document.fcb_form.hfont.value = fcb_getCookie('fcb_font_userid{$mybb->user['uid']}');
}
if (fcb_getCookie('fcb_color_userid{$mybb->user['uid']}').length > 0)
{
    document.fcb_form.hcolor.value = fcb_getCookie('fcb_color_userid{$mybb->user['uid']}');
}
fcb_upstyle_cookie();

function fcb_upstyle_cookie()
{
        if (document.fcb_form.hbold.value == 'B*')
        {
            textstyle.style.fontWeight = 'bold';
        }
        else
        {
            textstyle.style.fontWeight = 'normal';
        }

        if (document.fcb_form.hitalic.value == 'I*')
        {
            textstyle.style.fontStyle = 'italic';
        }
        else
        {
            textstyle.style.fontStyle = 'normal';
        }
        

        if (document.fcb_form.hunderline.value == 'U*')
        {
            textstyle.style.textDecoration = 'underline';
        }
        else
        {
            textstyle.style.textDecoration = 'none';
        }
        
    textstyle.style.fontFamily = document.fcb_form.hfont.value;
    textstyle.style.color = document.fcb_form.hcolor.value;
}


function fcb_upstyle(element)
{
    if (element == 'b')
    {
        if (document.fcb_form.hbold.value == 'B')
        {
            document.fcb_form.hbold.value = 'B*';
            textstyle.style.fontWeight = 'bold';
        }
        else
        {
            document.fcb_form.hbold.value = 'B';
            textstyle.style.fontWeight = 'normal';
        }
        
    }
    else if (element == 'i')
    {
        if (document.fcb_form.hitalic.value == 'I')
        {
            document.fcb_form.hitalic.value = 'I*';
            textstyle.style.fontStyle = 'italic';
        }
        else
        {
            document.fcb_form.hitalic.value = 'I';
            textstyle.style.fontStyle = 'normal';
        }
        
    }
    else if (element == 'u')
    {
        if (document.fcb_form.hunderline.value == 'U')
        {
            document.fcb_form.hunderline.value = 'U*';
            textstyle.style.textDecoration = 'underline';
        }
        else
        {
            document.fcb_form.hunderline.value = 'U';
            textstyle.style.textDecoration = 'none';
        }
        
    }
    else if (element == 'font')
    {
            textstyle.style.fontFamily = document.fcb_form.hfont.value;
    }
    else if (element == 'color')
    {
            textstyle.style.color = document.fcb_form.hcolor.value;
    }
    
    fcb_setCookie('fcb_b_userid{$mybb->user['uid']}', document.fcb_form.hbold.value);
    fcb_setCookie('fcb_i_userid{$mybb->user['uid']}', document.fcb_form.hitalic.value);
    fcb_setCookie('fcb_u_userid{$mybb->user['uid']}', document.fcb_form.hunderline.value);
    fcb_setCookie('fcb_font_userid{$mybb->user['uid']}', document.fcb_form.hfont.value);
    fcb_setCookie('fcb_color_userid{$mybb->user['uid']}', document.fcb_form.hcolor.value);
}

function fcb_setCookie(c_name,value)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+365);
document.cookie=c_name+ "=" +escape(value)+ ";expires="+exdate.toGMTString() + "path=$mybb->settings[cookiepath]";
}
function fcb_getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=");
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1; 
    c_end=document.cookie.indexOf(";",c_start);
    if (c_end==-1) c_end=document.cookie.length;
    return unescape(document.cookie.substring(c_start,c_end));
    }
else { return ""; }
  }

}

var chatboxkey = '$fcb_chatboxkey';
var huid = '{$mybb->user['uid']}';
var hgroupid = '{$mybb->user['usergroup']}';
var huser = "$fcb_musername";

function fcb_postshout()
{
        hmess = document.fcb_form.hmess.value;
        hcolor = document.fcb_form.hcolor.value;
        hfont = document.fcb_form.hfont.value;
        hbold = document.fcb_form.hbold.value;
        hitalic = document.fcb_form.hitalic.value;
        hunderline = document.fcb_form.hunderline.value;
        document.fcb_form.hmess.value = '';
        if (hmess == '')
        {
            alert('$lang->fcb_typemess');
        }
        else
        {
            fcb_frame.location = '$fcb_setting[changfcb_url]/index.php?do=postshout&key=' + chatboxkey + '&userid=' + huid + '&groupid=' + hgroupid + '&username=' + huser + '&message=' + encodeURIComponent(hmess) + '&color=' + hcolor + '&font=' + hfont + '&bold=' + hbold + '&italic=' + hitalic + '&underline=' + hunderline;
        }
}

function archivepage()
{
    window.open("$fcb_setting[changfcb_url]/archive.php", "fcbarchive", "location=no,scrollbars=yes,width=640,height=480");
}
function addsmilie(code)
{
    document.fcb_form.hmess.value = document.fcb_form.hmess.value + code;
}
function smiliepopup()
{
    window.open("misc.php?do=fcb_allsmilies", "fcballsmilies", "location=no,scrollbars=yes,width=500,height=500");
}

function smshow(request)
{
  if (request.readyState == 4 && request.status == 200)
    {
        document.getElementById('fcb_smiliebox').innerHTML = request.responseText;
    }
}
function fcb_showsmilies()
{
    document.getElementById('fcb_smiliebox').innerHTML = '$lang->fcb_wait';
    new Ajax.Request('misc.php?do=fcb_randomsmilies', {method: 'GET', postBody: null, onComplete: function(request) { smshow(request); }});
}
function fcb_showsmiliebox()
{
    if (document.getElementById('fcb_smilieboxmain').style.display == 'none')
    {
        document.getElementById('fcb_smilieboxmain').style.display = 'inline';
        fcb_showsmilies();
    }
    else
    {
        document.getElementById('fcb_smilieboxmain').style.display = 'none';
    }
}
function fcb_hideshowsmiliebox()
{
    document.getElementById('fcb_smilieboxmain').style.display = 'none';
}
function fcb_refresh()
{
    fcb_frame.location = '$fcb_setting[changfcb_url]/index.php';
}
</script> 


A tak wygląda aktualny szablon DVZ Shoutbox który opiera się na CSS a nie na pobraniu szablonu ze stylu forum:

<div class="tablehead">Czat<p class="right"><a href="{$mybb->settings[bburl]}/index.php?action=shoutbox_archive">&laquo; {$lang->dvz_sb_archivelink}</a></p></div>
<div id="shoutbox">
<div class="panel-away" style="display:none"><button class="button" onclick="dvz_shoutbox.setBack()">{$lang->dvz_sb_away_button}</button>{$lang->dvz_sb_away}</div>
{$dvz_shoutbox_panel}
<div id="shoutbox_data" style="height:{$mybb->settings[dvz_sb_height]}px; overflow:auto;"></div>
</div>

<script type="text/javascript" src="jscripts/dvz_shoutbox.js"></script>
<script>
now = new Date;
dvz_shoutbox.userLastAction = now.getTime();
dvz_shoutbox.interval = {$mybb->settings[dvz_sb_interval]};
dvz_shoutbox.antiflood = {$mybb->settings[dvz_sb_antiflood]};
dvz_shoutbox.maxShouts = {$mybb->settings[dvz_sb_num]};
dvz_shoutbox.awayTimeout = {$mybb->settings[dvz_sb_away]}*1000;
dvz_shoutbox.lang = ['{$lang->dvz_sb_delete_confirm}', '{$lang->dvz_sb_antiflood}'];
{$dvz_shoutbox_js}
dvz_shoutbox.checkForMessages();
</script> 


Standardowy CSS który trzeba wkleić do global.css (nie zmieniałem go):

.tablehead { padding: 5px 10px; background: #026CB1 url(images/thead_bg.gif) repeat-x; border: solid 1px #026CB1; border-radius: 5px 5px 0 0; font: 16px Arial, sans-serif; color: #FFF; }
.tablehead .right { float: right; margin: 0; padding-top: 1px; font-size:  13px; }
.tablehead a { color: #FFF !important; text-decoration: none; }

#shoutbox_data { font: 13px Arial, sans-serif; }
#shoutbox { margin-bottom: 5px; }
#shoutbox .panel { padding: 2px; }
#shoutbox .panel-blocked { margin: 1px 0; padding: 5px; background: #FCEFEF; font-size: 11px; color: #543A3A; }
#shoutbox .panel-away { margin: 1px 0; padding: 5px;  background: #EDEDED; font-size: 11px; color: #7A7A7A; }
#shoutbox .panel-away button { margin-right: 5px; padding: 5px; font-family: Tahoma, sans-serif; color: #FFF; font-size: 11px; font-weight: bold; text-align: center; text-shadow: 0 -1px 0 #297318; border-radius: 5px; background: #962725; border: none; border-radius: 3px; }
#shoutbox .trow1 { background-color: #FFF; }
#shoutbox .panel-minposts { margin: 1px 0; padding: 5px; background: #FFFED8; font-size: 11px; color: #727250; }
img#dvz_sb_loading { position: relative; top: 3px; left: 5px; }
input#shout_text { margin-right: 2px; padding: 5px 6px 6px 6px; width: 90%; background: #FFF; border: 1px solid #898989; border-radius: 2px; font-family: Tahoma, sans-serif; font-size: 12px; color: #000; }
input#shout_button { padding: 5px; font-family: Tahoma, sans-serif; color: #FFF; font-size: 11px; font-weight: bold; text-align: center; text-shadow: 0 -1px 0 #297318; border-radius: 5px; background: #499338; border: solid 1px #499338; border-radius: 3px; }
#shoutbox .trow1 { background-color: #FFF; }
#shoutbox .trow2 { background-color: #FAFAFA; }
.sbentry { padding: 0; }
#shoutbox .userdata { margin: 0; padding: 6px; float: left;  text-align: right; }
#shoutbox .text { margin: 0; padding: 6px; color: #333333; }
#shoutbox .insUser { cursor: pointer; color: #AAAAAA; }
#shoutbox .info { float: right; margin-top: 5px; margin-right: 5px; font-size: 11px; color: #888888; }
#shoutbox .info .date { margin-right: 5px; }
#shoutbox .info .ip { margin-right: 5px; color: #CECECE; }
#shoutbox .mod { padding: 2px 5px; background: #333333; border-radius: 3px; font-size: 10px; font-weight: bold; color: #FFF; text-decoration: none; }
#shoutbox .dvz_sb_del { background-color: #6B0100; }
#shoutbox img.avatar { float: left; display: inline-block; margin-top: -1px; margin-right: 5px; max-height: 16px; max-width: 16px; border: solid 1px #FFF; box-shadow: 0 0 2px #E0E0E0; } 


Co w nim muszę zmienić aby wyglądał tak jak ChangUonDyU na obrazku?

Pozdrawiam!

EDIT.

Udało mi się w miarę ogarnąć CSS i nie wygląda już najgorzej. Najgorzej wygląda to że ten shoutbox jest podzielony na 3 części a nie składa się z jedności.

Na razie w miarę wszystko ogarnięte.