Ajuda com "Quem está online?" personalizado

Olá estou a ter um problema que uma certa zona de personalização do fórum. Pois estou a tentar personalizar a zona de "Quem está online" e outros, mas no entanto algo corre mal na zona Membros conectados nas últimas horas, como podem ver na imagem a baixo os nome dos user´s descem para fora da caixa.


Os códigos utilizados são estes.

Visualização > Templates > Geral >> index_body

Procure por:


<!-- BEGIN disable_viewonline -->


e

Código: Selecionar conteúdo
<!-- END disable_viewonline -->


Apague todo o código que estiver entre essas tag's e troque por estes:

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>

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

Visualização > Imagens e Cores > Cores >> Folha de estilo CSS

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

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

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

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()})});


---

Fórum: http://www.rewtec.com/forum (punBB)

Imagens do problema:

Olá!
Siga os paços deste tópico:
https://ajuda.forumeiros.com/t69725-

Até mais!

Mas esse é o tutorial que eu segui, (mas de outro forum) e o problema é este, veja a imagem.