Como personalizar caixa de conectados/estatisticas

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

Resolvido Como personalizar caixa de conectados/estatisticas

Mensagem por Mercer' em 11/11/12, 09:11 pm

Como faço para personalizar deste modo,ou criando uma imagem com um campo para personalizar e alinhar o campo na imagem...
se conseguirem entender obrigado rsrs....


http://rmbr.forumeiros.com <- site onde se encontra a personalização


Fórum: http://morre.forumeiros.com (punBB)

Imagens do problema:


Última edição por Mercer' em 12/11/12, 12:16 am, editado 2 vez(es)
avatar

Mercer'
Nível 9

Masculino
Inscrito dia : 07/06/2012
Mensagens : 158
Pontos Ativos : 220

Ver perfil do usuário http://idesign.forumais.com

Resolvido Re: Como personalizar caixa de conectados/estatisticas

Mensagem por BrunoH. em 11/11/12, 10:06 pm

Olá!
Painel de Controle ->> Visualização ->> Templates ->> Geral ->> index_body
Clique em Editar Modificar, procure (Ctrl + F) por:
Código:
<!-- BEGIN disable_viewonline -->
e
Código:
<!-- END disable_viewonline -->
Apague todo o código entre essas 2 Tags e substitua por este:
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 seu template!
Agora, Aceda a "Folha de Estilo CSS":
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta Folha de Estilo CSS
Código:
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;
    }
    .letras:hover{
      border-bottom:2px solid white;
      text-shadow:none;
      border:2px solid black;
      trasition: background linear 0.5s;
      -o-trasition: background linear 0.5s;
      -moz-trasition: background linear 0.5s;
      -webkit-trasition: background linear 0.5s;
      background: none repeat scroll 0 0 #F7F7F7;
    }
    #stats2{
      margin-bottom:10px!Important;
      background: none repeat scroll 0 0 #FCFCFC;
        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;
      background: none repeat scroll 0 0 #FCFCFC;
        border: 1px solid #D9D9D9;
        border-radius: 3px 3px 3px 3px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
   
      margin-left:-2px;
      height:145px;
        width: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;
      background: none repeat scroll 0 0 #FCFCFC;
        border: 1px solid #D9D9D9;
        border-radius: 3px 3px 3px 3px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
   
      margin-right:-2px;
      height:145px;
      margin-left:5px;
          width:350px!Important;
        border:2px solid #787878;box-shadow:2px 1px 3px grey;border-radius:5px;padding:2px;margin-bottom:5px;
    }
  #onlinelist4{
      background: none repeat scroll 0 0 #FCFCFC;
        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.8%;
      max-height:50%;
      border:2px solid #787878;box-shadow:2px 1px 3px grey;border-radius:5px;padding:2px;margin-bottom:5px;
    }
 
    .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;
    }
e Valide!
Agora por final, iremos crie um código JavaScript:
Painel de Controle Seta Módulos Seta HTML e JavaScript Seta Gestão dos códigos JavaScript
Clique em "Criar um novo JavaScript".
Título Seta Escolha um título qualquer.
Investimento Seta No índice.
Código JS:
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()})});
e Salve!

Até mais! Piscada
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Como personalizar caixa de conectados/estatisticas

Mensagem por Mercer' em 11/11/12, 10:29 pm

Ficou perfeito....
Porém 2 duvidas, se eu fizer uma imagem pra por ali no lugar do campo, tem como modificar ? outra...
tem como tirar o "quem passou por aqui " ?
avatar

Mercer'
Nível 9

Masculino
Inscrito dia : 07/06/2012
Mensagens : 158
Pontos Ativos : 220

Ver perfil do usuário http://idesign.forumais.com

Resolvido Re: Como personalizar caixa de conectados/estatisticas

Mensagem por BrunoH. em 11/11/12, 10:39 pm

Olá!
Sobre a questão da imagem, é possível. Porem não aconselho o senhor a colocar.
Sobre o Modificar a zona "Quem está On", no código do index_body que lhe forneci, veja onde modificar:
Spoiler:
<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>
Procure pelo nome em Vermelho Modifique ao seu desejo, salve e publique o template!

Até mais! Piscada
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Como personalizar caixa de conectados/estatisticas

Mensagem por Mercer' em 11/11/12, 10:52 pm

Poderia me falar o local que vejo a zona pra mudar,a imagem se possivel.
Agora pelo resto muito obrigado funcionou perfeitamente,editei ali e deixei de minha preferencia....

Cordialmente, Mercer.
avatar

Mercer'
Nível 9

Masculino
Inscrito dia : 07/06/2012
Mensagens : 158
Pontos Ativos : 220

Ver perfil do usuário http://idesign.forumais.com

Resolvido Re: Como personalizar caixa de conectados/estatisticas

Mensagem por BrunoH. em 11/11/12, 11:05 pm

Olá!
Para adicionar uma imagem de fundo, adicione os seguintes códigos em sua Folha de Estilo CSS:
Imagem de fundo "Quem está Online":
#onlinelist2 {background-image: url(URL_DA_IMAGEM);}
Imagem de Fundo "Legenda":
#onlinelist3 {background-image: url(URL_DA_IMAGEM);}

Até mais! Piscada
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Como personalizar caixa de conectados/estatisticas

Mensagem por Mercer' em 12/11/12, 12:16 am

@BrunoH. escreveu:Olá!
Para adicionar uma imagem de fundo, adicione os seguintes códigos em sua Folha de Estilo CSS:
Imagem de fundo "Quem está Online":
#onlinelist2 {background-image: url(URL_DA_IMAGEM);}
Imagem de Fundo "Legenda":
#onlinelist3 {background-image: url(URL_DA_IMAGEM);}

Até mais! Piscada

Obrigado pela ajuda manin, Parabéns pelo trabalho competente e agil....
Se precisar de algo MP - me rsrs...
Grato, Mercer
avatar

Mercer'
Nível 9

Masculino
Inscrito dia : 07/06/2012
Mensagens : 158
Pontos Ativos : 220

Ver perfil do usuário http://idesign.forumais.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