Rpg Maker BRasil
RPG Maker Brasil - RMBR

Seja Bem vindo ao Forúm! Faça seu cadastro e desfrute sobre o mundo do RPG Maker!
P.S.: PARA MELHOR VIZUALIZAÇÃO DO FORUM SEM BUGS, RECOMENDO QUE USEM O MOZILLA FIREFOX OU O GOOGLE CHROME!
Rpg Maker BRasil

Evoluindo cada vez mais!


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

RMBR

avatar
Administrador

[Você precisa estar registrado e conectado para ver esta imagem.]

[TUTORIAL] "Quem está online?" personalizado

Olá, muita gente me pediu para para personalizar a área de quem está conectado do forum, então nese tutorial eu decidi fazer uma edição simples nessa área, é bem básico, só que mais profissional, organizado e elegante.

[Você precisa estar registrado e conectado para ver esta imagem.]CRÉDITOS!!
Esse código foi inteiramente construído por HenRyqUé referente à: [Você precisa estar registrado e conectado para ver este link.] cópias permitidas se permanecerem os devidos créditos!! (HenRyquUéè, ©RMBR)
--> Tutoriais, dicas e astúcias <--
[TUTORIAL] "Quem está online?" personalizado


- Modificando o template...
Vá em:
Visualização > Templates > Geral >> index_body
Procure por:
Código:
<!-- BEGIN disable_viewonline -->
e
Código:
<!-- END disable_viewonline -->
Apague todo o código que estiver entre essas tag's e troque por estes:

CLIQUE AQUI PARA ABRIR:
Código:
<div class="fundo"><center><b class="letras">ESTATÍSTICAS</b></center><div style="" id="stats2">
                 
                  <b> » </b>{TOTAL_POSTS} <p/>
                  <b> » </b>{TOTAL_USERS} <p/>
                  <b> » </b>{NEWEST_USER}
                        </div>
<!--<div id="pun-info" class="main">
   <div class="main-content"> -->

      <table border="0" cellspancing="auto" cellpadding="auto">
  <tr><td width="50%" colspan="2"><center><b class="letras">QUEM ESTÁ ON?</b></center><div id="onlinelist2">
                     {TOTAL_USERS_ONLINE}<br />
         {RECORD_USERS}

         <br />
                          {LOGGED_IN_USER_LIST}</div></td>
                        <td width="50%" colspan="2"><center><b class="letras">QUEM PASSOU POR AQUI?</b></center><div id="onlinelist3">{L_ONLINE_USERS}
                        {L_CONNECTED_MEMBERS}<br /></div></td></tr></table><center><b class="letras">LEGENDAS</b></center>
                      <div id="onlinelist4">{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
         
                        <p>{LEGEND} : {GROUP_LEGEND}</p></div></div>
         

      
      <div class="fundo2"><!-- BEGIN switch_chatbox_activate -->
      
         <p class="page-bottom">
         {TOTAL_CHATTERS_ONLINE} :
         {CHATTERS_LIST}<br />
         <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
               insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            </script>
         <!-- END switch_chatbox_popup -->
         </p>

      <!-- END switch_chatbox_activate -->
</div>
Salve e Publique o Template!


- Inserindo o código css...
Vá em:

Visualização > Imagens e Cores > Cores >> Folha de estilo CSS
Adicione o seguinte código à folha:
CLIQUE AQUI PARA ABRIR:
Código:
/*QUEM ESTÁ ONLINE? -PERSONALIZAÇÃO*/

    .letras{
      border-bottom:2px solid white;
      color:#8C8C8C;
      text-shadow:1px 0px 1px #CFCFCF;
      background: none repeat scroll 0 0 #FCFCFC;
      position:relative;
      bottom:-1px;
      border:2px solid #787878;
      border-radius: 5px 5px 0px 0px;
      padding:5px;
      padding-bottom:0px!Important;
    }
  #onlinelist2, #onlinelist3{
  min-height:100px!Important;
}
    #stats2{
      margin-bottom:10px!Important;
            border: 1px solid #D9D9D9;
        border-radius: 3px 3px 3px 3px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
   
      max-width:100%;
      width:auto;
      border:2px solid #787878;box-shadow:2px 1px 3px grey;border-radius:5px;padding:2px;margin-bottom:5px;
    }
      #onlinelist2{
      margin-bottom:10px!Important;
            border: 1px solid #D9D9D9;
        border-radius: 3px 3px 3px 3px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
      min-height:80px;
      margin-left:-2px;
      height:auto;
        width:97.6%/*350px*/!Important;
      border:2px solid #787878;box-shadow:2px 1px 3px grey;border-radius:5px;padding:2px;margin-bottom:5px;
    }
      #onlinelist3{ margin-bottom:10px!Important;
            border: 1px solid #D9D9D9;
        border-radius: 3px 3px 3px 3px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    min-height:80px;
      margin-right:-2px;
      height:autopx;
      margin-left:3px;
          width:97.6%/*350px*/!Important;
        border:2px solid #787878;box-shadow:2px 1px 3px grey;border-radius:5px;padding:2px;margin-bottom:5px;
    }
  #onlinelist4{
              border: 1px solid #D9D9D9;
        border-radius: 3px 3px 3px 3px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
      max-width:100%;
      width:98.9%;
      max-height:50%;
      border:2px solid #787878;box-shadow:2px 1px 3px grey;border-radius:5px;padding:2px;margin-bottom:5px;
    }
  #stats2, #onlinelist2, #onlinelist3, #onlinelist4, .letras{
  height:auto;
  background: #F7F7F7 url(http://i48.servimg.com/u/f48/16/58/89/73/alt210.gif);
    background-repeat: repeat-x repeat-y;
}
    .fundo{
      margin-bottom:5px;
      background: none repeat scroll 0 0 #F3F3F3;
        border: 1px solid #D9D9D9;
        border-radius: 3px 3px 3px 3px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
        margin-top: 10px;
      padding:10px;
    }
    .fundo2{
      margin-top:5px;
      background: none repeat scroll 0 0 #F3F3F3;
        border: 1px solid #D9D9D9;
        border-radius: 3px 3px 3px 3px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
        margin-top: 10px;
      padding:10px;
    }/*www.rmbr.forumeiros.com*/
Valide!


- Inserindo o código JavaScript...
Vá em:

Módulos > HTML e JavaScript > Gestão de Códigos Javascript >> Novo Javascript

Título * : Dê qualquer título (escolha um título que descreve a função do codigo).
Investimento : No índice.
Código JavaScript * : Adicione este código à folha:

CLIQUE AQUI PARA ABRIR:
Código:
jQuery(document).ready(function(){jQuery('.fundo #stats2').prev().hide();jQuery('.fundo #stats2').hover(function(){jQuery(this).prev().show()},function(){jQuery(this).prev().hide()})});

jQuery(document).ready(function(){jQuery('.fundo #onlinelist2').prev().hide();jQuery('.fundo #onlinelist2').hover(function(){jQuery(this).prev().show()},function(){jQuery(this).prev().hide()})});

jQuery(document).ready(function(){jQuery('.fundo #onlinelist3').prev().hide();jQuery('.fundo #onlinelist3').hover(function(){jQuery(this).prev().show()},function(){jQuery(this).prev().hide()})});

jQuery(document).ready(function(){jQuery('.fundo #onlinelist4').prev().hide();jQuery('.fundo #onlinelist4').hover(function(){jQuery(this).prev().show()},function(){jQuery(this).prev().hide()})});
Salve!


- Resultado...
[Você precisa estar registrado e conectado para ver esta imagem.]

  • Funciona em quais versoes?
    PUNBB e PHPBB2.


  • Quais as vantagens deste código?
    As vantagens é que a área fica bem mais elegante, profissional e organizado.




[Você precisa estar registrado e conectado para ver este link.]


[Você precisa estar registrado e conectado para ver esta imagem.] Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[TUTORIAL] "Quem está online?" personalizado



Última edição por RMBR em 12/11/12, 01:00 pm, editado 1 vez(es)

http://rmbr.forumeiros.com

-Naruto

avatar
Administrador
Publicitário
Helper
Comentando para ver o Conteudo

GyGu

avatar
Iniciante
Comentando para ver o Conteudo!

GyGu

avatar
Iniciante
Acabei de utilizar este tutorial, mas porem algo não está 100% correto veja como ficou na imagem a baixo.

[Você precisa estar registrado e conectado para ver esta imagem.]

kostaskiller2

avatar
Sou Nível 3
thenx.. would ask to help Muito feliz

RMBR

avatar
Administrador
GyGu escreveu:Acabei de utilizar este tutorial, mas porem algo não está 100% correto veja como ficou na imagem a baixo.

[Você precisa estar registrado e conectado para ver esta imagem.]
Pronto, atualizei os códigos do tutorial, agora deve funcionar em todos os tipos de foruns (inclusive o seu), troque o codigo css.

http://rmbr.forumeiros.com

GyGu

avatar
Iniciante
Muito obrigado RMBR agora sim fica muito melhor, mesmo quando a lista de user´s aumenta a caixa tambem aumenta, Valeu Rep +

-Naruto

avatar
Administrador
Publicitário
Helper
Tutorial Aceito

Movido~~ Para ~~ Tutoriais Aprovados.

AnnaPaulaZ

avatar
Iniciante
comentando para ver o código

Arikarindokuta

avatar
Iniciante
bem legal vlw ae



[Você precisa estar registrado e conectado para ver esta imagem.]

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

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