JeffLm
Membros Como deixar uma página de "Registrar-se" mais legal(Para fóruns de RPG)
Bom,meu nome é Jeff e estarei mostrando um tutorial legal para fóruns de rpg,que vai ajudar muito.Então vamos começar!
Como vai ficar depois de eu terminar isso?
Link de imagem: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] (Você poderá editar o texto e as imagens também )
Primeiramente,vocês irão em entrar no "Painel de Controle" do seu fórum,clique em "Módulos" e em "HTML e Javascript" depois "Gestão de Códigos Java Script" e clique em "Criar novo Javascript" e cole esse código no "Código Javascript*":
Nota:Está colocado 1 ponto no link para mostrar a cor.
Coloque no titulo:"Registrar-se Estilo RPG",depois deixe em investido em "Em todas as páginas" agora clique em "Confirmar" para salvar o java script
Legenda para editar o código:
Azul:Coloque um link de uma imagem que seja uma borda,que vai ficar em cima do texto.
Verde:Coloque um link de uma imagem que seja um personagem,logo,banner,qualquer coisa,que vai ficar do lado do texto.
Amarelo:Coloque um texto pequeno(Se quiser pode deixar assim mesmo).
Vermelho:Coloque um texto falando que você precisará fazer para se registrar no fórum ou qualquer coisa que você queira(Se quiser pode deixar assim mesmo).
Pronto!Agora quando algum membro clicar em "Registrar-se" no meu fórum avistará isso:
Bom é isso postarei mais tutoriais de programação,preferencialmente para fóruns de RPG
Se tiver alguma duvida comente aqui ou me pergunte por MP(Mensagem Privada)
Como vai ficar depois de eu terminar isso?
Link de imagem: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] (Você poderá editar o texto e as imagens também )
Primeiramente,vocês irão em entrar no "Painel de Controle" do seu fórum,clique em "Módulos" e em "HTML e Javascript" depois "Gestão de Códigos Java Script" e clique em "Criar novo Javascript" e cole esse código no "Código Javascript*":
Nota:Está colocado 1 ponto no link para mostrar a cor.
$(function () {
var Personagem = 'http:.//narutogame.com.br/images/layout/msg/2/1.png';
var Bordas = 'http:.//narutogame.com.br/images/layout/msg/msg_topo.png';
var HTML = '<div class="msg_text" style="background:url(' + Personagem + ') no-repeat bottom;"> <b>Agora falta pouco!</b> <p>Preencha os dados abaixo para criar sua conta do Naruto Game e ter seu personagem nessa aventura.<br>Após seu cadastro será enviando um email para que você confirme seu cadastro, portanto é necessário informar um EMAIL VÁLIDO, para que possa jogar Naruto Game!</p> </div> <style> .msg_text { max-height: 244px !important; padding-top: 70px !important; position: relative !important; z-index: 1 !important; padding-left: 250px !important; padding-bottom: 55px !important; padding-right: 20px !important; background-position: -20px !important; min-height: 180px !important; } .msg_text b { color: #ffd273 !important; font-size: 18px !important; text-transform: uppercase !important; } .msg_text p { color: #d1d8f1 !important; font-size: 12px !important; padding-top: 10px !important; } .msg_text:before, .msg_text:after { height: 59px !important; display: block !important; position: absolute !important; bottom: 0px !important; width: 100% !important; content: " " !important; width: 727px !important; } .msg_text:after { content: " " !important; height: 59px !important; display: block !important; position: absolute !important; width: 550px !important; background-image: url(' + Bordas + ') !important; top: 2px !important; } </style>';
if (window.location.href.indexOf("/register?agreed=true&step=2") > -1 || $('#form_register').length) {
$('#form_register').before(HTML);
}
});
Coloque no titulo:"Registrar-se Estilo RPG",depois deixe em investido em "Em todas as páginas" agora clique em "Confirmar" para salvar o java script
Legenda para editar o código:
Azul:Coloque um link de uma imagem que seja uma borda,que vai ficar em cima do texto.
Verde:Coloque um link de uma imagem que seja um personagem,logo,banner,qualquer coisa,que vai ficar do lado do texto.
Amarelo:Coloque um texto pequeno(Se quiser pode deixar assim mesmo).
Vermelho:Coloque um texto falando que você precisará fazer para se registrar no fórum ou qualquer coisa que você queira(Se quiser pode deixar assim mesmo).
- Exemplo:
Bom eu colocarei essa imagem aqui nas bordas: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
e para substituir o Gaara(O mangá do lado do texto) eu irei colocar essa imagem aqui: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] .Agora que editei as seguintes partes vamos ver como ficou meu código:
$(function () {
var Personagem = '[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]';
var Bordas = '[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]';
var HTML = '<div class="msg_text" style="background:url(' + Personagem + ') no-repeat bottom;"> <b>Falta pouco para sua jornada!</b> <p> -Preencha os dados abaixo para criar sua conta no fórum TSDRPG e se divertir no fórum.<br>Após seu cadastro será enviando um email para que você confirme seu cadastro, portanto é necessário informar um EMAIL VÁLIDO, para que possa registrar-se no TSDRPG e ter várias aventuras!</p> </div> <style> .msg_text { max-height: 244px !important; padding-top: 70px !important; position: relative !important; z-index: 1 !important; padding-left: 250px !important; padding-bottom: 55px !important; padding-right: 20px !important; background-position: -20px !important; min-height: 180px !important; } .msg_text b { color: #ffd273 !important; font-size: 18px !important; text-transform: uppercase !important; } .msg_text p { color: #d1d8f1 !important; font-size: 12px !important; padding-top: 10px !important; } .msg_text:before, .msg_text:after { height: 59px !important; display: block !important; position: absolute !important; bottom: 0px !important; width: 100% !important; content: " " !important; width: 727px !important; } .msg_text:after { content: " " !important; height: 59px !important; display: block !important; position: absolute !important; width: 550px !important; background-image: url(' + Bordas + ') !important; top: 2px !important; } </style>';
if (window.location.href.indexOf("/register?agreed=true&step=2") > -1 || $('#form_register').length) {
$('#form_register').before(HTML);
}
});
Resultado:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Mas jeff,tem um erro ali nas imagens estão repetidas para cima e para baixo?
Convidado,então vamos fazer o seguinte...
Copie esse código:
.msg_text:after {
background-repeat: no-repeat;
}
Agora coloque esse código na sua "Folha de Estilo" de CSS,Entre no "Painel de Controle" do seu fórum depois em "Visualização" e em "Imagens e Cores" ai clique em "Cores" e clique na aba escrita "Folha de Estilo CSS" e cole esse código e clique em "Validar".
Pronto!Agora quando algum membro clicar em "Registrar-se" no meu fórum avistará isso:
- Spoiler:
- [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Bom é isso postarei mais tutoriais de programação,preferencialmente para fóruns de RPG
Se tiver alguma duvida comente aqui ou me pergunte por MP(Mensagem Privada)