Rpg Maker BRasil
RPG Maker Brasil - RMBR

Seja Bem vindo ao Forúm! Faça seu cadastro e desfrute sobre o mundo do RPG Maker!
P.S.: PARA MELHOR VIZUALIZAÇÃO DO FORUM SEM BUGS, RECOMENDO QUE USEM O MOZILLA FIREFOX OU O GOOGLE CHROME!
Rpg Maker BRasil

Evoluindo cada vez mais!


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]

HenRyqUéè

avatar
Administrador
Avaliador
Helper

[Você precisa estar registrado e conectado para ver esta imagem.]

[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 forum) 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!


[Você precisa estar registrado e conectado para ver esta imagem.]
CRÉDITOS!

HenRyqUé
- Criador do code / SPDesign & RMBR
--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Colocando botão para mostrar/fechar o codebox


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

MOSTRAR O CODIGO:
Código:
$(document).ready(function(){ $("dl.codebox").before('<span class="botao">CÓDIGO</span>'); $("dl.codebox, .code, dd.cont_code").hide(); $(".botao").click(function(){ $(this).next("dl.codebox, .code").slideToggle("slow"); }); });

Salve!


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

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

MOSTRAR O CODIGO:
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!


- Resultado...
[Você precisa estar registrado e conectado para ver esta imagem.]
Lembrando que você pode editar o estilo do botão ao seu gosto!
Exemplo vivo: [Você precisa estar registrado e conectado para ver este link.]

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




© RMBR & SPDesign


[Você precisa estar registrado e conectado para ver esta imagem.] 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



Última edição por HenRyqUéè em 11/01/13, 01:17 pm, editado 2 vez(es)

http://rmbr.forumeiros.com/

Montillo

avatar
Designer
Obrigado por compartilhar ..Feliz

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