ShiftActif fórum


Participe da melhor comunidade sobre fóruns!

Bem vindo ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!!
Compartilhe
Ver o tópico anteriorIr em baixoVer o tópico seguinte
avatar
Adminactif
Adminactif
Masculino
Idade : 23
PointActif's : 4813
ReputActifs : 97
Mensagens : 2707
Inscrição : 13/04/2011

Localização : Vilhena - RO
100%
Ver perfil do usuáriohttp://www.shiftactif.com/

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

em Dom 30 Dez - 12:29


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




- 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(http://i12.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(http://i12.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(http://i12.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(http://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.



- 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í!
#tab1Ao 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
ActiveQuando 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="#tab">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 coloque o mesmo número que colocou acima. Beleza!

  • Não encontrei o stats no template do PhpBB2, e agora?
    Caso não tenha encontrado, busque por:
    Código:
    <!-- BEGIN disable_viewonline -->
    Faça o mesmo processo nos códigos HTML e variáveis abaixo deste trecho.

  • Resultado:






© ShiftActif


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
Ver o tópico anteriorVoltar ao TopoVer o tópico seguinte
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum