Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

avatarT-Lord
Admin


[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.



- Modificando o template...(APENAS PHPBB2 E PUNBB)
Vá em:

Visualização > Templates > Geral >> index_box
Na primeira linha coloque esse código:
Código:
<div id="tabela">
E na ultima linha coloque esse código:
Código:
</div>
Publique o template!


- Adicionando os botões...
Vá em:

Visualização > Página Inicial >> Geral
E na mensagem de tela inicial adicione este código:

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>
PHPBB3:

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>
INVISION:

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!


- Resultado...

Lembrando que você pode personalizar os botões a sua escolha.


  • Funciona em quais versões?
    TODAS




© SH-Skins


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.

Ver perfil do usuário http://www.zonetoony.net

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum