[Tutorial] Estatísticas estilo IPB

Nome do Arquivo: [Tutorial] Estatísticas estilo IPB
Autor: JScript / Daemon / Premotheus
Funcionalidade: PunBB
Categoria: Recursos BestSkins

Olá amigos!
Hoje trago este tutorial de como colocar as nossas estatísticas estilo IPB
Bem, primeiro, se você usa as estatísticas normais da forumeiros, remova-as!

Ou se preferir, troque seu index_body por este:

[poll]

Código:


{JAVASCRIPT}
<!-- 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" style="display: none;">
   <div class="main-statistics">
      <div id="onlinelist">
         <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
         <p class="right">
            <!-- BEGIN switch_viewonline_link -->
            <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
            <!-- END switch_viewonline_link -->
            <!-- BEGIN switch_viewonline_nolink -->
            {L_WHO_IS_ONLINE}
            <!-- END switch_viewonline_nolink -->
         </p>
         <p id="total_users_online">{TOTAL_USERS_ONLINE}<br /></p>
         <p id="record_users">{RECORD_USERS}<br /></p>
         <p id="logged_in_user_list">{LOGGED_IN_USER_LIST}</p>
         <p id="l_online_users">{L_ONLINE_USERS}</p>
         <p id="l_connected_members">{L_CONNECTED_MEMBERS}<br /></p>
         <p id="l_whosbirthday_today">{L_WHOSBIRTHDAY_TODAY}</p>
         <p id="l_whosbirthday_week">{L_WHOSBIRTHDAY_WEEK}</p>
         <div class="clear"></div>
         <p id="group_legend">{LEGEND} : {GROUP_LEGEND}</p>
      </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}" />&nbsp;{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 -->


[/poll]


Agora que removemos o original, vamos a nossa estatísticas ipb!



Copie o código de cima, e vamos ao nosso overall_footer_end:

Procure por este código:
[poll]

Código:


 <p class="center">
 <strong>{ADMIN_LINK}</strong>
 </p>


[/poll]

Coloque o código acima dele, acima da classe p

Pronto, salve e publique os templates.
Agora vamos aos jQuerys:

1º Código:

Título: Qualquer...
Investimento : No índice

Código:


2º Código:
Título: Qualquer...
Investimento : Marque No índice

Código:
[poll]

Código:


//* Code by Premotheus - All rights reserved
$(function(){
$('.statistics').css('cssText','display:block!important');
});


[/poll]

Conclua!

Agora vamos em nosso template overall_header, procure por:



E abaixo insira o código:

[poll]

Código:


<script type="text/javascript">
    $(function(){
  $(".statistics").css('cssText', 'display:none!important');
     });
  </script>


[/poll]

Simples assim!

Quanto ao CSS, eu não o coloquei aqui! Deixo que vocês possam editar livremente, mas caso queiram, aqui está um que estou usando em uma skin minha, ele está preto, mas pode ser que sirva:


Gostaria de agradecer aos amigos JScript (pelo código da estatística ipb) e Daemon (pelo código total de posts, total de membros, etc...)!
Créditos deles, o que eu fiz foi apenas por o jQuery que bloqueia que o código funcione nas outras páginas e ajustar a estatística no overal_footer_end.

Espero que gostem!
Curta e comente para visualizar os códigos!

---

Qualquer dúvida crie um tópico com o mesmo nome na área: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

porfa

[sucesso=Tutorial aceito][/sucesso]
Movido para: Dicas e Tutoriais

Otimo Tutorial Obrigado Por Compartilhar

Notifico que os códigos foram atualizados.
Até +!

Bom código! É interessante nos fóruns de design branco...

Eu já havia incluido em vários temas meus!
Mas perdi o código.
Reputado!

gostei irei usar no meu fórum.

Estarei testando em meu fórum, obrigado!

gracias  very  goooddd

Comentando para pegar o 1° código

ótimo obg por compartilhar-nos

Obrigado muito legal de factro...

Nicee 124444421waaaaaaaaaaaaaaaaafd

Obrigado! precisava de mais!

Obrigado amigo...........

Obrigado vou testar....

Notifico que os códigos foram atualizados.

ver codigo e testar ......

[sucesso="Muito obrigado!"][/sucesso]

Otimo Tutorial Obrigado

Obrigado muito legal de factro...

Belo tutorial,
Até +!!!