Personalizar painel de usuário

Qual é sua questão:
Gostaria de saber como modificar o painel de usuário, se puder, gostaria de saber de todas as possíveis mudanças que se pode fazer nele, logo, personalizar ele...

Mas o que mais quero, é que ao um convidado clicar em Painel de Usuário, apareça para ele fazer login.

Que medidas você tomou para corrigir o problema:
Procurei e achei um tópico que fale sobre isto, porém dizia muita pouca coisa que não me serviu.

Apresente-nos imagens do problema (se necessário):


Endereço do fórum:


Versão do fórum:
PHPBB3

Olá,

Veja este exemplo: https://ajuda.forumeiros.com/t41579-

Até mais!


Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre o painel de controle do fórum'

Olá Jeffrey

Na verdade, não estou dizendo deste painel de usuário, igual ao do Fdf, digo de um que fica no topo da página.

Atenciosamente, kebraosso.

Olá,

Veja se um dos tópicos apresentados na pesquisa resolve sua questão: Pesquisa avançada: Painel de usuário

Até mais!

Boa tarde,

Experimente este código para o Painel no topo da página:

Código:

<script>
var nnome = "{USERNAME}" ;
if ( nnome != "Convidado"){
document.write(' <style> ');
document.write(' #loginn{display:none!important;} ');
document.write(' </style> ');
}
</script>


<!-- 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 */
#top {
background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_top.jpg) repeat-x 0 0;}

#top ul.login {
background: url(http://img18.imageshack.us/img18/3017/loginrw.png) no-repeat right 0;}

#top ul.login li.left {
background: url(http://img41.imageshack.us/img41/3439/loginlc.png) no-repeat left 0;}

#top ul.login li {
background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_m.jpg) repeat-x 0 0;}

/*Login*/
/* toggle effect - show/hide login*/
#login {
background: #1E1E1E;}

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

#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:-105px;">
<div class="loginContent">

<form action="/login.forum" method="post" enctype="multipart/form-data" name="form_login" id="form_login2">

<label for="log"><b>Username: </b></label>
<input name="username" size="23" class="field" maxlength="25" type="text" style="clear: both;" />

<label for="pwd"><b>Password:</b></label>
<input name="password" class="field" size="23" maxlength="25" type="password" style="clear: both;" />

<input class="menuoption button_login" type="submit" name="login" value=" " />

<input type="hidden" name="redirect" value="" />

</form>
<div class="left">

<label for="rememberme">
<input name="autologin" id="autologin" type="checkbox" tabindex="4" checked="checked" class="radio" /> Conexão automática
</label>

</div>
<div class="right">Não é um membro? <a href="/profile.forum?mode=register">Registar-me</a> | <a class="gensmall" href="/profile.forum?mode=sendpassword"> Recuperar Senha</a></div>

</div>
<div class="loginClose"><a href="#" id="closeLogin" onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')? '-105px' : '0px');">Fechar Painel</a></div>

</div>


<!-- /login -->


<div id="container">
<div id="top">

<!-- login -->

<ul class="login">

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

<li>Olá Visitante!</li>

<li>|</li>

<li><a id="toggleLogin" href="#" onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')? '-105px' : '0px');">Entrar</a></li>

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

</div> <!-- / top -->


<div class="clearfix"></div>
</div>



</div>

Adicione-o em:
Painel de Controle -> Visualização -> Home page -> Geral
Procure pelo campo "Conteúdo da mensagem. :" e o adicione.

Lembrando que esse tipo de painel de usuário funcionam apenas nas versões Invision e PunBB.

Cumprimentos,
Shetos

Olá,

Bem, como eu gostaria dele em todas as áreas do fórum, tenho que por ele como Widget e já botei e funcionou.

Mas sendo mais direto, eu quero modificar o código do painel de usuário para ele não ficar igual aos demais fóruns, e para que eu modifique de acordo com o tema do fórum também.

Também queria saber se tem como quando um convidado clicar em painel de usuário, aparecer para ele fazer login.

Atenciosamente,
kebraosso.

Coloque ele nos anuncios.

Como assim nos anúncios?

kebraosso escreveu:Olá,

Bem, como eu gostaria dele em todas as áreas do fórum, tenho que por ele como Widget e já botei e funcionou.

Mas sendo mais direto, eu quero modificar o código do painel de usuário para ele não ficar igual aos demais fóruns, e para que eu modifique de acordo com o tema do fórum também.

Também queria saber se tem como quando um convidado clicar em painel de usuário, aparecer para ele fazer login.

Atenciosamente,
kebraosso.

Poderia nos passar o código utilizado? Foi o dado por Shetos?

Abraços.

Olá,

Utilizo este código. Não sei se é o mesmo de Shetos, eu já tinha este código guardado no PC a um tempinho...

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: #33CCCC;}
    #topp ul.login li a:hover {color: white;}
 
    /* Login Panel */
    #topp {
    background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_top.jpg) repeat-x 0 0;}
 
    #topp ul.login {
    background: url(http://img18.imageshack.us/img18/3017/loginrw.png) no-repeat right 0;}
 
    #topp ul.login li.left {
    background: url(http://img41.imageshack.us/img41/3439/loginlc.png) no-repeat left 0;}
 
    #topp ul.login li {
    background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_m.jpg) repeat-x 0 0;}
 
    /*Login*/
    /* toggle effect - show/hide login*/
    #login {
    background: #1E1E1E;}
 
    #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"><a href="http://pwn3dmods.forumbrasil.net/profile.forum?mode=viewprofile&amp;u=283">{USERNAME}</a></font>
 
    <b>Mensagens:</b> {USERCOUNTPOST}
   
    <b>Última Visita:</b> {USERLASTVISIT}
   
    <b>Registrado Desde:</b> {USERREGDATE}
    </span>
    </td>
 
    </tr>
    </table>
    </td>
 
 
 
    <td style="text-align:center;">
    <span style="font-size: 1.2em;"><b>Alterar</b>
 
    <a href="../profile.forum?mode=editprofile&amp;page_profil=informations">Informações</a>
 
    <a href="../profile.forum?mode=editprofile&amp;page_profil=preferences">Preferências</a>
 
    <a href="../profile.forum?mode=editprofile&amp;page_profil=signature">Assinatura</a>
 
    <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>
 
    <a href="../profile.forum?mode=editprofile&amp;page_profil=friendsfoes">Amigos & ignorados</a>
 
    <a href="../search.forum?search_id=watchsearch">Tópicos supervisionados</a>
 
    <a href="../search.forum?search_id=draftsearch">Rascunhos</a>
 
    <a href="../search.forum?search_id=favouritesearch">Tópicos favoritos</a>
 
    <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>
 
    <a href="../msg.forum?folder=inbox">Mensagens Privadas</a>
 
    <a href="../search.forum?search_topics=Victor">Meus tópicos</a>
 
    <a href="../search.forum?search_id=egosearch">Tópicos que participa</a>
 
    <a href="../search.forum?search_author=Victor&show_results=posts">Minhas mensagens</a>
 
    <a href="../search.forum?search_id=newposts">Últimos tópicos</a>
 
    </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>

A unica coisa que modifiquei nele, foi a adição destas duas coisas:

Código:

<b>Última Visita:</b> {USERLASTVISIT}
   
    <b>Registrado Desde:</b> {USERREGDATE}

Atenciosamente,
kebraosso.

kebraosso escreveu:Olá,

Utilizo este código. Não sei se é o mesmo de Shetos, eu já tinha este código guardado no PC a um tempinho...

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: #33CCCC;}
    #topp ul.login li a:hover {color: white;}
 
    /* Login Panel */
    #topp {
    background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_top.jpg) repeat-x 0 0;}
 
    #topp ul.login {
    background: url(http://img18.imageshack.us/img18/3017/loginrw.png) no-repeat right 0;}
 
    #topp ul.login li.left {
    background: url(http://img41.imageshack.us/img41/3439/loginlc.png) no-repeat left 0;}
 
    #topp ul.login li {
    background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_m.jpg) repeat-x 0 0;}
 
    /*Login*/
    /* toggle effect - show/hide login*/
    #login {
    background: #1E1E1E;}
 
    #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"><a href="http://pwn3dmods.forumbrasil.net/profile.forum?mode=viewprofile&u=283">{USERNAME}</a></font>
 
    <b>Mensagens:</b> {USERCOUNTPOST}
   
    <b>Última Visita:</b> {USERLASTVISIT}
   
    <b>Registrado Desde:</b> {USERREGDATE}
    </span>
    </td>
 
    </tr>
    </table>
    </td>
 
 
 
    <td style="text-align:center;">
    <span style="font-size: 1.2em;"><b>Alterar</b>
 
    <a href="../profile.forum?mode=editprofile&page_profil=informations">Informações</a>
 
    <a href="../profile.forum?mode=editprofile&page_profil=preferences">Preferências</a>
 
    <a href="../profile.forum?mode=editprofile&page_profil=signature">Assinatura</a>
 
    <a href="../profile.forum?mode=editprofile&page_profil=avatars">Avatar</a>
 
    </span>
    </td>
 
    <td style="text-align:center;">
    <span style="font-size: 1.2em;"><b>Ver</b>
 
    <a href="../profile.forum?mode=editprofile&page_profil=friendsfoes">Amigos & ignorados</a>
 
    <a href="../search.forum?search_id=watchsearch">Tópicos supervisionados</a>
 
    <a href="../search.forum?search_id=draftsearch">Rascunhos</a>
 
    <a href="../search.forum?search_id=favouritesearch">Tópicos favoritos</a>
 
    <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>
 
    <a href="../msg.forum?folder=inbox">Mensagens Privadas</a>
 
    <a href="../search.forum?search_topics=Victor">Meus tópicos</a>
 
    <a href="../search.forum?search_id=egosearch">Tópicos que participa</a>
 
    <a href="../search.forum?search_author=Victor&show_results=posts">Minhas mensagens</a>
 
    <a href="../search.forum?search_id=newposts">Últimos tópicos</a>
 
    </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>

A unica coisa que modifiquei nele, foi a adição destas duas coisas:

Código:

<b>Última Visita:</b> {USERLASTVISIT}
   
    <b>Registrado Desde:</b> {USERREGDATE}

Atenciosamente,
kebraosso.

Poderia ser mais específico? O que queres adicionar, retirar, modificar...

Abraços.

Olá,

Gostaria de saber mudar as cores das letras, o fundo e etc... Contudo, qualquer informação que sirva para personalizar o painel eu quero saber. Quero deixa-lo diferente dos demais fóruns.

Atenciosamente,
kebraosso.

<!-- 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: #33CCCC;}
#topp ul.login li a:hover {color: white;}

/* Login Panel */
#topp {
background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_top.jpg) repeat-x 0 0;}

#topp ul.login {
background: url(https://2img.net/r/ihimizer/img18/3017/loginrw.png) no-repeat right 0;}

#topp ul.login li.left {
background: url(https://2img.net/r/ihimizer/img41/3439/loginlc.png) no-repeat left 0;}

#topp ul.login li {
background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_m.jpg) repeat-x 0 0;}

/*Login*/
/* toggle effect - show/hide login*/
#login {
background: #1E1E1E;}

#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="https://2img.net/h/oi53.tinypic.com/1e1fex.gif"></center></div>
</td>

<td>
<span style="font-size: 1.2em;">
<font size="4"><a href="http://pwn3dmods.forumbrasil.net/profile.forum?mode=viewprofile&u=283">Convidado</a></font>

<b>Mensagens:</b> 0

<b>Última Visita:</b>

<b>Registrado Desde:</b>
</span>
</td>

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



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

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

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

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

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

</span>
</td>

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

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

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

<a href="../search.forum?search_id=draftsearch">Rascunhos</a>

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

<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>

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

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

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

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

<a href="../search.forum?search_id=newposts">Últimos tópicos</a>

</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>

Olá,

Tentei destacar algumas coisas no código que podem ajudar.
Vermelho -> Posições e tamanhos em pixels.
Laranja -> Link de imagens.
Verde -> Cores hexadecimais.
Roxo -> Nome do painel.

Modificando essas partes ao seu gosto, ficará bem legal
Até!

Acho que você botou apenas uma cor ao invés de laranja e vermelho, ou as cores são bem parecidas.

Mesmo assim, obrigado, já me ajuda um tanto.

Se souberem mais coisas e puderem postar agradeço.

Obrigado Profile.

Atenciosamente,
kebraosso