[Tutorial] Estatísticas da versão PhpBB3 no formato punBB

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Admin
Admin
Administrador
Tempo Online : 250d 6h 21m 59s
Mensagens : 693
Reputação : 4
https://bestweb.forumeiro.com

MensagemAdmin Dom Out 02, 2016 12:28 am

Neste tutorial iremos aprender a como colocar as estatísticas de um fórum em formato PHPBB3 na forma das estatísticas da versão Punbb. Para isso utilizaremos um código JAVASCRIPT bem eficaz.


--> Tutoriais, dicas e astúcias <--
Estatísticas personalizadas



- Noção básica das páginas Javascript
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 >>

[Tutorial] Estatísticas da versão PhpBB3 no formato punBB Painel13
[Tutorial] Estatísticas da versão PhpBB3 no formato punBB 110111[Tutorial] Estatísticas da versão PhpBB3 no formato punBB 398853 Título - Correspondente ao nome da página JavaScript/jQuery que será criada.
[Tutorial] Estatísticas da versão PhpBB3 no formato punBB 110210[Tutorial] Estatísticas da versão PhpBB3 no formato punBB 398853 Localização - São destinados os devidos locais para onde você aplicará os efeitos do
JavaScript nos fóruns. Pode ser na galeria, nos fóruns ou sub-fóruns.
Vamos ver algumas opções:
No índice : O código será aplicado ao índice do fórum.
No portal : O código será aplicado ao Portal do fórum.
Nos sub-fóruns (Fóruns) : O código será aplicado nos Fóruns e Sub-fóruns.
Sobre os temas : O código será aplicado aos tópicos do fórum.
Na galeria : O código será aplicado na sua Galeria de imagens.
Em todas as páginas : O código será aplicado em todas as páginas do fórum.
[Tutorial] Estatísticas da versão PhpBB3 no formato punBB 110310[Tutorial] Estatísticas da versão PhpBB3 no formato punBB 398853 Código JavaScript - Campo destinado para receber os códigos JavaScript e jQuery.
[Tutorial] Estatísticas da versão PhpBB3 no formato punBB 110410[Tutorial] Estatísticas da versão PhpBB3 no formato punBB 398853 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.


- Colocando código em funcionamento:
Para que o efeito funcione temos que adicionar um código em Jquery. Em 'investimento' na função do seu painel de controlo, marque a opção "No índice ". Logo após no campo Código JavaScript vamos colar o seguinte código:
Código:
jQuery(document).ready(function(){
  $(".forabg + .linklist").after('<div id="stats"></div>');
  $("p + .clear + .h3, p.page-bottom + .h3, p.page-bottom").appendTo("#stats");
  $("#i_whosonline + p").addClass('onlinelist');
});
Aconselhamos que não altere nenhuma opção do código, lembrando-se que o mesmo é somente para versão Phpbb3.


- Inserindo o código CSS
Vamos criar o CSS para suportar as funções do código, vá até.

Painel de controle >> Visualização >> Imagens e Cores >> Cores >> Folha de estilos CSS

[Tutorial] Estatísticas da versão PhpBB3 no formato punBB 1114
E adicione o seguinte código:

Código:
#stats {
  background: #F4F4F4;
  font-size: 11px;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  color: #333;
  border: 1px solid #DDD;
  border-bottom: none;
  margin-top: 8px;
  padding: 8px 10px;
}
#stats .h3 + p {
  float: right;
}
#stats .h3, .onlinelist br + strong + br, .onlinelist a + br + br +br + br, #i_whosonline {
  display: none;
}
#stats + .h3 {
  border: none;
  font-weight: normal;
  text-transform: none;
  position: relative;
  margin-top: -26px;
  text-align: right;
  right: 14px;
  top: 33px;
}

#stats + .h3 a {
  font-size: 13px;
}
.onlinelist {
  font-size: 12px;
  color: #333;
  background: #F4F4F4;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  border: 1px solid #DDD;
  border-top-style:  dashed;
  margin-top: 8px;
  padding: 8px 10px;
}
.onlinelist em {
  font-style: normal;
}

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

Cria uma conta ou logue para postar uma mensagem.

Você precisa ser um membro, para poder postar uma resposta.

Criar conta

Participe de nossa comunidade, basta se registrar. É Fácil!


Criar uma conta

Logar

Já tem uma conta? Sem problemas, Logue agora.


Logar-se

 
Permissões neste sub-fórum
Não podes responder a tópicos