[TUTORIAL] Painel de login na parte superior

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

  • 0

[TUTORIAL] Painel de login na parte superior

Mensagem por Cream em 30/01/12, 09:09 pm



Painel de controle personalizado

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


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

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

- 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:
  <!-- 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}
        </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?


  • 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:
            #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;}
    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
avatar

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11636

Ver perfil do usuário http://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum