Staffer Group BR™

Fórum interativo totalmente gratuito!


 VisualizaçõesPermissão deste fórum:
Não podes responder a tópicos


CurtirDiretório deste fórum:
Fóruns » Principal » • » Tutoriais » Tutoriais sobre programação

#1
 HenRyqUéè

HenRyqUéè
Membro

■ Colocando botão para mostrar/ocultar o codebox Reglem10
[TUTORIAL] Colocando botão para mostrar/fechar o codebox

Olá pessoal, a maioria de vcs já viram em meus tutos que eu coloco todos os codes dentro de um spoiler pra no ficar grande, e isso fica muito chato pois demora muito. Então eu fiz esse code pra agilizar meu trabalho (no meu fórum) e gostaria q algum admin aqui do spdesign colocasse esse code tb, pq fica muito mais organizado e elegante (e o mais: e 100% editável). O efeito do code é adicionar um botão antes do codebox, e a função desse botão é fechar e esconde a codebox sem precisar de nenhuma outra tag na hora de colocar seu codigos!


■ Colocando botão para mostrar/ocultar o codebox Act_bottom
CRÉDITOS!

HenRyqUé - Criador do code / SPDesign & RMBR

--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Colocando botão para mostrar/fechar o codebox


1º - Adicionando o code JavaScript...
Vá em:

Módulos > HTML e JavaScript > Gestão do código JavaScript >> Novo JavaScript
Título * : Dê qualquer título ao código;
Investimento : Marque "Em todas as páginas";
Código JavaScript * : Cole o code abaixo:

Código:
$(document).ready(function(){
$("dl.codebox").before('<span class="botao">CÓDIGO:</div>');
$("dl.codebox, code, dd.cont_code").hide();
$(".botao").click(function(){
$("dl.codebox, code, dd.cont_code").fadeToggle();
});
});
$.getScript('http://metalltestes.virtuaboard.com/16152.js');


Salve!

2º - Adicionando o code CSS...
Vá em:

Visualização > Imagens e Cores > Cores >> Folha de Estilo CSS
Cole o seguinte code na folha:

Código:
/*www.rmbr.forumeiros.com*/
.botao{
  margin-top:10px;
padding:5px;
  color:white;
  font-weight:bold;
  cursor:pointer;
background-image: linear-gradient(bottom, rgb(194,188,194) 0%, rgb(125,123,125) 100%);
background-image: -o-linear-gradient(bottom, rgb(194,188,194) 0%, rgb(125,123,125) 100%);
background-image: -moz-linear-gradient(bottom, rgb(194,188,194) 0%, rgb(125,123,125) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(194,188,194) 0%, rgb(125,123,125) 100%);
background-image: -ms-linear-gradient(bottom, rgb(194,188,194) 0%, rgb(125,123,125) 100%);

background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0, rgb(194,188,194)),
 color-stop(1, rgb(125,123,125))
);
  text-align:center;
}
.botao:hover{
   background-image: linear-gradient(top, rgb(194,188,194) 0%, rgb(125,123,125) 100%);
background-image: -o-linear-gradient(top, rgb(194,188,194) 0%, rgb(125,123,125) 100%);
background-image: -moz-linear-gradient(top, rgb(194,188,194) 0%, rgb(125,123,125) 100%);
background-image: -webkit-linear-gradient(top, rgb(194,188,194) 0%, rgb(125,123,125) 100%);
background-image: -ms-linear-gradient(top, rgb(194,188,194) 0%, rgb(125,123,125) 100%);

background-image: -webkit-gradient(
 linear,
 left top,
 left bottom,
 color-stop(0, rgb(194,188,194)),
 color-stop(1, rgb(125,123,125))
);
}


Valide!

3º - Resultado...
■ Colocando botão para mostrar/ocultar o codebox Imgcm
Lembrando que você pode editar o estilo do botão ao seu gosto!
Exemplo vivo: http://dsfsdfdsaf.forumeiros.com/t2-ewdfseafsdfs


  • Funciona em quais versões?
    Testei apenas em PUNBB mas axo que funciona em todas.




© RMBR & SPDesign


■ Colocando botão para mostrar/ocultar o codebox Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[DÚVIDA] Colocando botão para mostrar/fechar o codebox

#2
 D'Leandro™

D'Leandro™
Fundador
Aceito: Movido para o local correspondente.

#3
 lucasyori

lucasyori
Membro
Comentando para testar.

#4
 Conteúdo patrocinado