Para complementar a aparencia do seu fórum, neste tutorial vamos aplicar um painel de controle personalizado no fórum, que estará disponível no topo do fórum.

--> Tutoriais dicas, e astúcias <--
Painel de login na parte superior

1º - Mensagem da home page:
Esse código do painel de controle pode ser adicionado na mensagem da home page do seu fórum, ao qual será exibido na página principal do fórum abaixo dos anúncios rotativos. Para que seja visível no fórum esse painel de controle personalizado, vamos aplicar o código na mensagem da home page, ao qual vamos conhecer um pouco.

Painel de Controle -> Visualização -> Homepage -> Geral ->

Assunto da mensagem - Representa o título da mensagem da home page, ele será sempre em maior destaque do que os outros textos É permitido o uso de códigos HTML neste campo.

Conteúdo da mensagem - Aqui fica a mensagem propriamente dita. Poderá utilizar códigos HTML e BBCode. É importante lembrar também que esta mensagem será visível para todos.

2º - Aplicação do código na home page:
O painel personalizado pode ser adicionado em qualquer local que aceita o HTML. Porém, o que você certamente deseja não é adicioná-lo em uma página HTML e sim em um local ao qual os usuários terão acesso. Vejamos então o código:

Código:Selecionar conteúdo

  <!-- 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&amp;u=283">Convidado</a></font>
 
        <b>Mensagens:</b> 1
        </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>

--> Tutoriais dicas, e astúcias <--
Painel de login na parte superior

• Qual é o resultado?
  
  Expandir esta imagemReduzir esta imagem Ver em tamanho real
  
  
  
• Posso adicionar o CSS do painel na folha de estilo CSS do fórum?
  Se desejar sim. O código CSS é aquele que se encontra dentro das tags "<style>" e "</style>", você poderá copiá-lo e colar na folha de estilo CSS: Painel de controle ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de estilo CSS ->>
  

  Código:Selecionar conteúdo

          #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;}

  Não é aconselhável que faça isso, mas é opção do administrador.
  
  
• Meu painel aparece para os convidados. Há como ocultá-lo?
  Sim! Não é só em um local ao qual o código vai funcionar. Se o seu objetivo foi aplicar esse painel para os membros, você poderá adicioná-lo em um widget personalizado e editar as configurações das autorizações. Para isso, é aconselhável ler o [FAQ] Gerenciar os widgets do fórum.

---

© Fórum dos Fóruns

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Painel de login na parte superior