AjudaFM
Bem-Vindo
não é obrigado se registra para ver nosso tutoriais
agora se quiser tirar uma duvida registre-se
Bem vindo ao AJUDAFM 4.0
Cadastre-se agora para ter acesso a todos os nossos recursos. Uma vez cadastrado e logado, você será capaz de criar tópicos, postar respostas a tópicos já existentes, a reputação de seus companheiros, começar seu próprio mensageiro privado, atualizações de status post, gerir o seu perfil e muito mais. Esta mensagem será removida assim que tiver logado no AJUDAFM 4.0
Entrar Cadastre-se
AjudaFM

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]

1 [TUTORIAL] Login/Registro rápido em Ter Dez 04, 2012 12:20 pm

Mensagens : 100
CashFM : 264
Reputação : 21
inscrição : 02/07/2012
Idade : 19

avatar

Maxinho

AdminFM

AdminFM

Código por Max Kyle | AjudaFM
Todos os direitos reservados se for colocar no seu fórum favor não tire nossos créditos



Login/Registro rápido

Nesse tutorial estarei ensinando como criar um Login Registro rápido.



1º - Adicionar


Código:
#rep-mail-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  height: 25px;
  font-size: 11px;
  width: 100%;
  z-index: 999;
}
/* Panel Tab/button */
 
.tab {
    background: url(http://i.imgur.com/fDQkE.png) repeat-x 0 0;
  height: 22px;
  position: relative;
    top: 0;
    z-index: 999;
}
 
 
 
 
.tab ul.login {
  display: block;
  position: relative;
    float: right;
    clear: right;
    height: 42px;
  width: auto;
    font-weight: bold;
  line-height: 42px;
  margin: 0;
  right: 150px;
    color: white;
    font-size: 80%;
  text-align: center;
}
 
.tab ul.login li.left {
    background: url(http://i.imgur.com/XwNu2.png) no-repeat left 0;
    height: 42px;
  width: 30px;
  padding: 0;
  margin: 0;
    display: block;
  float: left;
}
 
.tab ul.login li.right {
    background: url(http://i.imgur.com/QmQzs.png) no-repeat left 0;
    height: 42px;
  width: 30px;
  padding: 0;
  margin: 0;
    display: block;
  float: left;
}
 
.tab ul.login li {
    text-align: left;
    padding: 0 6px;
  display: block;
  float: left;
  height: 42px;
    background: url(http://i.imgur.com/PAFBM.png) repeat-x 0 0;
}
 
.tab ul.login li a {
  color: #15ADFF;
}
 
.tab ul.login li a:hover {
  color: white;
}
 
.tab .sep {color:#414141}
 
.tab a.open, .tab a.close {
  height: 20px;
  line-height: 20px !important;
  padding-left: 30px !important;
  cursor: pointer;
  display: block;
  width: 100px;
  position: relative;
  top: 11px;
  width: 120px;
}
 
.tab a.open {background: url(http://i.imgur.com/NWFec.png) no-repeat left 0;}
.tab a.close {background: url(http://i.imgur.com/GGiBD.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://i.imgur.com/mboPc.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://i.imgur.com/xztqF.png) no-repeat left -19px;}
/* sliding panel */
#toppanel {
    position: absolute;  /*Panel will overlap  content */
    /*position: relative;*/  /*Panel will "push" the content down */
    top: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
 
#panel {
  width: 100%;
  height: 210px;
  color: #999999;
  background: #272727;
  overflow: hidden;
  position: relative;
  z-index: 3;
  display: none;
}
 
#panel h1 {
  font-size: 1.6em;
  padding: 5px 0 10px;
  margin: 0;
  color: white;
}
 
#panel h2{
  font-size: 1.2em;
  padding: 10px 0 5px;
  margin: 0;
  color: white;
}
 
#panel p {
  margin: 5px 0;
  padding: 0;
}
 
#panel a {
  text-decoration: none;
  color: #15ADFF;
}
 
#panel a:hover {
  color: white;
}
 
#panel a-lost-pwd {
  display: block;
  float: left;
}
 
#panel .content {
  width: 960px;
  margin: 0 auto;
  padding-top: 15px;
  text-align: left;
  font-size: 0.85em;
}
 
#panel .content .left {
  width: 280px;
  float: left;
  padding: 0 15px;
  border-left: 1px solid #333;
}
 
#panel .content .right {
  border-right: 1px solid #333;
}
 
#panel .content form {
  margin: 0 0 10px 0;
}
 
#panel .content label {
  float: left;
  padding-top: 2px;
  clear: both;
  width: 280px;
  display: block;
}
 
#panel .content input.field {
  border: 1px #1A1A1A solid;
  background: #414141;
  margin-right: 5px;
  margin-top: 4px;
  width: 200px;
  color: white;
  height: 16px;
}
 
#panel .content input:focus.field {
  background: #545454;
}
 
/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
  display: block;
  float: left;
  clear: left;
  height: 24px;
  text-align: center;
  cursor: pointer;
  border: none;
  font-weight: bold;
  margin: 10px 0;
}
 
#panel .content input.bt_login {
  width: 74px;
  background: transparent url(http://i.imgur.com/6E0rz.png) no-repeat 0 0;
}
 
#panel .content input.bt_register {
  width: 94px;
  color: white;
  background: transparent url(http://i.imgur.com/sxtfY.png) no-repeat 0 0;
}
 
#panel .lost-pwd {
  display: block;
  float:left;
  clear: right;
  padding: 15px 5px 0;
  font-size: 0.95em;
  text-decoration: underline;
}
 
 
.main .tieude .page-title{color:#fff!important;background:#fff;opacity:0.8}
.main .tieude {
height: 28px;
padding: 6px;
border: 4px solid
#DAD3D3;
-webkit-box-shadow: 0 2px 2px -2px
rgba(0, 0, 0, .52);
font-size: 12px;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-weight: 700;
background-color:
#DAD3D3;
color:
black;
}
.pun div, .pun td, .sig-line {
border-color: #
#DDD;
color: #
#DDD;
}
.main .tieude .page-title{padding: 5px;}.noidungthongbao{padding: 0px;height:27px!important}
 
a {
cursor: pointer;
color:
#3B5998;
text-decoration: none;
}

2º - Adicionar



Marcar:

Código:
$(document).ready(function() {
 
  // Expand Panel
  $("#open").click(function(){
      $("div#panel").slideDown("slow");
 
  }); 
 
  // Collapse Panel
  $("#close").click(function(){
      $("div#panel").slideUp("slow"); 
  });     
 
  // Switch buttons from "Log In | Register" to "Close Panel" on click
  $("#toggle a").click(function () {
      $("#toggle a").toggle();
  });     
     
});

3º - Adicionar


overall_header
procure por este código:
Código:
    <a id="top" name="top" accesskey="t"></a>

(se não encontrar nada apague os espaços do inicio do código)

Quando encontrar cole este código em cima:

Código:
 <!-- BEGIN switch_user_logged_out -->
  <div id="rep-mail-bar">
<div id="toppanel">
  <div id="panel" style="display: none; ">
      <div class="content clearfix">
        <div class="left">
            <h1>Desenvolvido por Max Kyle | AjudaFM</h1>
            <h2>Por favor, registre e faça login para participar do fórum</h2>     
            <p class="grey">Fórum melhor vizualizado em <a href="http://www.mozilla.com/en-US/products/download.html?product=firefox-3.0.10&os=win&lang=en-US" onmouseover="showtip('Baixar Firefox ..!');" onmouseout="hidetip();" target="_blank"><img src="http://i43.servimg.com/u/f43/17/63/07/30/ff1011.png"></a> e <a href="http://www.google.com/chrome?hl=br" onmouseover="showtip('Baixar Google Chrome ..!');" onmouseout="hidetip();" target="_blank"><img src="http://i43.servimg.com/u/f43/17/63/07/30/gc1010.png"></a><br>com uma resolução de 1024x768 ou superior. <br></p>
           
        </div>
        <div class="left">
           
                          <form action="/login?redirect=/" method="post" name="form_login" id="login-vds">
                <h1 class="padlock">Entrar</h1>
                            <label class="grey" for="log">Nome de Utilizador:</label>
 <input class="field" id="log" type="text" size="10" name="username">
<label class="grey" for="pwd">Senha:</label>
<input class="field" id="pwd" type="password" size="10" name="password">
 <input id="bt_login" class="bt_login" type="submit" name="login" value="Entrar">
 <label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever">  Lembra de min</label>
                <div class="clear"></div>
 </form>
 <script type="text/javascript">//<![CDATA[
$(function(){$('#login-vds').attr('action','/login?redirect='+this.location.pathname);});//]]></script>
 
           
        </div>
        <div class="left right">
                          <form action="/register?agreed=true&step=2" method="post">
              <h1>Registe-se rápido !</h1>           
              <label class="grey" for="signup">Nome de Utilizador : *</label>
<input class="field" type="text" id="username_reg" name="username" value="" size="25" maxlength="25">
              <label class="grey" for="email">Email: *</label>
              <input class="field" type="text" name="email" id="email" size="23">
                                        <label class="grey" for="signup">Senha : *</label>
<input class="field" type="password" id="password_reg" name="password" value="" size="25" maxlength="25">
 
              <input type="submit" name="submit" value="Registe-se" class="bt_register">
            </form>
        </div>
      </div>
  </div> <!-- /login --> 
 
    <!-- Guia no topo | AjudaFM | Max Kyle --> 
  <div class="tab">
      <ul class="login">
          <li class="left"> </li>
          <li>AjudaFM!</li>
        <li class="sep">|</li>
        <li id="toggle">
            <a id="open" class="open" href="#" style="display: block; ">Entrar | Registrar</a>
            <a id="close" style="display: none; " class="close" href="#">Fechar</a>       
        </li>
          <li class="right"> </li>
      </ul>
  </div> <!-- / top -->
 
</div>
  <!-- END switch_user_logged_out -->


pronto, lembrando que o código só funciona com pessoas que não estão logadas então para testar sai da sua conta no fórum


Resultado





Desenvolvido por Max Kyle | © AjudaFM
Editado e Postado por © Max Kyle


Atenção:
Lembrando galera todos os tutoriais são testados sem ter nenhum outro código ativo, pois isso pode gerar incompatibilidade entre eles.



Última edição por Maxinho em Qui Dez 13, 2012 12:35 am, editado 1 vez(es)

Ver perfil do usuário http://ajudafm.ativoforum.com

2 Re: [TUTORIAL] Login/Registro rápido em Qua Dez 12, 2012 7:43 pm

Mensagens : 2
CashFM : 2
Reputação : 0
inscrição : 12/12/2012

avatar

'Sam

ModeradorFM

ModeradorFM

Irei testar codigo de registro rapido espere que funcione obrigado por postar Very Happy


_________________________________________________________________________________________________________

Olá Convidado, olhe essas Dicas Importantes:
- Respeite as Regras do fórum
- Teste o Editor de Imagens
- Utilize as Ferramentas de usuário e o serviço de litígios.
- Conheça os Tutoriais que vão lhe ajudar em seu fórum
- Não peça suporte por MP ou no Chat-Box
- As mudanças de nome de usuário são feitas clicando Aqui
Ver perfil do usuário

3 Re: [TUTORIAL] Login/Registro rápido em Qua Dez 12, 2012 10:39 pm

Mensagens : 81
CashFM : 219
Reputação : 16
inscrição : 19/11/2012
Idade : 20
Localização : Logo ali

avatar

iHeload

ModeradorFM

ModeradorFM

Facilita muito pra gente, vlw amigo


_________________________________________________________________________________________________________

Olá Convidado, olhe essas Dicas Importantes:
- Respeite as Regras do fórum
- Teste o Editor de Imagens
- Utilize as Ferramentas de usuário e o serviço de litígios.
- Conheça os Tutoriais que vão lhe ajudar em seu fórum
- Não peça suporte por MP ou no Chat-Box
- As mudanças de nome de usuário são feitas clicando Aqui
Ver perfil do usuário http://sw-design.forumeiros.com

4 Re: [TUTORIAL] Login/Registro rápido em Seg Dez 17, 2012 1:14 am

Mensagens : 23
CashFM : 61
Reputação : 1
inscrição : 14/12/2012

avatar

SrAndy

Sou Nível 1


gostei vou ver testar no meu forum ^^

Ver perfil do usuário

5 Re: [TUTORIAL] Login/Registro rápido em Sex Dez 21, 2012 3:11 pm

Mensagens : 6
CashFM : 17
Reputação : 0
inscrição : 21/12/2012

avatar

ϟ iKиigнт •

Sou Nível 1


Irei botar em meu fórum . Obrigado !

Ver perfil do usuário

6 Re: [TUTORIAL] Login/Registro rápido em Dom Dez 23, 2012 2:50 am

Mensagens : 6
CashFM : 17
Reputação : 0
inscrição : 21/12/2012

avatar

ϟ iKиigнт •

Sou Nível 1


Mudei de pc .

Ver perfil do usuário

7 Re: [TUTORIAL] Login/Registro rápido em Qui Dez 27, 2012 3:48 pm

Mensagens : 2
CashFM : 6
Reputação : 0
inscrição : 27/12/2012

avatar

Belphegor

Sou Nível 1


Muito Bom Tutorial Vou Testa No Meu Forum

Ver perfil do usuário

8 Re: [TUTORIAL] Login/Registro rápido em Seg Jan 21, 2013 4:31 pm

Mensagens : 2
CashFM : 6
Reputação : 0
inscrição : 21/01/2013

avatar

Arikarindokuta

Sou Nível 1


vlw mano tava presizando muito

Ver perfil do usuário

9 Re: [TUTORIAL] Login/Registro rápido em Sab Jan 26, 2013 1:16 am

Mensagens : 18
CashFM : 61
Reputação : 2
inscrição : 14/12/2012

avatar

VitorC.

DesignFM

DesignFM

Gostei!


_________________________________________________________________________________________________________

Olá Convidado, olhe essas Dicas Importantes:
- Respeite as Regras do fórum
- Teste o Editor de Imagens
- Utilize as Ferramentas de usuário e o serviço de litígios.
- Conheça os Tutoriais que vão lhe ajudar em seu fórum
- Sempre salve as imagens feitas em seu computador, pois elas podem ser apagadas pelo servidor
- Fique com um pedido ativo por vez, se não o segundo criado será descartado
Ver perfil do usuário

10 Re: [TUTORIAL] Login/Registro rápido em Dom Maio 19, 2013 7:12 pm

Mensagens : 2
CashFM : 6
Reputação : 0
inscrição : 19/05/2013

avatar

Julinho

Sou Nível 1


post para ver se te agradece

Ver perfil do usuário

11 Re: [TUTORIAL] Login/Registro rápido em Seg Maio 05, 2014 10:33 pm

Mensagens : 5
CashFM : 15
Reputação : 0
inscrição : 05/05/2014

avatar

Junior Silva

Sou Nível 1


Bueno.

Ver perfil do usuário

Conteúdo patrocinado



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