Estatísticas personalizada

Qual é minha questão:
Olá, amigos do fórum dos fóruns; eu gostaria de pedir a ajuda de alguns de vocês ; enfim indo ao assunto, eu gostaria que vocês me fornecessem os códigos pra criar esse tipo de estatística: https://2img.net/h/oi48.tinypic.com/332c601.jpg ; eu li o tutorial pra personalização dessa área, porém não consegui criar um efeito assim o lendo; bom conto com vocês.

 

Endereço do meu fórum:
http://narutorpgorigins.forumeiros.com

Versão do fórum:
PUNBB

Por favor em que fórum viste isto?

Perdão esqueci de colocar o link D:, mas enfim, foi aqui: http://bleachninepowers.fullforums.net/forum

Olá!

Somente os templates das versões phpBB2 e PunBB poderão ser modificados.

Painel de Controle Visualização Templates Geral index_body
Substitua o conteúdo por esse:

Código:

{JAVASCRIPT}
<style>#gauche_qeel{margin-right:16%!important}#bas_block_gauche{margin-top: -20%; margin-top: -18%; width: 63%!important}#droite_qeel{margin-top: -23%; left: -3%!important}.bul-q{margin-top: -27px!important}#gauche_qeel{margin-right:16%!important}#bas_block_gauche{margin-top: -20%; margin-top: -18%; width: 63%!important}#droite_qeel{margin-top: -23%; left: -3%!important}.bul-q{margin-top: -27px!important}#tfa_qeel{ width: 96%; position: relative; margin: 10px auto; padding: 5px; border: 1px solid #00abff; box-shadow: 0 0 2px #000; font: 11px Arial; background-image: url(http://img11.hostingpics.net/pics/255465fond2ed2.png); -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } #bloc_tfa{ position: relative; margin: 0; padding: 0; } .bloc_qeel{ position: relative; height: 280px; margin: 0; padding: 0; background: url(http://img11.hostingpics.net/pics/255465fond2ed2.png); border: 1px solid #111111; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } #gauche_qeel{ width: 20%; float: left; } #droite_qeel{ width: 20%; float: right; } #centre_qeel{ width: 58%; margin: 0 0.5%; float: left; } .tfa_groups{ width: 100%; margin: 5px 0 0 0; padding:0; position: absolute; text-align: center; z-index: 2; } .infobul_group{ width: 90%; margin: auto; padding: 0; position: relative; } .in_group{ display: block; background: url(http://img11.hostingpics.net/pics/536613sombre7.png); width: 96%; height: 0; position: relative; bottom: 0; left: 2%; overflow: hidden; z-index: 20; text-align: left; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; border-radius: 0 0 10px 10px; opacity: 0; filter : alpha(opacity=0); -webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -o-transition: all 1.5s ease; transition: all 1.5s ease; } .infobul_group:hover .in_group{ width: 96%; height: 50px; padding: 0; border-width: 1px; opacity: 0.9; filter : alpha(opacity=90); } .in_group span{ display: block; width: 98%; margin: auto; padding: 0; color: #aabdcf; } .in_group a{ color: #ce8d11; text-decoration: none; } .le_groupe{ display: block; width: 98%; height: 22px; line-height: 22px; vertical-align: middle; text-align: center; font: 15px Arial; margin: 2px auto; padding: 0; box-shadow: 0 0 1px #000; text-shadow: 0 1px 0 #000; background-image: url(http://img11.hostingpics.net/pics/536613sombre7.png); vertical-alignement: middle; -moz-border-radius:15px 0px 15px 0px; -webkit-border-radius: 15px 0px 15px 0px; border-radius:15px 0px 15px 0px; border:1px solid #00baff; -moz-box-shadow: 0px 0px 6px #000; -webkit-box-shadow: 0px 0px 6px #000; } .img_g_bas{ position: absolute; z-index: 1; bottom: 0; left: 0; margin: 0 auto; padding: 0; width: 100%; text-align: center; } .tfa-stats{ width: 96%; margin: auto; padding: 5px 0; } .tfa-stats h2{ font: 18px Verdana; color: #00baff; font-style: italic; margin-left: 12px; text-decoration:none!important; text-shadow:0px 1px 0px #000000; background-color: transparent; background-image: url(http://img11.hostingpics.net/pics/596021azav.png); background-repeat: no-repeat; } .in_tfa-content{ width: 100%; margin: auto; padding: 5px 0; } #bas_block{ width: 100%; position: relative; margin: 0; padding: 0; } #bas_block_gauche{ width: 100%; float: left; margin: 0; padding: 0; } .bul-qeel{ width: 98%; margin: 2px auto; padding: 0; position: relative; overflow: hidden; border: 1px solid #00abff; background-image: url(http://img11.hostingpics.net/pics/796154fondsombrepe.png); } .bul_open{ display: block; width: 100%; height: 124px; position: absolute; z-index: 20; top: 0; left: 0; background-image: url(http://img11.hostingpics.net/pics/536613sombre7.png); text-align: center; -webkit-transition: all 1.5s ease; /* pour navigateur webkit */ -moz-transition: all 1.5s ease; /* pour navigateur mozilla */ -o-transition: all 1.5s ease; /* pour navigateur opera */ transition: all 1.5s ease; /* pour les navigateurs récents */ } .bul-qeel:hover .bul_open{ left: -100%; } .bul_open span{ display:block; padding-top: 0; text-align: center; } .in_q_bul{ position: relative; top: 0; left: 0; text-align: left; font: 10px Arial; width: 100%; height: 124px; } .haut_bul{ width: 98%; height: 125px; font: 11px Arial; margin: auto; padding: 3px 0; overflow-y: auto; } .haut_bul .row1, .haut_bul .gensmall, haut_bul .row1 .gensmall{ font: 11px Arial; color: #888888; background: transparent; border: none; } #bas_block2{ width: 100%; position: relative; top: 5px; margin: 0; padding: 0; } #bas_block_gauche2{ width: 49%; float: left; position: relative; margin: 0; padding: 0; } #bas_block_droite2{ width: 49%; float: right; position: relative; margin: 0; padding: 0; } .bul-q{ position: absolute; left: 0; width: 100%; margin: 0 auto; padding: 0; z-index: 3; } .in_q_b{ background-image: url(http://img11.hostingpics.net/pics/536613sombre7.png); border: 1px solid #00abff; border-top: 0; position: relative; height: 0; color: #888888; overflow: hidden; -webkit-transition: all 1.2s ease; -moz-transition: all 1.2s ease; -o-transition: all 1.2s ease; transition: all 1.2s ease; } .bul_op{ display: block; position: relative; width: 150px; height: 16px; background-image: url(http://img11.hostingpics.net/pics/536613sombre7.png); border: 1px solid #00abff; border-top: 0; margin: -1px auto 0; padding: 1px 0 0 0; font: 12px Arial; color: #818181; text-align: center; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } .bul-q:hover .in_q_b{ height: 70px; padding: 3px; }</style>
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
   <ul>
         <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
         <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
      <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
      <li><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
   </ul>
   <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
   <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

<!-- BEGIN message_admin_index -->
<div class="main">
   <!-- BEGIN message_admin_titre -->
   <div class="main-head">
      <h1 class="page-title">{message_admin_index.message_admin_titre.MES_TITRE}</h1>
   </div>
   <!-- END message_admin_titre -->

   <!-- BEGIN message_admin_txt -->
   <div id="pun-announcement">
      <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
   </div>
   <!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<div class="main">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <div class="user_login_form main-box center">
      <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username" /></label>  
      <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password" /></label>  
      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>  
      {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
      <!-- BEGIN switch_fb_connect -->
      <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
      <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
      <!-- END switch_fb_connect -->
   </div>
</form>
</div>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->
<div id="pun-info" class="main">
   <div class="main-content">
<div id="tfa_qeel"><h1><span class="cattitle_qeel"><img src="http://img15.hostingpics.net/pics/478076who.png" style="float: left; margin-top: -140px;"></span></h1><div id="bloc_tfa"><div id="gauche_qeel" class="bloc_qeel"><div class="tfa_groups"><div class="infobul_group"><span class="le_groupe" style="color: #B3179C;">Fondateurs</span><span class="in_group"><span>Ils gèrent le forum. A contacter en cas de problème.<br><a href="http://www.gfx-art.org/g3-fondateurs" target="_blank">Voir les membres du groupe</a></span></span></div><div class="infobul_group"><span class="le_groupe" style="color: #BF0404;">Administrateurs</span><span class="in_group"><span>Ils aident les fonda' au bon fonctionnement du forum.<br><a href="http://www.gfx-art.org/g1-administrateurs" target="_blank">Voir les membres du groupe</a></span></span></div><div class="infobul_group"><span class="le_groupe" style="color: #FF9900;">Modérateurs</span><span class="in_group"><span>La pour surveiller, ils aident et orientent les membres<br><a href="http://www.gfx-art.org/g2-moderateurs" target="_blank">Voir les membres du groupe</a></span></span></div><div class="infobul_group"><span class="le_groupe" style="color: #FBFF00;">Animateurs</span><span class="in_group"><span>Ils mettent l'ambiance et organisent des concours.<br><a href="http://www.gfx-art.org/g18-animateurs" target="_blank">Voir les membres du groupe</a></span></span></div><div class="infobul_group"><span class="le_groupe" style="color: #D97FEB;">Jury des Teams</span><span class="in_group"><span>Des animateurs qui s'occupent des concours des Teans.<br><a href="http://www.gfx-art.org/g28-jury-des-teams" target="_blank">Voir les membres du groupe</a></span></span></div><div class="infobul_group"><span class="le_groupe" style="color: #40FF00;">Professeurs</span><span class="in_group"><span>Ils sont ici pour vous transmettre leur savoir.<br><a href="http://www.gfx-art.org/g4-professeurs" target="_blank">Voir les membres du groupe</a></span></span></div><div class="infobul_group"><span class="le_groupe" style="color: #126112;">Graphistes</span><span class="in_group"><span>Ils repondent aux commandes des membres.<br><a href="http://www.gfx-art.org/g5-graphistes" target="_blank">Voir les membres du groupe</a></span></span></div><div class="infobul_group"><span class="le_groupe" style="color: #7A05FF;">Analystes</span><span class="in_group"><span>La critique est une valeur de progrès, écoutez les! <br><a href="http://www.gfx-art.org/g32-analystes" target="_blank">Voir les membres du groupe</a></span></span></div></div><div class="img_g_bas"><img height="50" align="center" src="http://img15.hostingpics.net/pics/262547783s.png" alt="Les groupes"></div></div><!--
 CENTRE --><br><br><!--
 BAS --><div id="bas_block"><div id="bas_block_gauche"><div class="bul-qeel"><span class="bul_open"><span><img height="125" valign="middle" src="http://img15.hostingpics.net/pics/827092WhoIsOnline2.png" alt="en_ligne"></span>      </span><div class="in_q_bul"><div class="haut_bul"><span id="TFAez5">{TOTAL_USERS_ONLINE}<br>Moteurs de recherche : <span style="font-family:Georgia,Verdana;"><span style="color:#1849b5">G</span><span style="color:#de3018">o</span><span style="color:#efbA00">o</span><span style="color:#1849b5">g</span><span style="color:#31b639">l</span><span style="color:#de3018">e</span></span><br></span><script type="text/javascript">document.getElementById('TFAez5').innerHTML=document.getElementById('TFAez5').innerHTML.replace(/Utilisateurs enregistrés/,"Les Graphistes enregistrés et connectés actuellement");              </script><br><table id="TFAex6"><tbody><tr><td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE} <br /> {RECORD_USERS}</tbody></table><br></div></div></div></div>                <div style="clear:both;"></div></div></div></div></div><!--
 DRTE --><div id="droite_qeel" class="bloc_qeel"><div class="tfa_groups"><div class="infobul_group"><span class="le_groupe" style="color: #516DE0;">Newseurs</span><span class="in_group"><span>Ils nous informent de l'actualité graphique + Partenariats. <br><a href="http://www.gfx-art.org/g7-newseurs" target="_blank">Voir les membres du groupe</a></span></span></div><div class="infobul_group"><span class="le_groupe" style="color: #C8CC62;">Testeurs</span><span class="in_group"><span>Ils s'occupent des tutoriels (verification, validation...)<br><a href="http://www.gfx-art.org/g29-testeurs" target="_blank">Voir les membres du groupe</a></span></span></div><div class="infobul_group"><span class="le_groupe" style="color: #ABABD1;">Codeurs</span><span class="in_group"><span>Présents pour répondre aux commandes des membres.<br><a href="http://www.gfx-art.org/g6-codeurs" target="_blank">Voir les membres du groupe</a></span></span></div><div class="infobul_group"><span class="le_groupe" style="color: #eed7a7;">Pubeurs</span><span class="in_group"><span>Présent pour nous trouver de nouveaux amis.<br><a href="http://www.gfx-art.org/g33-pubeurs" target="_blank">Voir les membres du groupe</a></span></span></div><div class="infobul_group"><span class="le_groupe" style="color: #9BBD9B;">Partenaires</span><span class="in_group"><span>Nos amis, enregistrés pour mettre à jour leur informations.<br><a href="http://www.gfx-art.org/g9-partenaires" target="_blank">Voir les membres du groupe</a></span></span></div><div class="infobul_group"><span class="le_groupe" style="color: #BA4848;">VIPs</span><span class="in_group"><span>Amis proches. Généralement anciens membres du staff.<br><a href="http://www.gfx-art.org/g8-vip" target="_blank">Voir les membres du groupe</a></span></span></div><div class="infobul_group"><span class="le_groupe" style="color: #00abff;">Membres</span><span class="in_group"><span>Ce sont les membres validés du forum. <br><a href="http://www.gfx-art.org/g10-membres" target="_blank">Voir les membres du groupe</a></span></span></div><div class="infobul_group"><span class="le_groupe" style="color: #FFFFFF;">Non validés</span><span class="in_group"><span>Personnes dont le règlement et la présentation sont abs. <br><a href="http://www.gfx-art.org/g11-non-valides" target="_blank">Voir les membres du groupe</a></span></span></div></div><div class="img_g_bas"><img height="50" align="center" src="http://img15.hostingpics.net/pics/262547783s.png" alt="Les groupes"></div></div><div style="clear:both;"></div></div><!--
 BAS --><div id="bas_block2"><div id="bas_block_gauche2"><div class="bul-q"><div class="in_q_b"><div class="haut_b"><table><tbody><tr><td class="row1"><span class="gensmall">{L_WHOSBIRTHDAY_TODAY}</td></tr></tbody></table></div></div><span class="bul_op">Aniversariantes do dia <stromg>▼</stromg></span></div></div><div id="bas_block_droite2"><div class="bul-q"><div class="in_q_b"><div class="haut_b"><span id="TFA2m0">{L_WHOSBIRTHDAY_WEEK}</table></div></div> <span class="bul_op">Próximos aniversariantes <stromg>▼</stromg></span></div></div><div style="clear:both;"></div></div></div>
      <!-- BEGIN switch_chatbox_activate -->
      <div id="onlinechat">
         <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>
      </div>
      <!-- END switch_chatbox_activate -->
   </div>
</div>
<!-- END disable_viewonline -->

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <div class="user_login_form main-box center">
      <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username"/></label>  
      <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password"/></label>  
      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>  
      {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
      <!-- BEGIN switch_fb_connect -->
      <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
      <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
      <!-- END switch_fb_connect -->
   </div>
</form>
<!-- END switch_user_login_form_footer -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_legend -->
<ul id="pun-legend">
   <li>
      <img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /> {L_NEW_POSTS}
      <img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /> {L_NO_NEW_POSTS}
      <img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /> {L_FORUM_LOCKED}
   </li>
</ul>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
   appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true,
   oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

Salve e publique seu template!

Melhores cumprimentos.

Mikeé, não fui isso que eu pedi D:, acho que você confundiu com o outro tópico, eu pedi o código pra criação das estatísticas desse fórum: http://bleachninepowers.fullforums.net/forum

Que no caso não tem relação nenhuma com o que você me mandou D:

UP

Alguém poderia me ajudar?

Olá!

Utilize esse código CSS no final da folha de estilo CSS:

Código:

#pun-info,#pun-info .main-content,#pun-info .main-content #onlinelist{ background-color: transparent!important; border: 0px!important; } #pun-info .main-content #onlinelist p.right,#pun-info .main-content #onlinelist div.clear{display:none} #pun-info .main-content #onlinelist{padding-top:0px} #pun-info .main-content #stats{margin-left:9px!important} #pun-info.main .main-content #stats{ } #pun-info.main .main-content #stats p.right{ float:none} #pun-info.main .main-content #stats:before,#pun-info.main .main-content #onlinelist p:last-child:before,#pun-info.main .main-content #onlinelist p.right + p:before{content:'Estatísticas'; color: rgb(255, 169, 64);. cursor: url(http://cur.cursors-4u.net/cursors/cur-5/cur425.cur), progress; display: block; font-family: 'Monotype Corsiva', 'Times New Romam'; font-size: 48px; font-style: italic; font-weight: bold; height: 58px; margin-top: -20px; padding-left:5px; padding-bottom: 10px; text-shadow: rgb(255, 255, 255) 0px 0px 2px;} #pun-info.main .main-content #onlinelist p:last-child:before{content:'Grupos';margin-top:-10px} #pun-info.main .main-content #onlinelist p.right + p:before{content:'Conectados';margin-top:-10px;margin-bottom:-20px;padding-bottom:0px;} #pun-info.main .main-content #onlinelist p:last-child{ float: right!important; margin-right: 25%;} #pun-info.main .main-content #onlinelist p.right + p{ } #pun-info.main .main-content #stats,#pun-info.main .main-content #onlinelist p:last-child,#pun-info.main .main-content #onlinelist p.right + p{vertical-align:bottom;min-height:128px;width: 400px; max-width: 400px; top: 500px; float: left;display:block; padding-left: 3px; margin-left: 50px; border-spacing: 0px; margin-bottom: 20px; background: url(http://bleachninepowers.fullforums.net/1-ltr.css) 50% 0% no-repeat rgb(255, 255, 255); border-radius: 0px 10px 10px 0px; box-shadow: rgb(148, 148, 148) 1px 2px 5px; border-top: 1px solid rgb(238, 238, 238); border-left: 3px solid orange;margin-top:20px} form[name="form_login"]{display: inline-block; width: 100%;}

Até mais.

Luciano, não funcionou muito bem, ficou bem bugado, um print pra você ter uma ideia de como ficou: https://2img.net/h/oi47.tinypic.com/2n6dv6w.jpg

@edit:

Bom, eu tenho quase certeza que o motivo do erro é a falta de uma barra de rolagem nas estatísticas, claro que outros erros como aqueles membros conectados extras ali em cima, e os botões de novo, bloq, etc fora do local atrapalham, mas corrigindo esses erros e adicionando uma barra de rolagem pra diminuir o tamanho das tabelas e o código fica perfeito \õ/

Olá!

Eu fiz o código me baseando no fórum que você passou no inicio do tópico, me passe o link desse fórum que você passou na imagem para que eu possa ver qual o problema.

Até mais.

Bom, ja resolvi o problema, obrigado Luciano, questão resolvida ^^