Editar o painel de usuário e distanciar fórum

Qual é minha questão:
Como deixo a cor dos links do painel de usuário, branca?
Aqui está meu código:

Código:

<!-- The CSS -->
    <link rel="stylesheet" href="http://web-kreation.com/demos/login_form_mootools_1.2/fx.slide.css" type="text/css" media="screen" />
    <style>
    #login {
    overflow: visible;
    height: auto;
    -webkit-transition: margin-top 0.5s ease-in-out 0s;
    -moz-transition: margin-top 0.5s ease-in-out 0s;
    -o-transition: margin-top 0.5s ease-in-out 0s;
    transition: margin-top 0.5s ease-in-out 0s;

    }

    /* Login Panel I */
    #topp {
    height: 38px;
    position: relative;
    }

    #topp ul.login {
    display: block;
    position: relative;
    float: right;
    clear: right;
    height: 38px;
    width: auto;
    font-weight: bold;
    line-height: 38px;
    margin: 0;
    right: 150px;
    color: white;
    font-size: 80%;
    text-align: center;
    padding-right: 45px;
    }

    #topp ul.login li.left {
    height: 38px;
    width: 45px;
    padding: 0;
    margin: 0;
    display: block;
    float: left;
    }

    #topp ul.login li {
    text-align: left;
    padding: 0 6px;
    display: block;
    float: left;
    height: 38px;
    }
    #topp ul.login li a {color: #ffffff;}
    #topp ul.login li a:hover {color: white;}

    /* Login Panel */
    #topp {
    background: url(http://i44.servimg.com/u/f44/16/64/98/32/login_12.png) repeat-x 0 0;}

    #topp ul.login {
    background: url(http://i44.servimg.com/u/f44/16/64/98/32/loginr11.png) no-repeat right 0;}

    #topp ul.login li.left {
    background: url(http://i44.servimg.com/u/f44/16/64/98/32/loginl11.png) no-repeat left 0;}

    #topp ul.login li {
    background: url(http://i44.servimg.com/u/f44/16/64/98/32/login_13.png) repeat-x 0 0;}

    /*Login*/
    /* toggle effect - show/hide login*/
    #login {
    background: #009AC6;}

    #login .loginContent input:focus.field {
    background: #545454;}

    #login .loginContent{padding-top:0px;width:790px;height:100px;}

    #login .loginContent input.button_login {
    background: transparent url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_login.jpg) no-repeat 0 0;}

    #login .loginClose a {
    background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right 0;}

    #login .loginClose a:hover {
    background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right -20px;}
    </style>

    <!-- Login --><div id="loginn" style="display: block;position: absolute;left: 0px;top: 0px;width: 100%;"><div id="login" style="margin-top:-100px;"><div class="loginContent">




    <table style="width:100%;" border="0">
    <tr>

    <td style="text-align:center;">
    <table border="0">
    <tr>

    <td>
    <script>
    jQuery(document).ready(function(){
    jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
    link = jQuery('.panel dl:first img', data).attr('src');
    if(link){
    jQuery('#avatar').html('<img src="'+link+'" align="left" width="60" height="80">');
    }else{
    jQuery('#avatar').html('');
    }
    });
    });
    </script><div id="avatar"><center><img src="http://i53.tinypic.com/1e1fex.gif"></center></div>
    </td>

    <td>
    <span style="font-size: 1.2em;">
    <font size="3"><a href="../profile?mode=editprofile">{USERNAME}</a></font>
    </td>
    <td>
    <b>  Mensagens:</b> {USERCOUNTPOST}
    </span>
    </td>

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



    <td style="text-align:center;">
    <span style="font-size: 1.2em;"><b>Alterar</b><br>

    <a href="../profile.forum?mode=editprofile&amp;page_profil=informations">Informações</a><br>

    <a href="../profile.forum?mode=editprofile&amp;page_profil=preferences">Preferências</a><br>

    <a href="../profile.forum?mode=editprofile&amp;page_profil=signature">Assinatura</a><br>

    <a href="../profile.forum?mode=editprofile&amp;page_profil=avatars">Avatar</a>

    </span>
    </td>

    <td style="text-align:center;">
    <span style="font-size: 1.2em;"><b>Ver</b><br>

    <a href="../profile.forum?mode=editprofile&amp;page_profil=friendsfoes">Amigos & ignorados</a><br>

    <a href="../search.forum?search_id=watchsearch">Tópicos supervisionados</a><br>

    <a href="../search.forum?search_id=favouritesearch">Tópicos favoritos</a><br>

    <a href="../rpg_sheet_edit.forum">Ficha de personagem</a>

    </span>
    </td>

    <td style="text-align:center;">
    <span style="font-size: 1.2em;"><b>Tópicos & Mensagens</b><br>

    <a href="../msg.forum?folder=inbox">Mensagens Privadas</a><br>

    <a href="../search.forum?search_topics=favouritesearch">Meus tópicos</a><br>

    <a href="../search.forum?search_id=egosearch">Tópicos que participa</a><br>

    <a href="../search.forum?search_author=favouritesearch&show_results=posts">Minhas mensagens</a><br>

    </span>
    </td>

    </tr>
    </table>




    </div>

    </div>


    <!-- /login --><div id="container"><div id="topp">

    <!-- login -->

    <ul class="login">

    <li class="left"> </li>

    <li><a id="toggleLogin" href="#" onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')? '-100px' : '0px');">Painel de Usuário</a></li>

    </ul> <!-- / login -->

    </div> <!-- / topp --><div class="clearfix"></div>
    </div></p></div>




Quero saber também como distancio o Fórum do topo da página, como voces podem ver no meu fórum, o painel de usuário fica tampando uma parte do Logo....

Medidas que eu tomei para corrigir o problema:
Tentei procurar os Values

Imagens do meu problema:


Endereço do meu fórum:
http://colorcheats.forumeiros.com/

Versão do meu fórum:
PHPBB3

Tente (não tenho um forum PHPBB3 para testar, rs):

Código:

    <div id="loginn" style="display: block;position: absolute;left: 0px;top: 0px;width: 100%;"><div id="login" style="margin-top:-100px;"><div class="loginContent">




        <table style="width:100%;" border="0">
        <tbody><tr>

        <td style="text-align:center;">
        <table border="0">
        <tbody><tr>

        <td>
        <script>
        jQuery(document).ready(function(){
        jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
        link = jQuery('.panel dl:first img', data).attr('src');
        if(link){
        jQuery('#avatar').html('<img src="'+link+'" align="left" width="60" height="80">');
        }else{
        jQuery('#avatar').html('');
        }
        });
        });
        </script><div id="avatar"><center><img src="http://i53.tinypic.com/1e1fex.gif"></center></div>
        </td>

        <td>
        <span style="font-size: 1.2em;">
        <font size="3"><a href="../profile?mode=editprofile">{USERNAME}</a></font>
        </span></td>
        <td>
        <b>  Mensagens:</b> {USERCOUNTPOST}
     
        </td>

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



        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Alterar</b><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=informations"><font color="#FFFFFF">Informações</font></a><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=preferences"><font color="#FFFFFF">Preferências</font></a><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=signature"><font color="#FFFFFF">Assinatura</font></a><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=avatars"><font color="#FFFFFF">Avatar</font></a>

        </span>
        </td>

        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Ver</b><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=friendsfoes"><font color="#FFFFFF">Amigos &amp; ignorados</font></a><br>

        <a href="../search.forum?search_id=watchsearch"><font color="#FFFFFF">Tópicos supervisionados</font></a><br>

        <a href="../search.forum?search_id=favouritesearch"><font color="#FFFFFF">Tópicos favoritos</font></a><br>

        <a href="../rpg_sheet_edit.forum"><font color="#FFFFFF">Ficha de personagem</font></a>

        </span>
        </td>

        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Tópicos &amp; Mensagens</font></b><br>

        <a href="../msg.forum?folder=inbox"><font color="#FFFFFF">Mensagens Privadas</font></a><br>

        <a href="../search.forum?search_topics=favouritesearch"><font color="#FFFFFF">Meus tópicos</font></a><br>

        <a href="../search.forum?search_id=egosearch"><font color="#FFFFFF">Tópicos que participa</font></a><br>

        <a href="../search.forum?search_author=favouritesearch&amp;show_results=posts"><font color="#FFFFFF">Minhas mensagens</font></a><br>

        </span>
        </td>

        </tr>
        </tbody></table>




        </div>

        </div>


        <!-- /login --><div id="container"><div id="topp">

        <!-- login -->

        <ul class="login">

        <li class="left"> </li>

        <li><a id="toggleLogin" href="#" onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')? '-100px' : '0px');">Painel de Usuário</a></li>

        </ul> <!-- / login -->

        </div> <!-- / topp --><div class="clearfix"></div>
        </div><p></p></div>



Parece que está faltando alguma coisa. Nem aparece mais o menu.

Tenta esse, aqui pegou.:

Código:

    <!-- The CSS -->
        <link rel="stylesheet" href="http://web-kreation.com/demos/login_form_mootools_1.2/fx.slide.css" type="text/css" media="screen" />
        <style>
        #login {
        overflow: visible;
        height: auto;
        -webkit-transition: margin-top 0.5s ease-in-out 0s;
        -moz-transition: margin-top 0.5s ease-in-out 0s;
        -o-transition: margin-top 0.5s ease-in-out 0s;
        transition: margin-top 0.5s ease-in-out 0s;

        }

        /* Login Panel I */
        #topp {
        height: 38px;
        position: relative;
        }

        #topp ul.login {
        display: block;
        position: relative;
        float: right;
        clear: right;
        height: 38px;
        width: auto;
        font-weight: bold;
        line-height: 38px;
        margin: 0;
        right: 150px;
        color: white;
        font-size: 80%;
        text-align: center;
        padding-right: 45px;
        }

        #topp ul.login li.left {
        height: 38px;
        width: 45px;
        padding: 0;
        margin: 0;
        display: block;
        float: left;
        }

        #topp ul.login li {
        text-align: left;
        padding: 0 6px;
        display: block;
        float: left;
        height: 38px;
        }
        #topp ul.login li a {color: #ffffff;}
        #topp ul.login li a:hover {color: white;}

        /* Login Panel */
        #topp {
        background: url(http://i44.servimg.com/u/f44/16/64/98/32/login_12.png) repeat-x 0 0;}

        #topp ul.login {
        background: url(http://i44.servimg.com/u/f44/16/64/98/32/loginr11.png) no-repeat right 0;}

        #topp ul.login li.left {
        background: url(http://i44.servimg.com/u/f44/16/64/98/32/loginl11.png) no-repeat left 0;}

        #topp ul.login li {
        background: url(http://i44.servimg.com/u/f44/16/64/98/32/login_13.png) repeat-x 0 0;}

        /*Login*/
        /* toggle effect - show/hide login*/
        #login {
        background: #009AC6;}

        #login .loginContent input:focus.field {
        background: #545454;}

        #login .loginContent{padding-top:0px;width:790px;height:100px;}

        #login .loginContent input.button_login {
        background: transparent url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_login.jpg) no-repeat 0 0;}

        #login .loginClose a {
        background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right 0;}

        #login .loginClose a:hover {
        background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right -20px;}
        </style>

        <!-- Login --><div id="loginn" style="display: block;position: absolute;left: 0px;top: 0px;width: 100%;"><div id="login" style="margin-top:-100px;"><div class="loginContent">




        <table style="width:100%;" border="0">
        <tr>

        <td style="text-align:center;">
        <table border="0">
        <tr>

        <td>
        <script>
        jQuery(document).ready(function(){
        jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
        link = jQuery('.panel dl:first img', data).attr('src');
        if(link){
        jQuery('#avatar').html('<img src="'+link+'" align="left" width="60" height="80">');
        }else{
        jQuery('#avatar').html('');
        }
        });
        });
        </script><div id="avatar"><center><img src="http://i53.tinypic.com/1e1fex.gif"></center></div>
        </td>

        <td>
        <span style="font-size: 1.2em;">
        <font size="3"><a href="../profile?mode=editprofile">{USERNAME}</a></font>
        </td>
        <td>
        <b>  Mensagens:</b> {USERCOUNTPOST}
        </span>
        </td>

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



        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Alterar</b><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=informations"><font color="#FFFFFF">Informações</font></a><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=preferences"><font color="#FFFFFF">Preferências</font></a><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=signature"><font color="#FFFFFF">Assinatura</font></a><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=avatars"><font color="#FFFFFF">Avatar</font></a>

        </span>
        </td>

        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Ver</b><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=friendsfoes"><font color="#FFFFFF">Amigos & ignorados</font></a><br>

        <a href="../search.forum?search_id=watchsearch"><font color="#FFFFFF">Tópicos supervisionados</font></a><br>

        <a href="../search.forum?search_id=favouritesearch"><font color="#FFFFFF">Tópicos favoritos</font></a><br>

        <a href="../rpg_sheet_edit.forum"><font color="#FFFFFF">Ficha de personagem</font></a>

        </span>
        </td>

        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Tópicos & Mensagens</b><br>

        <a href="../msg.forum?folder=inbox"><font color="#FFFFFF">Mensagens Privadas</font></a><br>

        <a href="../search.forum?search_topics=favouritesearch"><font color="#FFFFFF">Meus tópicos</font></a><br>

        <a href="../search.forum?search_id=egosearch"><font color="#FFFFFF">Tópicos que participa</font></a><br>

        <a href="../search.forum?search_author=favouritesearch&show_results=posts"><font color="#FFFFFF">Minhas mensagens</font></a><br>

        </span>
        </td>

        </tr>
        </table>




        </div>

        </div>


        <!-- /login --><div id="container"><div id="topp">

        <!-- login -->

        <ul class="login">

        <li class="left"> </li>

        <li><a id="toggleLogin" href="#" onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')? '-100px' : '0px');">Painel de Usuário</a></li>

        </ul> <!-- / login -->

        </div> <!-- / topp --><div class="clearfix"></div>
        </div></p></div>




Se puder, eu queria que o nome de usuário aparecesse em branco também!
E eu queria que quando o mouse passasse em cima dos links eles ficassem vermelhos.

Obrigado!

Olá!

Teste esse código:

Código:

    <!-- The CSS -->
        <link rel="stylesheet" href="http://web-kreation.com/demos/login_form_mootools_1.2/fx.slide.css" type="text/css" media="screen" />
        <style>
        #login {
        overflow: visible;
        height: auto;
        -webkit-transition: margin-top 0.5s ease-in-out 0s;
        -moz-transition: margin-top 0.5s ease-in-out 0s;
        -o-transition: margin-top 0.5s ease-in-out 0s;
        transition: margin-top 0.5s ease-in-out 0s;

        }

        /* Login Panel I */
        #topp {
        height: 38px;
        position: relative;
        }

        #topp ul.login {
        display: block;
        position: relative;
        float: right;
        clear: right;
        height: 38px;
        width: auto;
        font-weight: bold;
        line-height: 38px;
        margin: 0;
        right: 150px;
        color: white;
        font-size: 80%;
        text-align: center;
        padding-right: 45px;
        }

        #topp ul.login li.left {
        height: 38px;
        width: 45px;
        padding: 0;
        margin: 0;
        display: block;
        float: left;
        }

        #topp ul.login li {
        text-align: left;
        padding: 0 6px;
        display: block;
        float: left;
        height: 38px;
        }
        #topp ul.login li a {color: #ffffff;}
        #topp ul.login li a:hover {color: white;}

        /* Login Panel */
        #topp {
        background: url(http://i44.servimg.com/u/f44/16/64/98/32/login_12.png) repeat-x 0 0;}

        #topp ul.login {
        background: url(http://i44.servimg.com/u/f44/16/64/98/32/loginr11.png) no-repeat right 0;}

        #topp ul.login li.left {
        background: url(http://i44.servimg.com/u/f44/16/64/98/32/loginl11.png) no-repeat left 0;}

        #topp ul.login li {
        background: url(http://i44.servimg.com/u/f44/16/64/98/32/login_13.png) repeat-x 0 0;}

        /*Login*/
        /* toggle effect - show/hide login*/
        #login {
        background: #009AC6;}

        #login .loginContent input:focus.field {
        background: #545454;}

        #login .loginContent{padding-top:0px;width:790px;height:100px;}

        #login .loginContent input.button_login {
        background: transparent url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_login.jpg) no-repeat 0 0;}

        #login .loginClose a {
        background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right 0;}

        #login .loginClose a:hover {
        background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right -20px;}a:hover{color:red!important}
        </style>

        <!-- Login --><div id="loginn" style="display: block;position: absolute;left: 0px;top: 0px;width: 100%;"><div id="login" style="margin-top:-100px;"><div class="loginContent">




        <table style="width:100%;" border="0">
        <tr>

        <td style="text-align:center;">
        <table border="0">
        <tr>

        <td>
        <script>
        jQuery(document).ready(function(){
        jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
        link = jQuery('.panel dl:first img', data).attr('src');
        if(link){
        jQuery('#avatar').html('<img src="'+link+'" align="left" width="60" height="80">');
        }else{
        jQuery('#avatar').html('');
        }
        });
        });
        </script><div id="avatar"><center><img src="http://i53.tinypic.com/1e1fex.gif"></center></div>
        </td>

        <td>
        <span style="font-size: 1.2em;">
        <font size="3"><a href="/profile?mode=editprofile" style="color:#ffffff">{USERNAME}</a></font>
        </td>
        <td>
        <b>  Mensagens:</b> {USERCOUNTPOST}
        </span>
        </td>

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



        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Alterar</b><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=informations"><font color="#FFFFFF">Informações</font></a><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=preferences"><font color="#FFFFFF">Preferências</font></a><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=signature"><font color="#FFFFFF">Assinatura</font></a><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=avatars"><font color="#FFFFFF">Avatar</font></a>

        </span>
        </td>

        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Ver</b><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=friendsfoes"><font color="#FFFFFF">Amigos & ignorados</font></a><br>

        <a href="../search.forum?search_id=watchsearch"><font color="#FFFFFF">Tópicos supervisionados</font></a><br>

        <a href="../search.forum?search_id=favouritesearch"><font color="#FFFFFF">Tópicos favoritos</font></a><br>

        <a href="../rpg_sheet_edit.forum"><font color="#FFFFFF">Ficha de personagem</font></a>

        </span>
        </td>

        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Tópicos & Mensagens</b><br>

        <a href="../msg.forum?folder=inbox"><font color="#FFFFFF">Mensagens Privadas</font></a><br>

        <a href="../search.forum?search_topics=favouritesearch"><font color="#FFFFFF">Meus tópicos</font></a><br>

        <a href="../search.forum?search_id=egosearch"><font color="#FFFFFF">Tópicos que participa</font></a><br>

        <a href="../search.forum?search_author=favouritesearch&show_results=posts"><font color="#FFFFFF">Minhas mensagens</font></a><br>

        </span>
        </td>

        </tr>
        </table>




        </div>

        </div>


        <!-- /login --><div id="container"><div id="topp">

        <!-- login -->

        <ul class="login">

        <li class="left"> </li>

        <li><a id="toggleLogin" href="#" onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')? '-100px' : '0px');">Painel de Usuário</a></li>

        </ul> <!-- / login -->

        </div> <!-- / topp --><div class="clearfix"></div>
        </div></p></div>



Até mais.

Muito Obrigado, Luciano!
Mas assim, só o link "Painel de Usuário" e o "Nome de Usuário" ficam vermelhos quando passo o mouse.

Teria como fazer isso com todos os links? Obrigado =]

Olá,

Painel de controle ->> Visualização ->> Imagens e Cores ->> Cores ->>
Procure por "Cor do link quando o mouse está sobre ele" e coloque a cor desejada.

¬¬'
Isso não funciona, se não eu num perguntaria aqui.

Olá!

Teste esse código:

Código:

    <!-- The CSS -->
        <link rel="stylesheet" href="http://web-kreation.com/demos/login_form_mootools_1.2/fx.slide.css" type="text/css" media="screen" />
        <style>
        #login {
        overflow: visible;
        height: auto;
        -webkit-transition: margin-top 0.5s ease-in-out 0s;
        -moz-transition: margin-top 0.5s ease-in-out 0s;
        -o-transition: margin-top 0.5s ease-in-out 0s;
        transition: margin-top 0.5s ease-in-out 0s;

        }

        /* Login Panel I */
        #topp {
        height: 38px;
        position: relative;
        }

        #topp ul.login {
        display: block;
        position: relative;
        float: right;
        clear: right;
        height: 38px;
        width: auto;
        font-weight: bold;
        line-height: 38px;
        margin: 0;
        right: 150px;
        color: white;
        font-size: 80%;
        text-align: center;
        padding-right: 45px;
        }

        #topp ul.login li.left {
        height: 38px;
        width: 45px;
        padding: 0;
        margin: 0;
        display: block;
        float: left;
        }

        #topp ul.login li {
        text-align: left;
        padding: 0 6px;
        display: block;
        float: left;
        height: 38px;
        }
        #topp ul.login li a {color: #ffffff;}
        #topp ul.login li a:hover {color: white;}

        /* Login Panel */
        #topp {
        background: url(http://i44.servimg.com/u/f44/16/64/98/32/login_12.png) repeat-x 0 0;}

        #topp ul.login {
        background: url(http://i44.servimg.com/u/f44/16/64/98/32/loginr11.png) no-repeat right 0;}

        #topp ul.login li.left {
        background: url(http://i44.servimg.com/u/f44/16/64/98/32/loginl11.png) no-repeat left 0;}

        #topp ul.login li {
        background: url(http://i44.servimg.com/u/f44/16/64/98/32/login_13.png) repeat-x 0 0;}

        /*Login*/
        /* toggle effect - show/hide login*/
        #login {
        background: #009AC6;}

        #login .loginContent input:focus.field {
        background: #545454;}

        #login .loginContent{padding-top:0px;width:790px;height:100px;}

        #login .loginContent input.button_login {
        background: transparent url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_login.jpg) no-repeat 0 0;}

        #login .loginClose a {
        background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right 0;}

        #login .loginClose a:hover {
        background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right -20px;}div#loginn *:hover{color:red!important}
        </style>

        <!-- Login --><div id="loginn" style="display: block;position: absolute;left: 0px;top: 0px;width: 100%;"><div id="login" style="margin-top:-100px;"><div class="loginContent">




        <table style="width:100%;" border="0">
        <tr>

        <td style="text-align:center;">
        <table border="0">
        <tr>

        <td>
        <script>
        jQuery(document).ready(function(){
        jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
        link = jQuery('.panel dl:first img', data).attr('src');
        if(link){
        jQuery('#avatar').html('<img src="'+link+'" align="left" width="60" height="80">');
        }else{
        jQuery('#avatar').html('');
        }
        });
        });
        </script><div id="avatar"><center><img src="http://i53.tinypic.com/1e1fex.gif"></center></div>
        </td>

        <td>
        <span style="font-size: 1.2em;">
        <font size="3"><a href="/profile?mode=editprofile" style="color:#ffffff">{USERNAME}</a></font>
        </td>
        <td>
        <b>  Mensagens:</b> {USERCOUNTPOST}
        </span>
        </td>

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



        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Alterar</b><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=informations"><font color="#FFFFFF">Informações</font></a><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=preferences"><font color="#FFFFFF">Preferências</font></a><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=signature"><font color="#FFFFFF">Assinatura</font></a><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=avatars"><font color="#FFFFFF">Avatar</font></a>

        </span>
        </td>

        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Ver</b><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=friendsfoes"><font color="#FFFFFF">Amigos & ignorados</font></a><br>

        <a href="../search.forum?search_id=watchsearch"><font color="#FFFFFF">Tópicos supervisionados</font></a><br>

        <a href="../search.forum?search_id=favouritesearch"><font color="#FFFFFF">Tópicos favoritos</font></a><br>

        <a href="../rpg_sheet_edit.forum"><font color="#FFFFFF">Ficha de personagem</font></a>

        </span>
        </td>

        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Tópicos & Mensagens</b><br>

        <a href="../msg.forum?folder=inbox"><font color="#FFFFFF">Mensagens Privadas</font></a><br>

        <a href="../search.forum?search_topics=favouritesearch"><font color="#FFFFFF">Meus tópicos</font></a><br>

        <a href="../search.forum?search_id=egosearch"><font color="#FFFFFF">Tópicos que participa</font></a><br>

        <a href="../search.forum?search_author=favouritesearch&show_results=posts"><font color="#FFFFFF">Minhas mensagens</font></a><br>

        </span>
        </td>

        </tr>
        </table>




        </div>

        </div>


        <!-- /login --><div id="container"><div id="topp">

        <!-- login -->

        <ul class="login">

        <li class="left"> </li>

        <li><a id="toggleLogin" href="#" onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')? '-100px' : '0px');">Painel de Usuário</a></li>

        </ul> <!-- / login -->

        </div> <!-- / topp --><div class="clearfix"></div>
        </div></p></div>



Até mais.

Agora foi, mas agora, Mensagens, Alterar, Ver, Tópicos e Mensagens, ficam em vermelho tbm. Sendo que eles não são links...

Tem como arrumar?

Olá!

Teste esse código:

Código:

    <!-- The CSS -->
        <link rel="stylesheet" href="http://web-kreation.com/demos/login_form_mootools_1.2/fx.slide.css" type="text/css" media="screen" />
        <style>
        #login {
        overflow: visible;
        height: auto;
        -webkit-transition: margin-top 0.5s ease-in-out 0s;
        -moz-transition: margin-top 0.5s ease-in-out 0s;
        -o-transition: margin-top 0.5s ease-in-out 0s;
        transition: margin-top 0.5s ease-in-out 0s;

        }

        /* Login Panel I */
        #topp {
        height: 38px;
        position: relative;
        }

        #topp ul.login {
        display: block;
        position: relative;
        float: right;
        clear: right;
        height: 38px;
        width: auto;
        font-weight: bold;
        line-height: 38px;
        margin: 0;
        right: 150px;
        color: white;
        font-size: 80%;
        text-align: center;
        padding-right: 45px;
        }

        #topp ul.login li.left {
        height: 38px;
        width: 45px;
        padding: 0;
        margin: 0;
        display: block;
        float: left;
        }

        #topp ul.login li {
        text-align: left;
        padding: 0 6px;
        display: block;
        float: left;
        height: 38px;
        }
        #topp ul.login li a {color: #ffffff;}
        #topp ul.login li a:hover {color: white;}

        /* Login Panel */
        #topp {
        background: url(http://i44.servimg.com/u/f44/16/64/98/32/login_12.png) repeat-x 0 0;}

        #topp ul.login {
        background: url(http://i44.servimg.com/u/f44/16/64/98/32/loginr11.png) no-repeat right 0;}

        #topp ul.login li.left {
        background: url(http://i44.servimg.com/u/f44/16/64/98/32/loginl11.png) no-repeat left 0;}

        #topp ul.login li {
        background: url(http://i44.servimg.com/u/f44/16/64/98/32/login_13.png) repeat-x 0 0;}

        /*Login*/
        /* toggle effect - show/hide login*/
        #login {
        background: #009AC6;}

        #login .loginContent input:focus.field {
        background: #545454;}

        #login .loginContent{padding-top:0px;width:790px;height:100px;}

        #login .loginContent input.button_login {
        background: transparent url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_login.jpg) no-repeat 0 0;}

        #login .loginClose a {
        background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right 0;}

        #login .loginClose a:hover {
        background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right -20px;}div#loginn a:hover{color:red!important}
        </style>

        <!-- Login --><div id="loginn" style="display: block;position: absolute;left: 0px;top: 0px;width: 100%;"><div id="login" style="margin-top:-100px;"><div class="loginContent">




        <table style="width:100%;" border="0">
        <tr>

        <td style="text-align:center;">
        <table border="0">
        <tr>

        <td>
        <script>
        jQuery(document).ready(function(){
        jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
        link = jQuery('.panel dl:first img', data).attr('src');
        if(link){
        jQuery('#avatar').html('<img src="'+link+'" align="left" width="60" height="80">');
        }else{
        jQuery('#avatar').html('');
        }
        });
        });
        </script><div id="avatar"><center><img src="http://i53.tinypic.com/1e1fex.gif"></center></div>
        </td>

        <td>
        <span style="font-size: 1.2em;">
        <font size="3"><a href="/profile?mode=editprofile" style="color:#ffffff">{USERNAME}</a></font>
        </td>
        <td>
        <b>  Mensagens:</b> {USERCOUNTPOST}
        </span>
        </td>

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



        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Alterar</b><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=informations"><font color="#FFFFFF">Informações</font></a><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=preferences"><font color="#FFFFFF">Preferências</font></a><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=signature"><font color="#FFFFFF">Assinatura</font></a><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=avatars"><font color="#FFFFFF">Avatar</font></a>

        </span>
        </td>

        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Ver</b><br>

        <a href="../profile.forum?mode=editprofile&amp;page_profil=friendsfoes"><font color="#FFFFFF">Amigos & ignorados</font></a><br>

        <a href="../search.forum?search_id=watchsearch"><font color="#FFFFFF">Tópicos supervisionados</font></a><br>

        <a href="../search.forum?search_id=favouritesearch"><font color="#FFFFFF">Tópicos favoritos</font></a><br>

        <a href="../rpg_sheet_edit.forum"><font color="#FFFFFF">Ficha de personagem</font></a>

        </span>
        </td>

        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Tópicos & Mensagens</b><br>

        <a href="../msg.forum?folder=inbox"><font color="#FFFFFF">Mensagens Privadas</font></a><br>

        <a href="../search.forum?search_topics=favouritesearch"><font color="#FFFFFF">Meus tópicos</font></a><br>

        <a href="../search.forum?search_id=egosearch"><font color="#FFFFFF">Tópicos que participa</font></a><br>

        <a href="../search.forum?search_author=favouritesearch&show_results=posts"><font color="#FFFFFF">Minhas mensagens</font></a><br>

        </span>
        </td>

        </tr>
        </table>




        </div>

        </div>


        <!-- /login --><div id="container"><div id="topp">

        <!-- login -->

        <ul class="login">

        <li class="left"> </li>

        <li><a id="toggleLogin" href="#" onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')? '-100px' : '0px');">Painel de Usuário</a></li>

        </ul> <!-- / login -->

        </div> <!-- / topp --><div class="clearfix"></div>
        </div></p></div>



Até mais.

Agora só preciso que me ajudem a arrumar um problema...
Este código está aumentando a letra das Categorias...

Código:

    <!DOCTYPE>

    <!-- The CSS -->
    <link rel="stylesheet" href="http://web-kreation.com/demos/login_form_mootools_1.2/fx.slide.css" type="text/css" media="screen" />
    <style>
    #login {
    overflow: visible;
    height: auto;
    -webkit-transition:  margin-top 0.5s ease-in-out 0s;
    -moz-transition:  margin-top 0.5s ease-in-out 0s;
    -o-transition:    margin-top 0.5s ease-in-out 0s;
    transition:    margin-top 0.5s ease-in-out 0s;

    }

    /* Login Panel I */
    #topp {
    height: 38px;
    position: relative;
    }

    #topp ul.login {
    display: block;
    position: relative;
    float: right;
    clear: right;
    height: 38px;
    width: auto;
    font-weight: bold;
    line-height: 38px;
    margin: 0;
    right: 150px;
    color: white;
    font-size: 80%;
    text-align: center;
    padding-right: 45px;
    }

    #topp ul.login li.left {
    height: 38px;
    width: 45px;
    padding: 0;
    margin: 0;
    display: block;
    float: left;
    }

    #topp ul.login li {
    text-align: left;
    padding: 0 6px;
    display: block;
    float: left;
    height: 38px;
    }
    #topp ul.login li a {color: red;}
    #topp ul.login li a:hover {color: white;}

    /* Login Panel */
            #topp {
            background: url(http://i44.servimg.com/u/f44/16/64/98/32/login_12.png) repeat-x 0 0;}

            #topp ul.login {
            background: url(http://i44.servimg.com/u/f44/16/64/98/32/loginr11.png) no-repeat right 0;}

            #topp ul.login li.left {
            background: url(http://i44.servimg.com/u/f44/16/64/98/32/loginl11.png) no-repeat left 0;}

            #topp ul.login li {
            background: url(http://i44.servimg.com/u/f44/16/64/98/32/login_13.png) repeat-x 0 0;}

    /*Login*/
            /* toggle effect - show/hide login*/
            #login {
            background: #009AC6;}

            #login .loginContent input:focus.field {
            background: #545454;}

    #login .loginContent{padding-top:0px;width:790px;height:100px;}

    #login .loginContent input.button_login {
    background: transparent url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_login.jpg) no-repeat 0 0;}

    #login .loginClose a {
    background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right 0;}

    #login .loginClose a:hover {
    background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right -20px;}
    </style>

    <!-- Login --><div id="loginn" style="display: block;position: absolute;left: 0px;top: 0px;width: 100%;"><div id="login" style="margin-top:-100px;"><div class="loginContent">




    <table  style="width:100%;"  border="0">
    <tr>

    <td style="text-align:center;">
    <table border="0">
    <tr>

    <td>
    <script>
    jQuery(document).ready(function(){
      jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
          link = jQuery('.panel dl:first img', data).attr('src');
          if(link){
            jQuery('#avatar').html('<img src="'+link+'" align="left" width="60" height="80">');
          }else{
            jQuery('#avatar').html('');
          }
      });
    });
    </script><div id="avatar"><center><img src="http://i53.tinypic.com/1e1fex.gif"></center></div>
    </td>

    <td>
    <span style="font-size: 1.2em;">
    <font size="4">{USERLINK}</font><br />
    <b>Mensagens:</b> {USERCOUNTPOST}
    </span>
    </td>

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



    <td style="text-align:center;">
    <span style="font-size: 1.2em;"><b>Alterar</b><br />
    <a href="../profile.forum?mode=editprofile&amp;page_profil=informations">Informações</a><br />
    <a href="../profile.forum?mode=editprofile&amp;page_profil=preferences">Preferências</a><br />
    <a href="../profile.forum?mode=editprofile&amp;page_profil=signature">Assinatura</a><br />
    <a href="../profile.forum?mode=editprofile&amp;page_profil=avatars">Avatar</a><br />
    </span>
    </td>

    <td style="text-align:center;">
    <span style="font-size: 1.2em;"><b>Ver</b><br />
    <a href="../profile.forum?mode=editprofile&amp;page_profil=friendsfoes">Amigos & ignorados</a><br />
    <a href="../search.forum?search_id=watchsearch">Tópicos supervisionados</a><br />
    <a href="../search.forum?search_id=draftsearch">Rascunhos</a><br />
    <a href="../search.forum?search_id=favouritesearch">Tópicos favoritos</a><br />
    <a href="../rpg_sheet_edit.forum">Ficha de personagem</a><br />
    </span>
    </td>

    <td style="text-align:center;">
    <span style="font-size: 1.2em;"><b>Tópicos & Mensagens</b><br />
    <a href="../msg.forum?folder=inbox">Mensagens Privadas</a><br />
    <a href="../search.forum?search_topics={USERNAME}">Meus tópicos</a><br />
    <a href="../search.forum?search_id=egosearch">Tópicos que participa</a><br />
    <a href="../search.forum?search_author={USERNAME}&show_results=posts">Minhas mensagens</a><br />
    <a href="../search.forum?search_id=newposts">Últimos tópicos</a><br />
    </span>
    </td>

    </tr>
    </table>




    </div>

    </div>


    <!-- /login --><div id="container"><div id="topp">

    <!-- login -->

    <ul class="login">

    <li class="left"> </li>

    <li><a id="toggleLogin" href="#" onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')? '-100px' : '0px');">Painel de Usuário</a></li>

    </ul> <!-- / login -->

    </div> <!-- / topp --><div class="clearfix"></div>
    </div>

Tem como arrumar???

UP!!

Olá,

Eu adicionei o código que o senhor passou e funcionou perfeitamente sem modificar ou apresentar defeitos nas letras da categorias.

Use o código do Luciano, que foi editado para padronizar-se ao fórum.

Sim, o do luciano funciona, mas o problema é que não aparece o Avatar.

Código:

        <!DOCTYPE>

        <!-- The CSS -->
        <link rel="stylesheet" href="http://web-kreation.com/demos/login_form_mootools_1.2/fx.slide.css" type="text/css" media="screen" />
        <style>
        #login {
        overflow: visible;
        height: auto;
        -webkit-transition:  margin-top 0.5s ease-in-out 0s;
        -moz-transition:  margin-top 0.5s ease-in-out 0s;
        -o-transition:    margin-top 0.5s ease-in-out 0s;
        transition:    margin-top 0.5s ease-in-out 0s;

        }

        /* Login Panel I */
        #topp {
        height: 38px;
        position: relative;
        }

        #topp ul.login {
        display: block;
        position: relative;
        float: right;
        clear: right;
        height: 38px;
        width: auto;
        font-weight: bold;
        line-height: 38px;
        margin: 0;
        right: 150px;
        color: white;
        font-size: 80%;
        text-align: center;
        padding-right: 45px;
        }

        #topp ul.login li.left {
        height: 38px;
        width: 45px;
        padding: 0;
        margin: 0;
        display: block;
        float: left;
        }

        #topp ul.login li {
        text-align: left;
        padding: 0 6px;
        display: block;
        float: left;
        height: 38px;
        }
        #topp ul.login li a {color: red;}
        #topp ul.login li a:hover {color: white;}

        /* Login Panel */
                #topp {
                background: url(http://i44.servimg.com/u/f44/16/64/98/32/login_12.png) repeat-x 0 0;}

                #topp ul.login {
                background: url(http://i44.servimg.com/u/f44/16/64/98/32/loginr11.png) no-repeat right 0;}

                #topp ul.login li.left {
                background: url(http://i44.servimg.com/u/f44/16/64/98/32/loginl11.png) no-repeat left 0;}

                #topp ul.login li {
                background: url(http://i44.servimg.com/u/f44/16/64/98/32/login_13.png) repeat-x 0 0;}

        /*Login*/
                /* toggle effect - show/hide login*/
                #login {
                background: #009AC6;}

                #login .loginContent input:focus.field {
                background: #545454;}

        #login .loginContent{padding-top:0px;width:790px;height:100px;}

        #login .loginContent input.button_login {
        background: transparent url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_login.jpg) no-repeat 0 0;}

        #login .loginClose a {
        background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right 0;}

        #login .loginClose a:hover {
        background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right -20px;}
        </style>

        <!-- Login --><div id="loginn" style="display: block;position: absolute;left: 0px;top: 0px;width: 100%;"><div id="login" style="margin-top:-100px;"><div class="loginContent">




        <table  style="width:100%;"  border="0">
        <tr>

        <td style="text-align:center;">
        <table border="0">
        <tr>

        <td>
        <script>
        jQuery(document).ready(function(){
          jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
              link = jQuery('.panel dl:first img', data).attr('src');
              if(link){
                jQuery('#avatar').html('<img src="'+link+'" align="left" width="60" height="80">');
              }else{
                jQuery('#avatar').html('');
              }
          });
        });
        </script><div id="avatar"><center><img src="http://i53.tinypic.com/1e1fex.gif"></center></div>
        </td>

        <td>
        <span style="font-size: 1.2em;">
        <font size="4">{USERLINK}</font><br />
        <b>Mensagens:</b> {USERCOUNTPOST}
        </span>
        </td>

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



        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Alterar</b><br />
        <a href="../profile.forum?mode=editprofile&amp;page_profil=informations">Informações</a><br />
        <a href="../profile.forum?mode=editprofile&amp;page_profil=preferences">Preferências</a><br />
        <a href="../profile.forum?mode=editprofile&amp;page_profil=signature">Assinatura</a><br />
        <a href="../profile.forum?mode=editprofile&amp;page_profil=avatars">Avatar</a><br />
        </span>
        </td>

        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Ver</b><br />
        <a href="../profile.forum?mode=editprofile&amp;page_profil=friendsfoes">Amigos & ignorados</a><br />
        <a href="../search.forum?search_id=watchsearch">Tópicos supervisionados</a><br />
        <a href="../search.forum?search_id=draftsearch">Rascunhos</a><br />
        <a href="../search.forum?search_id=favouritesearch">Tópicos favoritos</a><br />
        <a href="../rpg_sheet_edit.forum">Ficha de personagem</a><br />
        </span>
        </td>

        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Tópicos & Mensagens</b><br />
        <a href="../msg.forum?folder=inbox">Mensagens Privadas</a><br />
        <a href="../search.forum?search_topics={USERNAME}">Meus tópicos</a><br />
        <a href="../search.forum?search_id=egosearch">Tópicos que participa</a><br />
        <a href="../search.forum?search_author={USERNAME}&show_results=posts">Minhas mensagens</a><br />
        <a href="../search.forum?search_id=newposts">Últimos tópicos</a><br />
        </span>
        </td>

        </tr>
        </table>




        </div>

        </div>


        <!-- /login --><div id="container"><div id="topp">

        <!-- login -->

        <ul class="login">

        <li class="left"> </li>

        <li><a id="toggleLogin" href="#" onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')? '-100px' : '0px');">Painel de Usuário</a></li>

        </ul> <!-- / login -->

        </div> <!-- / topp --><div class="clearfix"></div>
        </div>

Este é o que eu quero, pois o avatar nele aparece... Mas as letras das categorias ficam grandes.

Olá,

Aqui apareceu normalmente no meu fórum de testes:
https://i.servimg.com/u/f48/15/88/72/83/prova10.png

E no seu também:
https://i.servimg.com/u/f48/15/88/72/83/0111.png

Registrei-me no seu fórum para garantir e funciona!

Não percebe que a fonte do titulo está enorme?

Olá!

Do título ou do Painel todo?

Caso seja do Painel todo teste esse código:

Código:

 <!-- The CSS -->
        <link rel="stylesheet" href="http://web-kreation.com/demos/login_form_mootools_1.2/fx.slide.css" type="text/css" media="screen" />
        <style>
        #login {
        overflow: visible;
        height: auto;
        -webkit-transition:  margin-top 0.5s ease-in-out 0s;
        -moz-transition:  margin-top 0.5s ease-in-out 0s;
        -o-transition:    margin-top 0.5s ease-in-out 0s;
        transition:    margin-top 0.5s ease-in-out 0s;

        }

        /* Login Panel I */
        #topp {
        height: 38px;
        position: relative;
        }

        #topp ul.login {
        display: block;
        position: relative;
        float: right;
        clear: right;
        height: 38px;
        width: auto;
        font-weight: bold;
        line-height: 38px;
        margin: 0;
        right: 150px;
        color: white;
        font-size: 65%;
        text-align: center;
        padding-right: 45px;
        }

        #topp ul.login li.left {
        height: 38px;
        width: 45px;
        padding: 0;
        margin: 0;
        display: block;
        float: left;
        }

        #topp ul.login li {
        text-align: left;
        padding: 0 6px;
        display: block;
        float: left;
        height: 38px;
        }
        #topp ul.login li a {color: red;}
        #topp ul.login li a:hover {color: white;}

        /* Login Panel */
                #topp {
                background: url(http://i44.servimg.com/u/f44/16/64/98/32/login_12.png) repeat-x 0 0;}

                #topp ul.login {
                background: url(http://i44.servimg.com/u/f44/16/64/98/32/loginr11.png) no-repeat right 0;}

                #topp ul.login li.left {
                background: url(http://i44.servimg.com/u/f44/16/64/98/32/loginl11.png) no-repeat left 0;}

                #topp ul.login li {
                background: url(http://i44.servimg.com/u/f44/16/64/98/32/login_13.png) repeat-x 0 0;}

        /*Login*/
                /* toggle effect - show/hide login*/
                #login {
                background: #009AC6;}

                #login .loginContent input:focus.field {
                background: #545454;}

        #login .loginContent{padding-top:0px;width:790px;height:100px;}

        #login .loginContent input.button_login {
        background: transparent url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_login.jpg) no-repeat 0 0;}

        #login .loginClose a {
        background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right 0;}

        #login .loginClose a:hover {
        background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right -20px;}
        </style>

        <!-- Login --><div id="loginn" style="display: block;position: absolute;left: 0px;top: 0px;width: 100%;"><div id="login" style="margin-top:-100px;"><div class="loginContent">




        <table  style="width:100%;"  border="0">
        <tr>

        <td style="text-align:center;">
        <table border="0">
        <tr>

        <td>
        <script>
        jQuery(document).ready(function(){
          jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
              link = jQuery('.panel dl:first img', data).attr('src');
              if(link){
                jQuery('#avatar').html('<img src="'+link+'" align="left" width="60" height="80">');
              }else{
                jQuery('#avatar').html('');
              }
          });
        });
        </script><div id="avatar"><center><img src="http://i53.tinypic.com/1e1fex.gif"></center></div>
        </td>

        <td>
        <span style="font-size: 1.2em;">
        <font size="4">{USERLINK}</font><br />
        <b>Mensagens:</b> {USERCOUNTPOST}
        </span>
        </td>

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



        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Alterar</b><br />
        <a href="../profile.forum?mode=editprofile&amp;page_profil=informations">Informações</a><br />
        <a href="../profile.forum?mode=editprofile&amp;page_profil=preferences">Preferências</a><br />
        <a href="../profile.forum?mode=editprofile&amp;page_profil=signature">Assinatura</a><br />
        <a href="../profile.forum?mode=editprofile&amp;page_profil=avatars">Avatar</a><br />
        </span>
        </td>

        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Ver</b><br />
        <a href="../profile.forum?mode=editprofile&amp;page_profil=friendsfoes">Amigos & ignorados</a><br />
        <a href="../search.forum?search_id=watchsearch">Tópicos supervisionados</a><br />
        <a href="../search.forum?search_id=draftsearch">Rascunhos</a><br />
        <a href="../search.forum?search_id=favouritesearch">Tópicos favoritos</a><br />
        <a href="../rpg_sheet_edit.forum">Ficha de personagem</a><br />
        </span>
        </td>

        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Tópicos & Mensagens</b><br />
        <a href="../msg.forum?folder=inbox">Mensagens Privadas</a><br />
        <a href="../search.forum?search_topics={USERNAME}">Meus tópicos</a><br />
        <a href="../search.forum?search_id=egosearch">Tópicos que participa</a><br />
        <a href="../search.forum?search_author={USERNAME}&show_results=posts">Minhas mensagens</a><br />
        <a href="../search.forum?search_id=newposts">Últimos tópicos</a><br />
        </span>
        </td>

        </tr>
        </table>




        </div>

        </div>


        <!-- /login --><div id="container"><div id="topp">

        <!-- login -->

        <ul class="login">

        <li class="left"> </li>

        <li><a id="toggleLogin" href="#" onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')? '-100px' : '0px');">Painel de Usuário</a></li>

        </ul> <!-- / login -->

        </div> <!-- / topp --><div class="clearfix"></div>
        </div>

Até mais.

Título, eu digo, o da categoria... Onde está escrito principal, área desing...



Quero deixar o que está grande, pequeno. O problema é este código do Painel de Usuário...

Olá!

Aceda à "Folha de estilo CSS":
Painel de Controle Visualização Imagens e cores Cores Folha de estilo CSS

Código:

.topiclist .header dd.dterm .table-title h2{font-size:12px}

Salve.

Até mais.

Valeu =]

Agora falta me ajudarem a distanciar o topo do fórum com o fórum...
Tipo, como dá pra ver, o painel fica sobre o banner do fórum, eu gostaria de distanciar um pouco.

Olá!

Aceda à "Folha de estilo CSS":
Painel de Controle Visualização Imagens e cores Cores Folha de estilo CSS

Código:

#wrap{margin-top:500px}

Salve.

Até mais.

Valeu!

Será que tem alguma maneira de fazê-lo aparecer em todas as páginas?
Obrigado.

Se não tiver como, pode fechar.

Olá!

Talvez tenha, mas antes você precisar me passar o código do Painel de usuário que você está usando.

Até mais.

Código:

        <!-- The CSS -->
            <link rel="stylesheet" href="http://web-kreation.com/demos/login_form_mootools_1.2/fx.slide.css" type="text/css" media="screen" />
            <style>
            #login {
            overflow: visible;
            height: auto;
            -webkit-transition: margin-top 0.5s ease-in-out 0s;
            -moz-transition: margin-top 0.5s ease-in-out 0s;
            -o-transition: margin-top 0.5s ease-in-out 0s;
            transition: margin-top 0.5s ease-in-out 0s;

            }

            /* Login Panel I */
            #topp {
            height: 38px;
            position: relative;
            }

            #topp ul.login {
            display: block;
            position: relative;
            float: right;
            clear: right;
            height: 38px;
            width: auto;
            font-weight: bold;
            line-height: 38px;
            margin: 0;
            right: 150px;
            color: white;
            font-size: 80%;
            text-align: center;
            padding-right: 45px;
            }

            #topp ul.login li.left {
            height: 38px;
            width: 45px;
            padding: 0;
            margin: 0;
            display: block;
            float: left;
            }

            #topp ul.login li {
            text-align: left;
            padding: 0 6px;
            display: block;
            float: left;
            height: 38px;
            }
            #topp ul.login li a {color: #ffffff;}
            #topp ul.login li a:hover {color: white;}

            /* Login Panel */
            #topp {
            background: url(http://i44.servimg.com/u/f44/16/64/98/32/login_12.png) repeat-x 0 0;}

            #topp ul.login {
            background: url(http://i44.servimg.com/u/f44/16/64/98/32/loginr11.png) no-repeat right 0;}

            #topp ul.login li.left {
            background: url(http://i44.servimg.com/u/f44/16/64/98/32/loginl11.png) no-repeat left 0;}

            #topp ul.login li {
            background: url(http://i44.servimg.com/u/f44/16/64/98/32/login_13.png) repeat-x 0 0;}

            /*Login*/
            /* toggle effect - show/hide login*/
            #login {
            background: #009AC6;}

            #login .loginContent input:focus.field {
            background: #545454;}

            #login .loginContent{padding-top:0px;width:790px;height:100px;}

            #login .loginContent input.button_login {
            background: transparent url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_login.jpg) no-repeat 0 0;}

            #login .loginClose a {
            background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right 0;}

            #login .loginClose a:hover {
            background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right -20px;}div#loginn a:hover{color:red!important}
            </style>

            <!-- Login --><div id="loginn" style="display: block;position: absolute;left: 0px;top: 0px;width: 100%;"><div id="login" style="margin-top:-100px;"><div class="loginContent">




            <table style="width:100%;" border="0">
            <tr>

            <td style="text-align:center;">
            <table border="0">
            <tr>

            <td>
            <script>
            jQuery(document).ready(function(){
            jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
            link = jQuery('.panel dl:first img', data).attr('src');
            if(link){
            jQuery('#avatar').html('<img src="'+link+'" align="left" width="60" height="80">');
            }else{
            jQuery('#avatar').html('');
            }
            });
            });
            </script><div id="avatar"><center><img src="http://i53.tinypic.com/1e1fex.gif"></center></div>
            </td>

            <td>
            <span style="font-size: 1.2em;">
            <font size="3"><a href="/profile?mode=editprofile" style="color:#ffffff">{USERNAME}</a></font></br>
            <b>  Mensagens:</b> {USERCOUNTPOST}
            </span>
            </td>

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



            <td style="text-align:center;">
            <span style="font-size: 1.2em;"><b>Alterar</b><br>

            <a href="../profile.forum?mode=editprofile&amp;page_profil=informations"><font color="#FFFFFF">Informações</font></a><br>

            <a href="../profile.forum?mode=editprofile&amp;page_profil=preferences"><font color="#FFFFFF">Preferências</font></a><br>

            <a href="../profile.forum?mode=editprofile&amp;page_profil=signature"><font color="#FFFFFF">Assinatura</font></a><br>

            <a href="../profile.forum?mode=editprofile&amp;page_profil=avatars"><font color="#FFFFFF">Avatar</font></a>

            </span>
            </td>

            <td style="text-align:center;">
            <span style="font-size: 1.2em;"><b>Ver</b><br>

            <a href="../profile.forum?mode=editprofile&amp;page_profil=friendsfoes"><font color="#FFFFFF">Amigos & ignorados</font></a><br>

            <a href="../search.forum?search_id=watchsearch"><font color="#FFFFFF">Tópicos supervisionados</font></a><br>

            <a href="../search.forum?search_id=favouritesearch"><font color="#FFFFFF">Tópicos favoritos</font></a><br>

            <a href="../rpg_sheet_edit.forum"><font color="#FFFFFF">Ficha de personagem</font></a>

            </span>
            </td>

            <td style="text-align:center;">
            <span style="font-size: 1.2em;"><b>Tópicos & Mensagens</b><br>

            <a href="../msg.forum?folder=inbox"><font color="#FFFFFF">Mensagens Privadas</font></a><br>

            <a href="../search.forum?search_topics=favouritesearch"><font color="#FFFFFF">Meus tópicos</font></a><br>

            <a href="../search.forum?search_id=egosearch"><font color="#FFFFFF">Tópicos que participa</font></a><br>

            <a href="../search.forum?search_author=favouritesearch&show_results=posts"><font color="#FFFFFF">Minhas mensagens</font></a><br>

            </span>
            </td>

            </tr>
            </table>




            </div>

            </div>


            <!-- /login --><div id="container"><div id="topp">

            <!-- login -->

            <ul class="login">

            <li class="left"> </li>

            <li><a id="toggleLogin" href="#" onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')? '-100px' : '0px');">Painel de Usuário</a></li>

            </ul> <!-- / login -->

            </div> <!-- / topp --><div class="clearfix"></div>
            </div></p></div>



Tá aí..