Como deixo meu chatbox desse jeito?

Qual é minha questão:
Olá pessoal queria saber como deixo a chatbox assim ou shoutbox no caso que eu vejo no fórum do mu que eu jogo olhem só ela pode coloca avisos pode colocar as regras do shoutbox ou chatbox em um spoiler ou sem spoiler eu queria deixa a minha desse jeito alguem podia manda um código ou oque devo fazer?
imagem para ficar melhor para ajuda:


Endereço do meu fórum:
http://universomaker.foruns.com.pt

Versão do fórum:
PHPBB3

Olá,

Adicione isto á teu CSS:

Código:

    /*chatbox*/
        #chatbox, #chatbox_footer, #chatbox_members {
        background: white;
        border-top: 1px solid #EAEAEA;
        }

        #chatbox_header.main-head {
        background: #2C5687 url(http://www.ipbforumskins.com/skindemo/public/style_images/master/maintitle.png) repeat-x top;
        padding: 2px;
        font-weight: 300;
        -moz-border-radius: 4px 4px 0 0;
        border-radius: 4px 4px 0 0;
        border-radius: 4px 4px 0 0;
        -webkit-box-shadow: inset 0px 1px 0 #528CBC;
        -moz-box-shadow: inset 0px 1px 0 #528cbc;
        box-shadow: inset 0px 1px 0 #528CBC;
        border-width: 1px 1px 0 1px;
        border-color: #316897;
        border-style: solid;
        }

        .chatbox-title, .chatbox-title a.chat-title {
          color: white;
        font-size: 15px;
        font-weight: bold;
        }

        .chatbox-options li, .chatbox-options li a, .chatbox-options li label {
        color: white;
        }

        #chatbox_members .member-title {
        background: #F8E7DD;
        background-color: #F4F9FD;
        background-image: none;
        border-bottom: 2px solid red;
        color: #A30000;
        font-family: Verdana,Arial,Helvetica,sans-serif;
        font-size: 12px;
        padding: .5em .25em;
        text-align: center;
        text-shadow: 1px 0 0 white;
        }

        #chatbox_members {
        display: none;
        }

        div.main-content.chatbox.clearfix {
        border: 1px solid #EAEAEA;
        border-radius: 4px;
        }

        #chatbox p {
        border-bottom: 1px solid #DDD;
        border-top: 1px solid white;
        line-height: 1.2em;
        }

        #chatbox_footer {
          width: 290px;
          min-width: 230px;
          background: #FCFCFC;
          float: right;
          clear:both;
          position: relative;
          border-top: 1px solid gainsboro;
        }

        .right {
        clear: both;
        float: right;
        }

        input#message.post {
        height: 45px;
        width: 240px;
        padding: 6px;
        border: 1px solid #D4D4D4;
        background: #FCFCFC;
        color: #9F9F9F;
        text-shadow: white 0px 1px 0px;
        -webkit-box-shadow: inset rgba(0, 0, 0, 0.1) 0px 1px 3px;
        -moz-box-shadow: inset rgba(0,0,0,0.1) 0px 1px 3px;
        box-shadow: inset rgba(0, 0, 0, 0.1) 0px 1px 3px;
        margin: 20px;
        margin-bottom: 0px;
        }

        #message, #submit_button {
          background: #323232 url('http://lifegames.in/forum/public/style_images/LifeGames_v2_0/highlight_faint.png') repeat-x 0 0;
        border-color: #2B2B2B;
        color: white;
        text-shadow: #2B2B2B 0px -1px 0px;
        -moz-box-shadow: rgba(0,0,0,0.43) 0px 1px 3px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.43) 0px 1px 3px;
        box-shadow: rgba(0, 0, 0, 0.43) 0px 1px 3px;
        -moz-border-radius: 2px;
        padding: 5px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        display: block;
        margin: 10px;
        margin-top: 0px;
        margin-left: 20px;
        }

        #message, #submit_button:hover {
          opacity: 0.9;
        }

        .fontbutton {
        cursor: pointer;
        float: left;
        margin: 3px;
        padding: 3px;
        margin-right: 10px;
        text-align: left;
        background: #E2E9F0;
        border-color: #DAE2EA;
        color: #464646;
        -moz-box-shadow: inset 0 1px 0 0 #eff3f8, 0px 2px 3px rgba(0,0,0,0.2);
        -webkit-box-shadow: inset 0 1px 0 0 #EFF3F8, 0px 2px 3px rgba(0, 0, 0, 0.2);
        box-shadow: inset 0 1px 0 0 #EFF3F8, 0px 2px 3px rgba(0, 0, 0, 0.2);
        }

        .fontbutton:hover {
          opacity: 0.9;
        }

        #divsmilies img + img{visibility:visible!important}

        #chatbox_messenger_form div.right img{visibility:hidden}

        #simple-wrap {
          background:white;
        }

        #divbold, #divcolor, #divitalic, #divsmilies, #divstrike, #divunderline {
        background-position: center;
        background-repeat: no-repeat;
        }

        #divbold {
        background-image: url(http://cdn2.iconfinder.com/data/icons/oxygen/16x16/actions/format-text-bold.png);
        }

        #divitalic {
        background-image: url(http://cdn2.iconfinder.com/data/icons/oxygen/16x16/actions/format-text-italic.png);
        }

        #divunderline {
        background-image: url(http://cdn2.iconfinder.com/data/icons/oxygen/16x16/actions/format-text-underline.png);
        }

        #divstrike {
        background-image: url(http://cdn1.iconfinder.com/data/icons/bnw/16x16/actions/text_strike.png);
        }

        #divcolor {
        background-image: url(http://2img.net/i/fa/wysiwyg/color_swatch.png);
        }

        #divsmilies {
        background-image: url(http://i26.servimg.com/u/f26/12/56/56/12/emotic10.png);
        }

        #chatbox{
          background: #FBFBFB;
          padding: 8px;
          border: 1px solid #DBE4EF;
          border-bottom: 3px solid #DBE2EC;
          right: 290;
          margin-top: 5px;
          left:0
        }

        .attach {
        float: right;
        }

        div.main-content.chatbox.clearfix {
        border: 0px;
        border-radius: 4px;
        padding: 0px;
        }

Resulta?

Até mais.

Olá veja a chatbox la no fórum no final da pagina a caixa de mensagem era pra está embaixo e de acordo com o da chatbox ):

Olá,

Sem retirar o código acima adicione isto:

Código:

#chatbox_footer label {color: transparent!important;}
#chatbox_footer {width: 280px!important;height: 259px!important;}

Resulta ?

Até mais.

continuo do mesmo jeito :S