[TUTORIAL]Clicar em abas para mostrar as Categorias

Um dos grandes segredos para atrair membros para fórum, são as personalizações que você adiciona nele. Neste tutorial, vamos aprender um efeito, que oculta suas Categorias, e só as mostra, quando você clica em Abas, que poderá personalizar no CSS!
O efeito deste tutorial está disponível apenas para PhpBB3

--> Tutoriais <--
Clicar em abas para mostrar as Categorias

1º - Adicionar o Código JavaScript
Para realizar o efeito desejado, necessitaremos de um JavaScript, que irá ocultar nossas categorias, e mostra-las quando clicarmos nas abas.
Aceda à Painel... Módulos HTML&JAVASCRIPT Gestão dos códigos JavaScript
Clique em adicionar um novo código JavaScript.

	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. 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. Nos tópicos (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.
	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.

Em investimento, marque em No Índice. E adicione o seguinte código:

Código:

function tttf(n) {
var tables = jQuery("#main-content .forabg")[n];
document.getElementById("ttid").innerHTML = "<div class='forabg'>" + tables.innerHTML + "</div>";
}
jQuery(function() {
if (location.pathname=="/forum" || location.pathname=="/") {
var tables = jQuery(".forabg").get();
var tf = document.getElementById("main-content");
var ttab = document.createElement("ul");
ttab.setAttribute("id","ttcl");
for (i=0; i<tables.length; i++) {
tables[i].style.display="none";
ttab.innerHTML += "<li><a href='javascript:void(0);' onclick='tttf(" + [i] + ")'>" + tables[i].childNodes[0].childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].innerHTML + "</a></li>";
tf.parentNode.insertBefore(ttab,tf);
}
var tl = document.createElement("div");
tl.innerHTML = "<div id='ttid'>Clique nas abas acima e veja a categoria.</div>";
tf.parentNode.insertBefore(tl,tf);
}
});

Depois salve!


2º - Código CSS
Agora que o código JavaScript foi adicionado, precisaremos de um CSS complementar, para que seja dado uma personalização.
Painel... Visualização Imagens e Cores Cores Folha de Estilo CSS
Adicione o seguinte código:

Código:

#ttcl {
display: block;
list-style-type: none;
margin: 10px 0px 10px 0px;
}
#ttcl li {
display: inline;
padding: 5px;
margin: 0px 0px 0px 5px;
background: #FFFFFF;
border-radius: 5px;
}
#ttid {
display: block;
background: #FFFFFF;
border-radius: 5px;
padding: 5px;
margin: 5px;
}

Se desejar, poderá personalizar o CSS apresentado acima, para que ele fique mais adequado a seu fórum.
Para isso, recomendamos que leia as FAQs que existem no Fórum de Suporte Oficial.

• Resultado
  
  (Resultado após a aplicação) | (Categoria um aberta) | (Categoria dois aberta)

---

© ShiftActif & Gombor

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida]Clicar em abas para mostrar as Categorias