Fórum dos Fóruns

Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

Como personalizar caixa de conectados/estatisticas

2 participantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum

Ir para baixo

Tópico resolvido Como personalizar caixa de conectados/estatisticas

Mensagem por Mercer' 11.11.12 23:11

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: Como personalizar caixa de conectados/estatisticas Y28r3Como personalizar caixa de conectados/estatisticas Y28r3


Última edição por Mercer' em 12.11.12 2:16, editado 2 vez(es)
Mercer'
Mercer'
***

Membro desde : 08/06/2012
Mensagens : 158
Pontos : 220

http://idesign.forumais.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar caixa de conectados/estatisticas

Mensagem por BrunoH. 12.11.12 0:06

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
BrunoH.
BrunoH.
Membro Entusiasta

Membro desde : 15/06/2012
Mensagens : 7675
Pontos : 10386

http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar caixa de conectados/estatisticas

Mensagem por Mercer' 12.11.12 0:29

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 " ?
Mercer'
Mercer'
***

Membro desde : 08/06/2012
Mensagens : 158
Pontos : 220

http://idesign.forumais.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar caixa de conectados/estatisticas

Mensagem por BrunoH. 12.11.12 0:39

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:
Procure pelo nome em Vermelho Modifique ao seu desejo, salve e publique o template!

Até mais! Piscada
BrunoH.
BrunoH.
Membro Entusiasta

Membro desde : 15/06/2012
Mensagens : 7675
Pontos : 10386

http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar caixa de conectados/estatisticas

Mensagem por Mercer' 12.11.12 0:52

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.
Mercer'
Mercer'
***

Membro desde : 08/06/2012
Mensagens : 158
Pontos : 220

http://idesign.forumais.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar caixa de conectados/estatisticas

Mensagem por BrunoH. 12.11.12 1:05

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
BrunoH.
BrunoH.
Membro Entusiasta

Membro desde : 15/06/2012
Mensagens : 7675
Pontos : 10386

http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar caixa de conectados/estatisticas

Mensagem por Mercer' 12.11.12 2:16

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
Mercer'
Mercer'
***

Membro desde : 08/06/2012
Mensagens : 158
Pontos : 220

http://idesign.forumais.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum

 
Permissões neste sub-fórum
Não podes responder a tópicos