[Tutorial] Estatísticas estilo IPB

Olá, trago a vocês este tutorial sobre como colocar as Estatísticas do fórum com um estilo IPB.
Funcionalidade: PunBB & PunBB2





1º - Localizar Código:
Acesse o index_body

Painel de controle - > Visualização - > Templates - > Geral  - > index_body

Agora procure por

Código:


<!-- BEGIN disable_viewonline -->


<!-- END disable_viewonline -->

2º - Colocar código Template
Sem sair do index_body, vamos adicionar logo abaixo do " "
O seguinte código:

Código:


<div id="estadisticas">
<div id="pun-info" class="main">
 <div class="main-content">
        <h3 class="maintitle">Estatísticas do Fórum</h3>
  <div id="stats">
    <div id="board-stats"><h2>Estatísticas do

Fórum</h2><dl><p></p><dt>Inicio do fórum</dt><dd><span

class="FORUMBIRTHDAY"></span></dd><dt>Total de Posts</dt><dd><span

class="FORUMCOUNTPOST"></span></dd><dt>Total de

Tópicos</dt><dd><span

class="FORUMCOUNTOPIC"></span></dd><dt>Total de

Membros</dt><dd><span

class="FORUMCOUNTUSER"></span></dd><dt>O Membro mais Novo

é</dt><dd><strong><span

class="FORUMLASTUSERLINK"></span></strong></dd>
 <script type="text/JavaScript"

src="http://tinyurl.com/var-fa"></script></dl></div>
            </div>
 <div id="onlinelist">
 <img src="{L_ONLINE_IMG}"

alt="{L_WHO_IS_ONLINE}" />
 <p class="right">
 
              
                          <a href="{U_VIEWONLINE}"

rel="nofollow">{L_WHO_IS_ONLINE}</a>
 
                        
                          
                          {L_WHO_IS_ONLINE}
 
                
                  
                  </p>
 <p>{TOTAL_USERS_ONLINE}<br />
 {RECORD_USERS}

 <br />
 {LOGGED_IN_USER_LIST}

 {L_ONLINE_USERS}
 {L_CONNECTED_MEMBERS}<br />
 

{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
 <div class="clear"></div>
                       <div id="Legend">
 <p>{LEGEND} dos

Grupos : {GROUP_LEGEND}</p>
                  </div>
          </div></div>

 <div id="onlinechat">
 <p class="page-bottom">
 {TOTAL_CHATTERS_ONLINE} :
 {CHATTERS_LIST}<br />

 <div id="chatbox_popup"></div>
 <script type="text/JavaScript">
 

insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbo

x_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
 </script>

 </p>
 </div>

 </div>
</div>

3º - Colocação do código CCS:
Agora devemos ir para o CSS.

Painel de Controle - > Visualização - > Imagens e Cores - > Cores - > Aba " Folha de estilo CSS "

Adicione o seguinte código em cima de todo o CSS:

Código:

/*--- Estatística estilo IPB por Premotheus ---*/
#estadisticas{
  background: #ffffff;
  border:1px solid #d9d9d9;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 8px;
  padding-left: 8px;
  border-radius:7px;
}

#Legend {
  border-top: 1px solid #EAEAEA;
  padding-top:10px;
  font-size: 1.1em;
  font-weight: bold;
  clear:both;
  font-weight:700;
  padding-bottom:5px
}


.main .main-content.frm {
background: #F4F4F4;
padding: 10px;
}

#quick_reply, .main .main-content.frm {
background-color: #EFEFEF !important;
}
.main-content.frm{background-color:#fbfbfb}.main .main-content.google{background-color:#F2F2F2;padding:10px 10px 0}

.pun .main-content {
background: white;
}

.pun .main-content {
webkit-border-top-left-radius: 1px;
border-radius: 1px;
-moz-border-radius-topleft: 1px;
-moz-border-radius-topright: 1px;
border-radius: 1px;
background-color: #E8E8E8;
border: 1px solid #DDD;
}

#onlinelist {
border-top: 0px transparent;
padding: 0.6em 1em;
}

#board-stats span{
  background-color:transparent;
  color:#4A4A4A;
  font-weight:700;
  padding:2px 6px
}

#board-stats{
  background:#f5f5f5;
  border-left: 1px solid #eaeaea;
  border-left-color-ltr-source:physical;
  border-left-color-rtl-source:physical;
  border-left-color-value:#DEDEDE;
  border-left-style-ltr-source:physical;
  border-left-style-rtl-source:physical;
  border-left-style-value:solid;
  border-left-width-ltr-source:physical;
  border-left-width-rtl-source:physical;
  border-left-width-value:0;
  float:right;padding-left:20px;
  margin-top:-7px;
  width:38%
}

#board-stats dl{margin-top:10px}#board-stats dd,#board-stats dt{
  border-top-color:#DEDEDE;
  border-top-style:solid;
  border-top-width:1px;
  float:left;
  font-size:.85em;padding:6px 2px;
  width:45%}

#board-stats dt{
  color: #595959;
  font: normal 10px tahoma, arial, verdana, sans-serif;
  clear:both;
  font-weight:700
}

#board-stats h2{
  padding-top:10px;
  font-size: 1.1em;
  font-weight: bold;
  clear:both;
  font-weight:700
}



.maintitle {
background: #F8F8F8 url(http://www.ggames.com.br/fórum/public/style_images/baisik/gradient_bg.png) repeat-x left 50%;
color: #B4453B;
text-shadow: white 0px 1px 0px;
font-size: 14px;
line-height: 20px;
font-weight: bold;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
padding: 11px !important;
margin: 0 !important;
overflow: hidden;
border-bottom: 1px solid #EAEAEA;
}

h3.maintitle{
color: #B4453B;
text-shadow: white 0px 1px 0px;
line-height: 20px;
font-weight: bold;
display: block;
font-size: 1.17em;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}/*--- Fim ---*/

4º - Resultado:

---

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Estatísticas estilo IPB