Início
![[TUTORIAL]Colocando botões para fechar e mostras todas as categorias Chatbo10](https://i.servimg.com/u/f66/15/86/37/09/chatbo10.png) | [TUTORIAL]Colocando botões para fechar e mostras todas as categorias |
Olá pessoal, a pedido do nosso amigo Ryuuga Katoretto eu estou fazendo esse tuto, o efeito dele é mostrar e fechar as categorias colocando dois butões no topo da tela.
--> Tutoriais, dicas e astúcias <--
[TUTORIAL]Colocando botões para fechar e mostras todas as categorias.
[TUTORIAL]Colocando botões para fechar e mostras todas as categorias.
1º - Modificando o template...(APENAS PHPBB2 E PUNBB)
Vá em:
Na primeira linha coloque esse código:Visualização > Templates > Geral >> index_box
- Código:
<div id="tabela">
- Código:
</div>
2º - Adicionando os botões...
Vá em:
E na mensagem de tela inicial adicione este código:Visualização > Página Inicial >> Geral
PUNBB e PHPBB2:
- Código:
<div style="padding:3px;margin-top:8px;margin-bottom:8px;"><span id="mostrador" style="padding:6px;border:2px solid black">MOSTRAR</span>
<span id="escondedor" style="margin-left:5px;padding:6px;border:2px solid black">ESCONDER</span></div>
<script>
jQuery(document).ready(function(){
jQuery("#tabela").hide();
});
</script>
<script>
jQuery(document).ready(function(){
jQuery("#mostrador").click(function(){
jQuery("#tabela").show(1000);
});
jQuery("#escondedor").click(function(){
jQuery("#tabela").hide(1000);
});
});
</script>
<style>
#mostrador, #escondedor{
color:black;
font-weight:bold;
cursor:pointer;
}
#mostrador:hover, #escondedor:hover{
background-color:green;
}
</style>
- Código:
<div style="padding:3px;margin-top:8px;margin-bottom:8px;"><span id="mostrador" style="padding:6px;border:2px solid black">MOSTRAR</span>
<span id="escondedor" style="margin-left:5px;padding:6px;border:2px solid black">ESCONDER</span></div>
<script>
jQuery(document).ready(function(){
jQuery(".forabg").hide();
});
</script>
<script>
jQuery(document).ready(function(){
jQuery("#mostrador").click(function(){
jQuery(".forabg").show(1000);
});
jQuery("#escondedor").click(function(){
jQuery(".forabg").hide(1000);
});
});
</script>
<style>
#mostrador, #escondedor{
color:black;
font-weight:bold;
cursor:pointer;
}
#mostrador:hover, #escondedor:hover{
background-color:green;
}
</style>
- Código:
<div style="padding:3px;margin-top:8px;margin-bottom:8px;"><span id="mostrador" style="padding:6px;border:2px solid black">MOSTRAR</span>
<span id="escondedor" style="margin-left:5px;padding:6px;border:2px solid black">ESCONDER</span></div>
<script>
jQuery(document).ready(function(){
jQuery(".borderwrap").hide();
});
</script>
<script>
jQuery(document).ready(function(){
jQuery("#mostrador").click(function(){
jQuery(".borderwrap").show(1000);
});
jQuery("#escondedor").click(function(){
jQuery(".borderwrap").hide(1000);
});
});
</script>
<style>
#mostrador, #escondedor{
color:black;
font-weight:bold;
cursor:pointer;
}
#mostrador:hover, #escondedor:hover{
background-color:green;
}
</style>
SALVE!
3º - Resultado...
![[TUTORIAL]Colocando botões para fechar e mostras todas as categorias Resultadotutorial1](https://2img.net/r/ihimizer/img850/2910/resultadotutorial1.jpg)
Lembrando que você pode personalizar os botões a sua escolha.
- Funciona em quais versões?
TODAS
© SH-Skins
![[TUTORIAL]Colocando botões para fechar e mostras todas as categorias Act_bottom](https://www.forumeiros.com/i/img/act_bottom.png) | Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Colocando botões para fechar e mostras todas as categorias. |
![[TUTORIAL]Colocando botões para fechar e mostras todas as categorias Vote_lcap](https://2img.net/i/fa/prosilver_grey/vote_lcap.png){kind=small}
![[TUTORIAL]Colocando botões para fechar e mostras todas as categorias Voting_bar](https://2img.net/i/fa/prosilver_grey/voting_bar.png){kind=small}
![[TUTORIAL]Colocando botões para fechar e mostras todas as categorias Vote_rcap](https://2img.net/i/fa/prosilver_grey/vote_rcap.png){kind=small}