[Tutorial] Estatisticas estilo IPB

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

avatar
Admin
Administrador
Tempo Online : 12d 56m 43s
Mensagens : 693
Reputação : 3
Ver perfil do usuário http://bestweb.forumais.com

MensagemAdmin em Seg Out 03, 2016 10:52 pm

Autor: JScript / Daemon / Premotheus
Funcionalidade: PunBB

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:

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

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

Código:

                                                                          <div id="statistics">
                  <br />
                  <ul class="statsPers">
                    <li class="statHide rdtOn">Recorde de Usuários Online: {RECORD_USERS}</li>
                    <li class="statHide lastUser">Membro Mais Novo: {NEWEST_USER}</li>
                    <li class="statHide totalUser">Membros: {TOTAL_USERS}</li>
                    <li class="statHide totalPost">Posts: {TOTAL_POSTS}</li>
                  </ul>
              <br />
        
          </div>

                                          
                                                                            <!-- Ipboard stile -->
<div id='board_statistics' class='statistics clearfix'>
  <ul id='stat_links' class='ipsList_inline right ipsType_small'>
      <li><a title="Visualizar a equipe de moderação" href="/g2-">Equipe de moderação</a></li>
      <li><a title="Visualizar os maiores postadores de hoje" href="/memberlist?mode=today_posters">Top 20 posters de hoje</a></li>
      <li><a title="Visualizar os maiores postadores do fórum" href="/memberlist?mode=overall_posters">Top posters geral</a></li>
   </ul>
  <h4 class='statistics_head clearfix'>
        
   <p class="statistics_brief desc"></p>
  </h4>
   <br /><br />
   <p class="users_online" id="statistics_brief desc">
   </p>

   <!-- BEGIN switch_chatbox_activate -->
   <script type="text/javascript">
      //<![CDATA[
      var total_chatters = $('#onlinechat').find('p.page-bottom > strong').text();
      $('#shoutbox-active-total').text(total_chatters);
      $('#shoutbox-active-member').text(total_chatters);
      //]]>
   </script>
   <!-- END switch_chatbox_activate -->
  <br /> <br /><div id="new_group_legend" class=groups></div>
   <script type="text/javascript">
      //<![CDATA[
      var target = $('#total_users_online'); /*Há 1 usuários online :: 0 usuários cadastrados, Nenhum Invisível e 1 Visitante :: [1 Motor de busca]*/
      var aSplit = target.text();
      
      /* Usuários online/ativos */
      var users_active = target.find('strong:first').text() + ' usuários ativos (nos últimos 15 minutos)';
      $('#board_statistics').find('h4.statistics_head').text(users_active);
      
      var membros = aSplit.split(' :: ')[1].substr(0, 1) + ' membros, ';
      var visitantes = aSplit.split(' e ')[1].substr(0, 1);
      if(visitantes == 'n') {visitantes = 0;}        
      $('#board_statistics').find('h4.statistics_head').text(users_active);
      $('#board_statistics').find('p.statistics_brief.desc')
          .text(membros + visitantes + ' visitantes, 0 membros anônimos').append('  <a href="/viewonline">(lista completa)</a>');
      
      aSplit = $('#logged_in_user_list').html();
      var start = aSplit.search('registrados : ') + 14;
      users_active = aSplit.substring(start);
      $('#board_statistics').find('p.users_online').html(users_active);
      
      var listHtml = '';
      var target = $('#group_legend').find('b');
      target.each(function(index, value){
          if (listHtml != '') {listHtml += ' <strong>·</strong> ';}
          listHtml += $(this).html();
      });
      $('#new_group_legend').html('<img src="http://punbb.informer.com/favicon.ico" alt="PunBB.Forumeiros.com"> ' + listHtml);
      
      var total_chatters = $('#onlinechat').find('p.page-bottom > strong').text();
      $('#shoutbox-active-total').text(total_chatters);
      $('#shoutbox-active-member').text(total_chatters);
      //]]>
   </script>
</div>

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

Procure por este código:
Código:

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

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:
Código:

$(document).ready(function(){var rdtOn=$('.rdtOn strong').html();var lastUser=$('.lastUser strong').html();var totalUser=$('.totalUser strong').html();var totalPost=$('.totalPost strong').html();$('ul.statsPers').prepend('<li><span>'+totalPost+'</span> Total de posts</li><li><span>'+totalUser+'</span> Total de membros</li><li><span>'+lastUser+'</span> Membro mais novo</li><li><span>'+rdtOn+'</span> Recorde de usuários online</li>')});

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

Código:
Código:

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

Conclua!

Agora vamos em nosso template overall_header, procure por:

Código:
<!-- END switch_ticker_new -->

E abaixo insira o código:

Código:

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

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:

Código:

.desccateogry, desccateogry{
text-color: #ddd;
}
    
#statistics {
margin: 0 auto !important;
text-align: center !important;
display: table;
background: none;
}
.statHide{display:none !important;}
.statsPers li span a {
text-decoration: none !important;
}
.statsPers li > span {
display: inline-block;
background: #222 url('http://www.ipbforumskins.com/skindemo/public/style_images/carbonb34x/highlight_reallyfaint.png') repeat-x 0 0;
color: white;
text-shadow: rgba(0, 0, 0, 0.8) 0px -1px 0px;
padding: 3px 7px;
font-weight: bold;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin-right: 3px;
-webkit-box-shadow: inset rgba(255, 255, 255, 0.03) 0px 1px 0px;
-moz-box-shadow: inset rgba(255,255,255,0.03) 0px 1px 0px;
box-shadow: inset rgba(255, 255, 255, 0.03) 0px 1px 0px;
}
.statsPers li {
float: left;
color:#666;
margin: 2px 10px;
}
.statsPers {
list-style: none;
display: block;
margin: 0px auto;
width: 100%;
}
    
#board_stats.value{
display:inline-block;
background:url('http://i74.servimg.com/u/f74/17/49/01/62/trans113.png') repeat;
background:rgba(0,0,0,0.1);
color:#222;
text-shadow:rgba(255,255,255,0.6) 0px 1px 0px;
padding:3px 7px;
font-weight:bold;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
margin-right:3px;
-webkit-box-shadow:inset rgba(0,0,0,0.3) 0px 1px 2px, rgba(255,255,255,1) 0px 1px 0px;
-moz-box-shadow:inset rgba(0,0,0,0.3) 0px 1px 2px, rgba(255,255,255,1) 0px 1px 0px;
box-shadow:inset rgba(0,0,0,0.3) 0px 1px 2px, rgba(255,255,255,1) 0px 1px 0px
}

.statistics{
margin:20px 0 0 0;
padding:8px;
     border-radius: 0 0 10px 10px;
line-height:1.3;
overflow:hidden;
border: 1px solid #3C3C3C;
     background: rgba(0, 0, 0, 0.57)
}

.statistics_head{
border-bottom: 1px solid #3C3C3C;
border-top: 1px solid #3C3C3C;
text-shadow:rgba(49, 48, 48, 0.8) 0px 1px 0px;
background: rgba(51, 48, 48, 0.7) url('http://i74.servimg.com/u/f74/17/49/01/62/highli13.png') repeat-x 0 0;
font-size:11px;
font-weight:bold;
padding: 9px;
margin:-8px -8px 8px -8px
}

.statistics_head, .statistics_head a{
color:#727272
}
    
     .statistics .statistics_head:first-of-type{
border-top:0
}

.statistics .statistics_head:not(:first-of-type){
margin-top:0
}

#stat_links a{
margin:0 5px
}        
        
         #onlinelist {
         background: white;
         border: 0px;
         border-top:none;
         }
        
         #onlinechat {
         background: white;
         border-top: 1px solid #EEE;
         border-top:none;
         }

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

Cria uma conta ou logue para postar uma mensagem.

Você precisa ser um membro, para poder postar uma resposta.

Criar conta

Participe de nossa comunidade, basta se registrar. É Fácil!


Criar uma conta

Logar

Já tem uma conta? Sem problemas, Logue agora.


Logar-se

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum