[TUTORIAL] Tópico de regulamento na primeira etapa de registro do fórum

Introdução

Com uso de Javascript e uma pequena edição no template, teremos a possibilidade de personalizar o template do regulamento (condição de uso) do seu fórum, para um tópico modificável, sendo dispensável adicionar qualquer regulamento complementar.




1º - Instalação do código Javascript:
Antes de qualquer procedimento, é importante ressaltar que vamos precisar criar o javascript para obter o efeito final. Para proceder com o resultado para todas as versões, altere o código abaixo para o seu caso.

$(function() {
var PHPBB3 = "div.postbody div.content.clearfix";
var PHPBB2 = "tr.post:eq(0) .postbody div";
var INVISION = "div.post:eq(0) div.postbody.clearfix div.post-entry div";
var PUNBB = "div.post:eq(0) div.postbody.clearfix div.post-entry div";

var version = PUNBB;
var topic = "1";
var ID_name = "rules";

$('#'+ ID_name).load('/t'+ topic +'-topic '+ version);
});

LEGENDA
Cores e situações
Azul	- Corresponde a versão do seu fórum. A versão definida como padrão é PHPBB3 que precisa ser seguido exatamente como está escrito na legenda. Ou seja, PHPBB3, PHPBB2, INVISION ou PUNBB (tudo em maiúsculo).
Vermelho	- Número do tópico do seu regulamento.
Violeta	- Nome do ID da DIV (recomendamos não mudar).

2º - Edição do template:


Em seguida, acesse o seu Painel de Controle >> Visualização >> Templates >> Geral >> agreement e clique no Modificar. Copie todo o código e exclua as seguintes variáveis:

Código:

   {AGREEMENT}<br />
   {MY_RULES}<br />

Feito isso, crie uma nova DIV com o ID Rules:

Código:

<div id="rules">Carregando regulamento...</div>

Feito isso, inclua o script no seu template com a versão já definida e salve. Publique seu template e verifique o resultado na página /register do seu fórum.

3º - Localização e noções básicas da função:
CSS na verdade significa "Cascading Style Sheets", sua principal função é personalizar um determinado conteúdo exibido, em um determinado lugar na página. Cada versão de fórum (phpbb2. phpbb3, punbb e invision) possuem uma classe diferente, e nessas classes podem ser adicionadas as “propriedades”. Caso queira conhecer alguns tipos de classes, poderá consultar mais informações no seguinte: Elaborar um código CSS

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

Ver o CSS da base do seu fórum - Permite o administrador conferir o estilo padrão do CSS do fórum. Mesmo se você tiver aplicado algum código CSS na folha de estilo, esse CSS base não será alterado. Ele mostra os códigos que personalizam seu fórum sem a necessidade do CSS adicional, que no caso seria a da folha de estilo.

Procurar CSS - Com essa ferramenta, podemos fazer uma busca nos códigos existentes na folha de estilo CSS. Por exemplo, se você adicionou algum código na folha de estilo, e pelo fato dela ser muito grande você não estiver encontrando o código desejado, a partir do momento em que digitar o código no campo "Procurar CSS", o código será encontrado (se digitado corretamente).

Desativar o CSS de base - Caso desabilite essa opção, o CSS base do seu fórum será desativado, deixando apenas o CSS da folha de estilo.

Melhorar seu CSS - Com essa função ativa, a capacidade de carregamento da página é aumentada, facilitando a navegação nas páginas de seu fórum. Mas é importante lembrar que, para que a função funcione normalmente como prometida, você terá que adicionar o código correto na folha de estilo.

Após toda a aplicação ser feita, para criar uma barra de rolagens caso seu tópico seja muito extenso, basta incluir o seguinte CSS na sua folha de estilos CSS:

Código:

#rules {
  max-height:400px;
  overflow-y:auto;
}

Perguntas & Respostas

• Não consigo acessar o template. O que fazer?
  Templates só estão disponível para fundadores! Ou seja, se não estiver conectado à conta do fundador, não será possível realizar o processo de alteração do mesmo.
  
  
• Vídeo tutorial
  
  
  Youtube: https://youtu.be/Eyg2pxaOmAs Assista em 720p para obter melhor resulução (FULL HD).
  
  
• Resultado
  
  
  https://i.imgur.com/nd6JSov.gif

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Tópico de regulamento na primeira etapa de registro do fórum