![[TUTORIAL] Estátisticas personalizadas V5. Empty](https://2img.net/i/empty.gif)
![[TUTORIAL] Estátisticas personalizadas V5. New_ic10](https://i.servimg.com/u/f66/15/86/37/09/new_ic10.png) | Estatísticas personalizadas V5 |
Nesse tutorial iremos aprender a fazer um efeito nas categorias, e, assim personalizando a mesma dando um efeito mais legal e agradável.
--> Tutoriais e Dicas <--
Estatísticas personalizadas V5
Estatísticas personalizadas V5
N1º - Adicionando o CSS
![[TUTORIAL] Estátisticas personalizadas V5. Css](https://2img.net/h/i730.photobucket.com/albums/ww304/carlos-egg/codeazure/css.png)
Código:
#upshrinkHeaderIC {
border-top: 3px double rgba(255, 255, 255, 0.23);}
#vtab {
background: #292727;
height: 100%;
margin: auto;
color: #D1D1D1;
}
#vtab > ul {
float: left;
width: 65px;
text-align: left;
display: block;
margin: auto 0;
padding: 0;
position: relative;
}
#vtab > ul > li.stats {
background: url(http://i25.servimg.com/u/f25/14/15/39/32/statis10.png) no-repeat center center;
}
#vtab > ul > li {
width: 65px;
height: 65px;
list-style-type: none;
display: block;
text-align: center;
margin: auto;
padding-bottom: 10px;
position: relative;
opacity: .3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
cursor: help;}
#vtab > ul > li.online_users {
background: url(http://zerodigital.info/forum/digitalvb/satin/statusicon/HQ/4_forum_old-48.png) no-repeat center center;
}
#vtab > ul > li.selected {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
background-color: #1A1A1A;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
position: relative;
z-index: 10;
-webkit-transition: 0.7s;
width: auto;
}
#vtab > div {
background: #1A1A1A;
height: 276px;
margin-left: 65px;
overflow: auto;
padding: 12px;
position: relative;
z-index: 9;
}
div.title_barIC {
height: 31px;
margin-bottom: 1px;
overflow: hidden;
padding-left: 9px;
border-radius: 3px;
background: rgba(73, 73, 73, 0.6);
border: 2px dashed #4E4E4E;
}
#upshrinkHeaderIC div.title_barIC h4.titlebg {
color: #F3A500;
margin-top: 7px;
text-shadow: 0 1px 0 #5C2501;
}
#upshrinkHeaderIC p {
margin: 0 0 .1em;
padding-left: .5em;
}
#vtab > ul > li.afiliados {
background: url(http://library.ryerson.ca/wp-content/uploads/copyright.png) no-repeat center center;
}
#vtab > ul > li.chatb{
background: url(http://7x73.vn/forum/105.png) no-repeat center center;
}
#vtab > ul > li.chatb.selected {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
background-color: #1A1A1A;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
position: relative;
z-index: 10;
-webkit-transition: 0.7s;}
#vtab > ul > li.afiliados.selected {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
background-color: #1A1A1A;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
position: relative;
z-index: 10;
-webkit-transition: 0.7s;}N2º - Editando o template
![[TUTORIAL] Estátisticas personalizadas V5. Templente](https://2img.net/h/i730.photobucket.com/albums/ww304/carlos-egg/codeazure/templente.png)
Vá no index_Body e encontre essas duas linhas:
Código:
<!-- BEGIN disable_viewonline -->
....
....
<!-- END disable_viewonline -->Depois disso adicione dentro dessas duas linhas o código abaixo:
Código:
<div class="categoriestadi"><div id="upshrinkHeaderIC"><div id="vtab"><ul><li class="stats"></li><li class="online_users"></li><li class="chatb"></li><li class="afiliados"></li></ul><div style="display: none; "><div class="title_barIC"><h4 class="titlebg"><span class="ie6_header floatleft"><strong>Estáticas do Fórum</strong></span></h4></div><p>{TOTAL_POSTS}</p> <p>{TOTAL_USERS}</p> <p>{NEWEST_USER}</p> <p>{GROUP_LEGEND}</p> </div> <div style="display: none; "> <div class="title_barIC"><h4 class="titlebg"> <span class="ie6_header floatleft"><strong>Quem está online?</strong></span></h4> </div><div class="userline"><p>{TOTAL_USERS_ONLINE}</p> <p>{RECORD_USERS}</p> <p>{LOGGED_IN_USER_LIST}</p> <p>{L_ONLINE_USERS}</p> <p>{L_CONNECTED_MEMBERS}</p>
<p>{L_WHOSBIRTHDAY_TODAY}</p> <p>{L_WHOSBIRTHDAY_WEEK}</p> </div> </div><div style="display: none; "><div class="title_barIC"><h4 class="titlebg"><span class="ie6_header floatleft"><strong>Parceiros</strong></span></h4></div> <p>{TOTAL_CHATTERS_ONLINE}</p> <li style="text-align: left; float: left; width: 25%">
<p class="textfooter">text link</p> <p class="textfooter">text link</p> <p class="textfooter">text link</p> <p class="textfooter">text link</p> <p class="textfooter">text link</p> <p class="textfooter">text link</p> <p class="textfooter">text link</p> <p class="textfooter">text link</p> </li> <li style="text-align: left; float: left; width: 25%">
<p class="textfooter">text link</p> <p class="textfooter">text link</p> <p class="textfooter">text link</p> <p class="textfooter">text link</p> <p class="textfooter">text link</p> <p class="textfooter">text link</p> <p class="textfooter">text link</p> <p class="textfooter">text link</p> </li> <li style="text-align: left; float: left; width: 25%"> <p class="textfooter">text link</p> <p class="textfooter">text link</p> <p class="textfooter">text link</p> <p class="textfooter">text link</p> <p class="textfooter">text link</p> </li>
</div><div style="display: none; "><
div class="title_barIC"><h4 class="titlebg"><span class="ie6_header floatleft"> <strong>Créditos</strong></span></h4></div><strong> © Style by Tu Vil Amigo And Chupy</br>Host by Forumotion</br>Tradução www.code.azureforum.com
</strong></div></div></div> </div>N3° - Adicionando o Javascript
![[TUTORIAL] Estátisticas personalizadas V5. Java](https://2img.net/h/i730.photobucket.com/albums/ww304/carlos-egg/codeazure/java.png)
Titulo-O que você quiser.
Investimento-
![[TUTORIAL] Estátisticas personalizadas V5. Emtodasaspaginas](https://2img.net/h/i730.photobucket.com/albums/ww304/carlos-egg/codeazure/emtodasaspaginas.png)
E cole o seguinte código Javascript:
Código:
$(function(){var $items=$('#vtab>ul>li');$items.mouseover(function(){$items.removeClass('selected');$(this).addClass('selected');var index=$items.index($(this));$('#vtab>div').hide().eq(index).show()}).eq(0).mouseover()});N4º - Resultado:
![[TUTORIAL] Estátisticas personalizadas V5. Reesta10](https://i.servimg.com/u/f10/17/41/76/40/reesta10.png)
- Funciona em quais versões?
PHPBB2 e PUNBB
© SuporteDesign, Patrão & CodeAzure
![[TUTORIAL] Estátisticas personalizadas V5. Act_bottom](https://www.forumeiros.com/i/img/act_bottom.png) | Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [DUVIDA]Estatística personalizada V5 |
