[TUTORIAL] Criar uma página de login personalizada

Você pode criar uma página de login personalizada e adicionar os links mais badalados! É isso mesmo! Adicionar publicidades, links externos para outros sites e muito mais. Neste tutorial você vai criar sua página como ShiftActif e personalizar mais ainda seu fórum.

--> Tutoriais <--
Criar uma página de login personalizada

1º - HTML dos fóruns:
No HTML podemos realizar efeito que não seriam possíveis em widgets, mensagem da home page ou qualquer outro meio no fórum. Vejamos abaixo dicas sobre as páginas HTML.

Painel de Con... > Módulos > HTML e Javascript > Gestão das páginas HTML > Criar uma página HTML >

Título - Neste campo terá de adicionar um título para a sua página HTML, servirá para identificar a sua página na lista de páginas HTMl, do Painel de Cntrole, e fará também parte do endereço da página. Por exemplo:Título: ForumeirosEndereço da página: .../forumeiros-h1.html

ATENÇÃO: A designação que aparece à frete do nome da página, no endereço, modifica consoante a número da página criada. Se for a primeira página a ser criada, então será -h1, se for a quarta página a ser criada será -h4, etc.

Você deseja utilizar o início e o final da página do seu fórum? - Se optar pelo "Sim", a sua página apresentará o cabeçalho (Logo e menu do Fórum) e o rodapé (barra de links úteis). Uma das vantagens desta escolha, é que terá de personalizar menos o seu texto, por exemplo, pois, poderá utilizar as classes CSS, do seu próprio Fórum, e também não necessita de criar uma estrutura HTML, apenastem de adicionar o código de conteúdo. Se optar pelo "Não" a página torna-se independente da estrutura do Fórum, mas neste caso terá de adicionar a própria estrutura, com as balizas html, head, body, etc.

Usar esta página como página inicial? - Se pretende que a página seja utiliza como a página inicial do Fórum, deverá colocar "Sim", mas se optar por esta opção, terá de adicionar o endereço do site Forumeiros.com. (ver FAQ)

Código HTML - Neste campo, terá de adicionar o conteúdo da sua página HTML, se colocou não na opção 2, então terá de criar uma estrutura de uma página HTML.

Confirmar / Previsualizar - Nestes dois botões poderá confirmara criação da sua página HTML, carregando em "Confirmar". Ou poderá visualizar o resultado que a página terá quando ele for visualizada por todos os usuários, carregando em "Previsualizar".

Escolha um título e depois cole o código HTML produzido por ShiftActif para este tutorial:

POR FAVOR, MANTENHA OS CRÉDITOS DENTRO DO CÓDIGO. ELES SÃO INVISÍVEIS QUANDO A PÁGINA FOR PUBLICADA, ASSIM VOCÊ NOS AJUDA A MANTER OS DIREITOS AUTORIAIS DO CÓDIGO SEM PUBLICAÇÃO POR LINK DO CONTEÚDO.

Código:

<!-- ShiftActif http://www.shiftactive.blogspot.com/ INÍCIO -->
<form action="/login" method="post" name="form_login"><div class="panel"><div class="inner"><span class="corners-top"><span> </span></span><div class="content"><div class="h3">Digite os dados da sua conta para continuar.</div><fieldset class="fields1 left fld_connexion"><dl><dt><label for="username">Nome de usuário:</label></dt><dd><input type="text" tabindex="1" name="username" id="username" size="25" maxlength="40" value="" class="inputbox autowidth" /></dd></dl><dl><dt><label for="password">Senha:</label></dt><dd><input type="password" tabindex="2" id="password" name="password" size="25" maxlength="25" class="inputbox autowidth" /></dd></dl><dl><dd><label for="autologin"><input type="checkbox" name="autologin" id="autologin" tabindex="4" checked="checked" class="radio" /> Conexão automática</label></dd></dl><dl><dt> </dt><dd><input type="hidden" name="redirect" value="" /><input type="hidden" name="query" value="" /><input type="submit" name="login" tabindex="6" value="Conectar-se em ShiftActif" class="button1" /></dd></dl><dd><a href="/profile?mode=sendpassword">Esqueci minha senha</a></dd><dd><a href="/register">Registre-se em ShiftActif !</a></dd><dd onclick="return CFAQ.display('faq_a_0', false);"><a href="javascript:void(0)" onclick="return CFAQ.display('faq_a_0', true);" onfocus="this.blur();">Não consegue conectar-se? Clique aqui!</i> ?</a></dd></fieldset><div class="fb_login left"><span class="fb_or">Redes sociais S.A</span> <a href='http://www.shiftactive.blogspot.com/feeds/posts/default'><img src='http://4.bp.blogspot.com/-O-Fccq9LyCk/TqnS3yxCdJI/AAAAAAAABL4/Ku5HNNlUhzI/s000/rss.png'/></a>
<a href='http://twitter.com/#!/Shiftactif'><img src='http://4.bp.blogspot.com/-PuN9-Fyomjo/TqnS4CZHNDI/AAAAAAAABME/VpsoBYS5Vg4/s000/twitter.png'/></a>
<a href='http://www.youtube.com/user/Shiftactif'><img src='http://i43.servimg.com/u/f43/16/63/75/54/youtub10.png'/></a><a href='http://www.facebook.com/ShiftActif'><img src='http://i33.servimg.com/u/f33/16/63/75/54/social10.png'/></a>
<a href='https://plus.google.com/u/0/116825264468184113734'><img src='http://i33.servimg.com/u/f33/16/63/75/54/square10.png'/></a></div></div><span class="corners-bottom"><span> </span></span></div></div></form>
<script src="http://illiweb.com/rs3/41/frm/collapsible_faq.js" type="text/javascript"></script>
<div class="panel"><div class="inner"><span class="corners-top"><span></span></span><div class="content"><div class="h3">Não tem uma conta? Registre-se então!</div><dd style="display:none;" id="faq_a_0"><div style="color: #86b125;padding: 0px 10px;text-decoration: none;">Não consegue fazer o login?</div><br><p>Você já se registou? Você deve se <u>Registar</u> primeiramente para poder se <u>conectar</u> em seguida. Você tem certeza de que não foi expulso do fórum? Surgirá uma mensagem se tal aconteceu. Caso haja uma expulsão deve contactar um técnico de ShiftActif (<b><span style="color:#f60">Admin</span>actif</b>) ou o <b><span style="color:#f60">Admin</span>actif voluntário</b> do fórum e perguntar porquê caso não saiba a razão. Caso esteja registado e não se encontre expulso e mesmo assim não consiga <u>Entrar</u>, verifique novamente se o seu <u>Nome de Utilizador</u> e <u>Senha</u> são os correctos. Normalmente é esse o problema. Caso não saiba mesmo o que se possa passar e não seja nenhuma das razões acima descritas <a href="http://file-actif.xp3.biz/contato/fale-conosco.html">contacte o Adminactif ou Moderactif</a> do fórum porque poderá acontecer haver alguma configuração errada no sistema.</p></dd><hr class="dashed" /><p><a href="/register" class="button2">Registrar-se agora!</a></p></div> <span class="corners-bottom"><span> </span></span></div></div>
<!-- ShiftActif http://www.shiftactive.blogspot.com/  FIM -->

Você pode mudar todos links que estãod disponíveis no código.



2º - Javascript dos fóruns:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>

Título Correspondente ao nome da página JavaScript/jQuery que será criada.

Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. Pode ser na galeria, nos fóruns ou sub-fóruns. Vamos ver algumas opções: No índice : O código será aplicado ao índice do fórum. No portal : O código será aplicado ao Portal do fórum. Nos sub-fóruns (Fóruns) : O código será aplicado nos Fóruns e Sub-fóruns. Sobre os temas : O código será aplicado aos tópicos do fórum. Na galeria : O código será aplicado na sua Galeria de imagens. Em todas as páginas : O código será aplicado em todas as páginas do fórum.

Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.

Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

Na opção do Investimento, marque a opção "Em todas as páginas" e cole o código abaixo:

Código:

// Shiftactif original post topic shiftactif.forumactif.com/641-support
        jQuery(document).ready(function(){{jQuery('a[href="/login"]').attr('href','/hID-')}});

em /hID- que está em vermelho, coloque o número da página HTML que está o formulário de login.

• Resultado:
  O resulto é visto assim que você confirma sua página Javascript. Por exemplo: http://www.shift.forumactif.com/h3-

---

© ShiftActif

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Criar uma página de login personalizada