[Tutorial] Estatisticas personalizadas
Página 1 de 1 • Compartilhe
Agora podemos personalizar as estatísticas com um modelo diferente. Deixando a quantidade de números de cada informação em um quadro pequeno.
1º - Editar o template:
Aceda à:
Painel de controle -> Visualização -> Templates-> Geral / index_body
PunBB:
Abra seu templante index_body e entre as linhas 57 e 68 deverá ter esse código:
PhpBB2:
Abra seu templante index_body e entre as linhas 188 e 193 deverá ter esse código:
Troque o código por este:
Após isso, salve seu template e publique-o.
2º - Código JS a ser utilizado:
3º - Aplicando código JS:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.
Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>
4º - Conhecendo e aplicando o código CSS:
Painel de Controle ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de estilo CSS
1º - Aplicando código CSS:
Painel de Controle ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de estilo CSS
PhpBB3:
Invision:
Nós iremos disponibilizar este tutorial para todas as versões. Contudo, que para PunBB e PhpBB2 serão possível a aplicação via template. E para PhpBB3 e Invision por meios de CSS. Ou seja, as duplas terão passos diferenciados. Siga o passo da versão de seu fórum. |
--> Tutoriais, dicas e astúcias <--
Estatísticas personalizada
Estatísticas personalizada
PUNBB & PHPBB2: |
1º - Editar o template:
Aceda à:
Painel de controle -> Visualização -> Templates-> Geral / index_body
PunBB:
Abra seu templante index_body e entre as linhas 57 e 68 deverá ter esse código:
- Código:
<div class="main-content">
<div id="stats">
<p class="right">{TOTAL_POSTS}</p>
<p>{TOTAL_USERS}</p>
<p>{NEWEST_USER}</p>
</div>
PhpBB2:
Abra seu templante index_body e entre as linhas 188 e 193 deverá ter esse código:
- Código:
<tr>
<td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
<td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
{TOTAL_USERS}<br />
{NEWEST_USER}</span></td>
</tr>
Troque o código por este:
- Código:
<div id="stats">
<br />
<ul class="statsPers">
<li class="statHide rdtOn">Teste1: {RECORD_USERS}</li>
<li class="statHide lastUser">Teste2: {NEWEST_USER}</li>
<li class="statHide totalUser">Teste3: {TOTAL_USERS}</li>
<li class="statHide totalPost">Teste4: {TOTAL_POSTS}</li>
</ul>
<br />
</div>
Após isso, salve seu template e publique-o.
2º - Código JS a ser utilizado:
- 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>
');
});
3º - Aplicando código JS:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.
Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>
Título Correspondente ao nome da página JavaScript/jQuery que será criada. |
Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas. |
Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery. |
Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum. |
4º - Conhecendo e aplicando o código CSS:
Painel de Controle ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de estilo CSS
- Código:
#stats {
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 {
padding: 5px 8px;
background: #E1E1E1;
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;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
-o-box-shadow: inset rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(255, 255, 255, 1) 0px 1px 0px;
border: 1px solid #E1E1E1;
margin-bottom: 10px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
text-shadow: 1px 1px 0 white;
color: #111;
font-weight: 700;
}
.statsPers li {
float: left;
color:#666;
margin: 2px 10px;
}
.statsPers {
list-style: none;
display: block;
margin: 0px auto;
width: 100%;
}
PHPBB3 & INVISION: |
1º - Aplicando código CSS:
Painel de Controle ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de estilo CSS
PhpBB3:
- Código:
#stats {
background-color: #FFFFFF !important;
color: #5A5A5A;
font-family: helvetica,arial,sans-serif !important;
font-size: 12px !important;
font-style: normal !important;
font-variant: normal !important;
font-weight: normal !important;
margin-left: -100px !important;
padding-bottom: 30px !important;
}
#stats p.right:after {
color: #4A4A4A;
content: "Total de Posts";
letter-spacing: normal;
}
#stats p.right:not(strong) {
letter-spacing: -999px;
margin-left: 200px;
width: 160px;
}
#stats p {
color: rgba(0, 0, 0, 0) !important;
float: left !important;
margin-bottom: 2px;
margin-right: 10px;
margin-top: 2px;
}
#stats p strong {
background: none repeat scroll 0 0 #E2E2E2;
border: 1px solid #C9CDD0 !important;
border-radius: 2px 2px 2px 2px;
color: #4A4A4A;
display: inline-block;
font-weight: 700;
letter-spacing: normal;
margin-right: 10px !important;
padding: 2px 12px 2px 6px;
}
#stats p:nth-of-type(2):after {
color: #4A4A4A;
content: "Total de Membros";
letter-spacing: normal;
}
#stats p:nth-of-type(2):not(strong) {
letter-spacing: -999px;
margin-left: 10px;
width: 160px;
}
#stats p:nth-of-type(3):after {
color: #4A4A4A;
content: "Membro Mais Recente";
letter-spacing: normal;
}
#stats p:nth-of-type(3):not(strong) {
letter-spacing: -999px;
margin-left: 10px;
width: 240px;
}
#stats p:nth-of-type(3) strong {
letter-spacing: normal;
}
#stats a {
color: #4A4A4A !important;
}
#onlinelist p:nth-of-type(2) strong:nth-of-type(2):after {
color: #4A4A4A;
content: " Recorde de Membros Online";
font-size: 12px !important;
font-weight: 400 !important;
margin-left: 15px;
position: absolute;
width: 300px;
}
#onlinelist p:nth-of-type(2) strong:nth-of-type(2) {
background: none repeat scroll 0 0 #E2E2E2;
border: 1px solid #C9CDD0 !important;
border-radius: 2px 2px 2px 2px;
color: #4A4A4A;
margin-left: 500px !important;
margin-right: 10px !important;
margin-top: -65px !important;
padding: 2px 6px;
position: absolute !important;
width: 26px;
}
#onlinelist {
margin-top: 10px !important;
}
Invision:
- Código:
#fo_stat .ipbtable tbody tr:nth-of-type(6) td.row2:last-child p:nth-of-type(1):after {
color: #4A4A4A;
content: "Total de Posts";
letter-spacing: normal;
}
#fo_stat .ipbtable tbody tr:nth-of-type(6) td.row2:last-child p:nth-of-type(2):after {
color: #4A4A4A;
content: "Total de Membros";
letter-spacing: normal;
}
#fo_stat .ipbtable tbody tr:nth-of-type(6) td.row2:last-child p:nth-of-type(2):not(strong) {
margin-left: 10px;
width: 130px;
}
#fo_stat .ipbtable tbody tr:nth-of-type(6) td.row2:last-child p:nth-of-type(3):after {
color: #4A4A4A;
content: "Membro Mais Recente";
letter-spacing: normal;
}
#fo_stat .ipbtable tbody tr:nth-of-type(6) td.row2:last-child p:nth-of-type(3):not(strong) {
margin-left: 10px;
width: 210px;
}
#fo_stat .ipbtable tbody tr:nth-of-type(6) td.row2:last-child p:nth-of-type(4):after {
color: #4A4A4A;
content: " Recorde de Membros Online";
letter-spacing: normal;
}
#fo_stat .ipbtable tbody tr:nth-of-type(6) td.row2:last-child p:nth-of-type(4):not(strong) {
margin-left: 10px;
width: 210px;
}
#fo_stat .ipbtable tbody tr:nth-of-type(6) td.row2:last-child p {
color: rgba(0, 0, 0, 0) !important;
float: left !important;
margin-bottom: 2px;
margin-right: 10px;
margin-top: 2px;
}
#fo_stat .ipbtable tbody tr:nth-of-type(6) td.row2:last-child p strong {
background: none repeat scroll 0 0 #E2E2E2;
border: 1px solid #C9CDD0 !important;
border-radius: 2px 2px 2px 2px;
color: #4A4A4A;
display: inline-block;
font-weight: 700;
margin-right: 10px !important;
padding: 2px 12px 2px 6px;
}
#fo_stat .ipbtable tbody tr:nth-of-type(6) td.row2:last-child p span strong {
border: medium none !important;
letter-spacing: normal !important;
margin: 0 !important;
padding: 0 !important;
}
#fo_stat .ipbtable tbody tr:nth-of-type(6) td.row2:last-child p:not(strong) {
letter-spacing: -999px;
margin-left: 10%;
width: 110px;
}
#fo_stat .ipbtable tbody tr:nth-of-type(6) td.row2:last-child p a {
color: #4A4A4A !important;
}
- Resultado:
Tópicos semelhantes
Cria uma conta ou logue para postar uma mensagem.
Você precisa ser um membro, para poder postar uma resposta.
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|