[TUTORIAL] Estatísticas como menu do painel de controle

Item: [TUTORIAL] Estatísticas como menu do painel de controle
Rating: 1

por **Shek** Dom 30 Dez - 12:29

[TUTORIAL] Estatísticas como menu do painel de controle Templa10

Templates

O seu painel de controle de administrador guarda beleza, praticidade e o principal que é simplicidade. Neste tutorial você vai editar as estatísticas do seu fórum da versão PhpBB2 ou PunBB como o menu de seu Painel de Controle.

--> Tutoriais <--
Estatísticas como menu do painel de controle

1º - CSS de personalização:
Vamos adicionar um código CSS que vai nos dar o resultado de tabelas parecidas com a do seu painel de controle. Para obter o resultado parecido, é necessário que você conheça bem o CSS e suas propriedades. Aconselhamos que leia alguma apostila sobre CSS para continuar.

PA > Visualização > Imagens e Cores > Cores > Folha de estilo CSS >

Em seguida, adicione o seguinte código CSS:

/***
##################################################################
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
/// Nome: Estatísticas como menu do painel de controle
/// HTML: ShiftActif
/// JavaScript: Matti
/// CSS: Forumeiros ADMIN.CSS Edit by ShiftActif
/// Tipo: FREE (Grátis)
/// Obs: favor não retirar os nossos créditos, pois ele não vai aparecer no efeito!!!
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
##################################################################
***/

#tabs_container {
border-bottom: 1px solid #ccc;
}
#stabs {
list-style: none;
padding: 5px 0 4px 0;
margin: 0 0 0 10px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 13px;
}
#stabs li {
display: inline;
}
#stabs li a {
background:url(https://i.servimg.com/u/f12/16/63/75/54/tab_le10.png);
padding-left:6px;
text-decoration: none;
position: relative;
height: 32px;
cursor: hand;
border: 1px solid #ccc;
padding: 4px 6px;
text-decoration: none;
font-weight: bold;
color: #7cba2c;
background-color: #eeeeee;
border-bottom: none;
outline: none;
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;
}
#stabs li a:hover {
background:url(https://i.servimg.com/u/f12/16/63/75/54/tab_se10.png);
padding-left:6px;
text-decoration: none;
position: relative;
height: 32px;
cursor: hand;
background-color: #dddddd;
padding: 4px 6px;
}
#stabs li.active a {
background:url(https://i.servimg.com/u/f12/16/63/75/54/tab_se10.png);
padding-left:6px;
text-decoration: none;
position: relative;
height: 32px;
cursor: hand;
border-bottom: 1px solid #fff;
font-weight: bold;
color: #706262;
background-color: #fff;
padding: 4px 6px 5px 6px;
border-bottom: none;
}
#stabs li.active a:hover {
background-color: #eeeeee;
padding: 4px 6px 5px 6px;
border-bottom: none;
}

#tabs_content_container {
background-color: #FFF;
border: 3px solid #ccc;
border-top: none;
padding: 10px;
}
.tab_content {
display: none;
}

.sucessfull {
float: left;
padding: 3px 0 0 45px;
background: url(https://sd-1.archive-host.com/membres/up/142586199450897653/favFDF.ico) no-repeat 0% 75%;
color: #00a5cd;
font-weight: bold;

}

Depois de colar o CSS em sua folha de estilo CSS, você só vai precisar Salvar.

2º - Aplicação do código HTML:
Acessando seus templates em PA > Visualização > Templates > escolha o template index_body. Ao selecionar o mesmo, na caixa de busca procure pelos seguinte código:

Código:: id="stats"

E abaixo da tag HTML encontrada, você vai começar a criar os seguintes trechos em HTML:

Código:: <div id="tabs_container"> <ul id="stabs"> <li class="active"><a href="#tab1">TABELA 1</a></li> <li><a href="#tab2">TABELA 2</a></li> <li><a href="#tab3">TABELA 3</a></li> </ul> </div>

Nesse primeiro código, apenas dê nomes as tabelas. Por exemplo;

<li class="active"><a href="#tab1">Grupos & Usuários</a></li>

Vamos ver abaixo algumas informações importantes.

Estatísticas como menu do painel de controle
Anote aí!
#tab1	Ao clicar na primeira tabela, vai abrir o que foi colocado dentro da DIV com o id="tab1"
#stabs li (JS)	Quando o usuário clica na aba, este código será executado
Active	Quando a aba estiver selecionada
.fadeIn() (JS)	Efeito de entrada assim que a aba for aberta

Depois de fazer as modificações no nome de cada "tab" do código HTML acima, você vai continuar criando um HTML. Pule duas linhas no template e cole:

Código:: <div id="tabs_content_container"> <div id="tab1" class="tab_content" style="display: block;"> <p>Suas informações da TAB1 ficam aqui. Essa TAB fica aberta por padrão.</p> </div> <div id="tab2" class="tab_content"> <p>Suas informações da TAB2 ficam aqui.</p> </div> <div id="tab3" class="tab_content"> <p>Suas informações da TAB3 ficam aqui.</p> </div> </div>

Depois de colar, antes das tags de alinhamento <p> você precisa adicionar algo. O quê? As variáveis do template. Como estamos editando as estatísticas, logo o trecho de quem está conectado, grupos, aniversário e outros quesitos estão em forma de variáveis no template. Vamos dar uma dica para você.

Variáveis do template
Anote aí!
{TOTAL_POSTS}	Total de mensagens criadas no fórum desde de sua existência.
TOTAL_USERS}	Total de usuários do fórum.
{NEWEST_USER}	Mostra qual foi o último usuário registrado no fórum.
{GROUP_LEGEND}[/b]	Lista de grupos do fórum
{LEGEND}[/b]	Aplica antes da lista de grupos, o nome "Legenda".
{TOTAL_USERS_ONLINE}[/b]	Total de usuários conectados no momento no seu fórum.
{RECORD_USERS}[/b]	Recorde de usuários conectados de uma só vez.
{LOGGED_IN_USER_LIST}[/b]	Usuários que estão conectados no momento.
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}[/b]	Aniversariantes e próximos aniversários

Além dessas variáveis, há outras! Você só precisa procurá-las.

Agora que você sabe da existência de algumas variáveis, é necessário adicioná-las entre o HTML <p></p> indicado acima. Vamos citar um exemplo:

<div>
<p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
</div>

Precione o Ctrl + X que recorta a variável removendo-a do local e com o Ctrl + V você pode colar entre o <p></p> da DIV. Beleza!

Depois de uma modificação geral, você só precisa adicionar um código script ao seu template. No topo de todo o seu template, acima da variável:

Código:: {JAVASCRIPT}

Adicione o seguinte código Script:

Código:: jQuery(document).ready(function(){ // When user clicks on tab, this code will be executed jQuery("#stabs li").click(function() { // First remove class "active" from currently active tab $("#stabs li").removeClass('active'); // Now add class "active" to the selected/clicked tab jQuery(this).addClass("active"); // Hide all tab content jQuery(".tab_content").hide(); // Here we get the href value of the selected tab var selected_tab = $(this).find("a").attr("href"); // Show the selected tab content jQuery(selected_tab).fadeIn(); // At the end, we add return false so that the click on the link is not executed return false; }); });

Esse código JavaScript foi adicionado no servidor externo de ShiftActif, mas você pode copiar o código e colar em uma página .JS e linkar no Script como fizemos acima. Porém, pedimos que o crédito adicionado seja mantido. Beleza!

Aconselhamos que deixe o script como está, pois lhe dará um espaço a mais entre seus arquivos de JavaScript do PA.

Publique seu template!

Como adicionar mais TABS?
Para adicionar mais tabs, você só precisa repetir o código <li><a href="#tabNº">Tab nova</a></li>, porém, no HTML nunca pode existir dois arquivos HTML com o mesmo ID (na verdade pode), mas no nosso caso precisamos dar outro nome a essa TAB. No valor em vermelho citado acima, coloque um número diferente dos existentes. Como assim? Exemplo:
<li><a href="#tab4">Tab 4</a></li>
Depois, repita também o seguinte código:
Código:
<div id="tabNº" class="tab_content" style="display: block;"> <p>Content for the First tabs goes here</p> </div>
E no lugar do Nº coloque o mesmo número que colocou acima.
Não encontrei o stats no template do PhpBB2, e agora?
Caso não tenha encontrado, busque por:
Código:

Faça o mesmo processo nos códigos HTML e variáveis abaixo deste trecho.
Resultado:

[TUTORIAL] Estatísticas como menu do painel de controle Faq10

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Estatísticas como menu do painel de controle