Página de login por etapas.

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Atendido / Resolvido Página de login por etapas.

Mensagem por Saikenn em 04.09.19 0:42

Detalhes da questão


Endereço do fórum: http://pmdsp.forumeiros.com/
Versão do fórum: phpBB3

Descrição


Olá meus amigos, olha eu de novo Feliz
Então, eu queria para o meu fórum, uma página de login por etapas.
Exemplo:

Primeiro: Nome

(Cadastro)

Depois: Senha

(Esqueci a senha)

Já tiveram essa dúvida, mas abandonaram... https://ajuda.forumeiros.com/t113641-pagina-login-com-multi-etapas
Saikenn

Saikenn
Nível 3

Masculino
Inscrito dia : 07/01/2019
Mensagens : 22
Pontos Ativos : 52

https://sisuk.forumeiros.com

Atendido / Resolvido Re: Página de login por etapas.

Mensagem por Harleen em 04.09.19 4:01

Olá @Saikenn, o código que você pediu naquele tópico é o mesmo desse tutorial.
Seta https://ajuda.forumeiros.com/t108522-

O tópico foi dado por resolvido, pois o código está funcionando.

Até mais
Harleen

Harleen
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1745
Pontos Ativos : 2319

https://antenadogames.forumeiros.com/

Atendido / Resolvido Re: Página de login por etapas.

Mensagem por Saikenn em 04.09.19 18:31

@Harleen escreveu:Olá @Saikenn, o código que você pediu naquele tópico é o mesmo desse tutorial.
Seta https://ajuda.forumeiros.com/t108522-

O tópico foi dado por resolvido, pois o código está funcionando.

Até mais

Aqui só aparece quando vai sair, e não quando entra no fórum
E eu queria mudar o fundo, e esse ''Forumeiros'' queria diminuir ele, colocando-o no fim da página
Saikenn

Saikenn
Nível 3

Masculino
Inscrito dia : 07/01/2019
Mensagens : 22
Pontos Ativos : 52

https://sisuk.forumeiros.com

Atendido / Resolvido Re: Página de login por etapas.

Mensagem por Roger123 em 04.09.19 18:37

Olá,
Para a página inicial personalizada, marque a opção "Se você assinalar sim, será preciso inserir um link direcionado para forumeiros.com." como sim.

Os créditos da forumeiros devem estaf bem visíveis!

Cordialmente,
Roger123
Roger123

Roger123
Usuário experiente

Masculino
Inscrito dia : 30/06/2018
Mensagens : 2126
Pontos Ativos : 2310

https://ajuda.forumeiros.com

Atendido / Resolvido Re: Página de login por etapas.

Mensagem por Saikenn em 04.09.19 19:03

@Roger123 escreveu:Olá,
Para a página inicial personalizada, marque a opção "Se você assinalar sim, será preciso inserir um link direcionado para forumeiros.com." como sim.

Os créditos da forumeiros devem estaf bem visíveis!

Cordialmente,
Roger123

Roger123 E o fundo, como eu mudo?

E tem como colocar o ''Sim'' e o ''Não'' alinhados no meio do botão? Página de login por etapas. <a href=Página de login por etapas. Unknow10" />
Saikenn

Saikenn
Nível 3

Masculino
Inscrito dia : 07/01/2019
Mensagens : 22
Pontos Ativos : 52

https://sisuk.forumeiros.com

Atendido / Resolvido Re: Página de login por etapas.

Mensagem por Pedxz em 04.09.19 20:32

Olá @Saikenn,
mude a sua página para a seguinte:
Código:
<!--
DESENVOLVIDO POR ANGE TUTEUR
DISTRIBUIÇÃO PROIBIDA SEM O CONSENTIMENTO DO AUTOR
 --> <style type="text/css">/* CONTÊINERES E CONFIGURAÇÃO GERAL */
body { overflow:hidden; }
#fa_form_container { color:#666; font-size:12px; font-family:Arial, sans-serif; background: tomato; position:fixed; top:0; left:0; right:0; bottom:0; z-index:999999; overflow:auto; }
#fa_form_container a { color:#69C !important; }
#fa_form_container a:hover { color:#369 !important; }
.fa_login_maintitle { font-size:24px; font-weight:bold; text-align:center; text-transform:uppercase; margin:20px 0; }
.fa_login_maintitle img { vertical-align:-5px; height:30px; margin-right:6px; }
.fa_login_title { text-align:center; margin:30px 0; color:#666; font-size:28px; font-weight:bold; font-family:Arial, sans-serif; }
.fa_login_desc { font-size:16px; text-align:center; margin:10px 0; }
.fa_form_wrap { text-align:center; background:#EEE; border:1px solid #DDD; box-shadow:0 6px 12px rgba(0, 0, 0, 0.1); border-radius:3px; padding:30px 6px; width:300px; margin:30px auto; overflow:hidden; position:relative; transition:250ms; }
.fa_login_row { margin:10px 0; }
.fa_form_links { text-align:center; }
.fa_login_origin { font-size:12px; position:fixed; bottom:10px; right:10px; z-index:-1; }
.fa_login_origin a { font-weight:bold; }
 
/* NOME DE USUÁRIO E AVATAR */
.fa_login_avatar { background:#FFF; border:1px solid #DDD; border-radius:100px; padding:2px; display:inline-block; width:100px; height:100px; overflow:hidden; position:relative; }
.fa_login_avatar img { height:100px; width:100px; border-radius:100px; }
#fa_avatar_real { background:#FFF; position:absolute; top:50px; left:50px; right:2px; bottom:2px; height:0; width:0; transition:linear 150ms; }
#fa_avatar_real.avatar_visible { top:2px; left:2px; height:100px; width:100px; }
.fa_login_username { font-size:16px; font-weight:bold; }
 
/* BOTÕES E CAIXAS DE TEXTO */
.fa_login_button { color:#69C; background:none; border:1px solid #69C; border-radius:3px; font-size:16px; font-weight:bold; font-family:Arial, sans-serif; display:block; height:30px; width:240px; margin:10px auto; transition:250ms; outline:none; cursor:pointer; }
.fa_login_button:hover { color:#FFF; background:#69C; }
.fa_login_input { color:#666; background:#FFF; border:1px solid #CCC; border-radius:3px; padding: 0 3px; height:30px; width: 232px; outline:none; }
.fa_login_input:focus { border-color:#69C; }
 
/* SLIDES DE FORMULÁRIO E BOTÃO VOLTAR */
.fa_form_slide { position:absolute; width:100%; transition:300ms; }
#fa_login_back { position:absolute; top:30px; left:40px; opacity:0; visibility:hidden; transition:250ms; }
#fa_login_back.fa_login_visible { opacity:1; visibility:visible; }
 
 
/* LISTA DE CONTAS */
#account_list { background:#EEE; position:absolute; top:0; left:0; width:100%; height:100%; overflow:auto; }
.account_list_row { font-size:16px; text-align:left; width:80%; margin:10px auto; position:relative; }
.account_list_inner { background:#FFF; border:1px solid #DDD; border-radius:3px; padding:3px; width:80%; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account_list_inner:hover { background:#FFD }
.account_list_avatar { height:40px; width:40px; vertical-align:middle; margin-right:3px; }
#fa_form_container a.account_list_delete { font-size:30px; color:#F33 !important; background:#FFF; border:1px solid #F33; border-radius:100px; width:20px; height:20px; line-height:22px; text-align:center; position:absolute; margin-top:-10px; top:50%; right:0; display:block; overflow:hidden; }
#fa_form_container a.account_list_delete:hover { color:#333 !important; border-color:#333; }
 
/* CAMPOS OCULTOS */
.logged_out #fa_form_logout, .logged_in #fa_form_login, .noscript #fa_form_login, .noscript #fa_form_logout, #account_list.accounts_hidden { display:none }</style>
<div class="logged_out noscript" id="fa_form_container">
  
  <h1 class="fa_login_maintitle">
      <a target="_blank" href="http://www.forumeiros.com"><img src="http://im0.all-up.com/static/images/sigle.png" /><span style="color:#39C;">Forum</span><span style="color:#333;">eiros.com</span></a>
  </h1>
  
  <!--  START_NOSCRIPT_LOGIN_FORM  -->  <noscript>    <form action="/login" method="post">      <h2 class="fa_login_title">Log in</h2>      <p class="fa_login_desc">Por favor, faça conecte-se para acessar o fórum</p>      <div class="fa_form_wrap">        <div class="fa_login_row">          <input id="fa_login_username" class="fa_login_input" type="text" name="username" placeholder="Seu nome de usuário"/>        </div>                  <div class="fa_login_row">          <input id="fa_login_password" class="fa_login_input" type="password" name="password" placeholder="Senha"/>        </div>                  <div class="fa_login_row">          <input class="fa_login_button" type="submit" name="login" value="Entrar"/>                        <div style="width:240px;margin:auto;">            <div style="float:left;">              <label for="fa_autologin"><input id="fa_autologin" type="checkbox" name="autologin"/> Permanecer conectado</label>            </div>                            <div style="float:right;">              <a href="/profile?mode=sendpassword">Esqueci minha senha</a>            </div>                            <div class="clear"></div>          </div>        </div>      </div>              <div class="fa_form_links">        <div class="fa_login_row">          <a href="/register">Criar uma conta</a>        </div>        <div class="fa_login_row">          <a href="/login#login_classic">Log-in clássico</a> | <a href="/login?logout=true#login_classic">Sair</a>        </div>      </div>    </form>  </noscript>
  <!--  END_NOSCRIPT_LOGIN_FORM  -->
  <!--  START_LOGIN_FORM  -->
  <form method="post" action="/login" id="fa_form_login">
        
      <h2 class="fa_login_title">
        Log in
      </h2>
        
      <p class="fa_login_desc">
        Por favor, conecte-se para ter acesso a <script type="text/javascript">document.write('<a href="http://' + window.location.host + '">' + window.location.host + '</a>');</script>
      </p>
          
      <div style="height:210px;" class="fa_form_wrap" id="fa_form_wrap">
              
        <div class="fa_login_row">
                      <a href="#" id="fa_login_back">Voltar</a>          <span class="fa_login_avatar">            <img src="http://2img.net/i/fa/invision/pp-blank-thumb.png" />            <img src="http://2img.net/i/fa/invision/pp-blank-thumb.png" id="fa_avatar_real" />          </span>      
        </div>
                      
        <!--  START_STEP_1  -->      
        <div style="left:0px;" class="fa_form_slide" id="login_step_1">
                    
            <div class="fa_login_row">
                          <input placeholder="Insira seu nome de usuário" name="username" type="text" class="fa_login_input" id="fa_login_username" />          
              <p style="color:#F00;display:none;" class="fa_login_row" id="fa_error_username">
                  Por favor, insira seu nome de usuário.
              </p>
                      
            </div>
                            
            <div class="fa_login_row">
                          <input value="Próximo" type="button" class="fa_login_button" id="fa_button_next" />        
            </div>
                  
        </div>
              
        <!--  END_STEP_1  -->              
        <!--  START_STEP_2  -->      
        <div style="left:400px;" class="fa_form_slide" id="login_step_2">
                    
            <div class="fa_login_row">
                          <span class="fa_login_username"></span>        
            </div>
                            
            <div class="fa_login_row">
                          <input placeholder="Senha" name="password" type="password" class="fa_login_input" id="fa_login_password" />          
              <p style="color:#F00;width:240px;margin:10px auto;display:none;" class="fa_login_row" id="fa_error_password">
                  Nome de usuário ou senha inválida.
              </p>
                      
            </div>
                            
            <div class="fa_login_row">
                          <input value="Entrar" name="login" type="submit" class="fa_login_button" />                      
              <div style="width:240px;margin:auto;">
                              
                  <div style="float:left;">
                                    <label for="fa_autologin"><input name="autologin" type="checkbox" id="fa_autologin" /> Permanecer conectado</label>            
                  </div>
                                            
                  <div style="float:right;">
                                    <a href="/profile?mode=sendpassword">Esqueci minha senha</a>            
                  </div>
                                            
                  <div class="clear">
                  </div>
                            
              </div>
                      
            </div>
                  
        </div>
              
        <!--  END_STEP_2  -->    
      </div>
                
      <div class="fa_form_links">
              
        <div class="fa_login_row" id="account_list_holder">
        </div>
              
        <div class="fa_login_row">
                      <a href="/register">Criar um conta</a>      
        </div>
              
        <div class="fa_login_row">
                      <a href="/login#login_classic">Login clássico</a>      
        </div>
            
      </div>
      
  </form>
  
  <!--  END_LOGIN_FORM  -->
  <!--  START_LOGOUT_FORM  -->
  <form method="post" action="/login?logout=true" id="fa_form_logout">
        
      <h2 class="fa_login_title">
        Sair
      </h2>
        
      <p class="fa_login_desc">
        Você está prestes a sair de <script type="text/javascript">document.write('<a href="http://' + window.location.host + '">' + window.location.host + '</a>');</script>
      </p>
          
      <div class="fa_form_wrap">
              
        <div class="fa_login_row">
                      <span class="fa_login_avatar"><script type="text/javascript">document.write(_userdata.avatar);</script></span>      
        </div>
                      
        <div class="fa_login_row">
                      <span class="fa_login_username"><script type="text/javascript">document.write('<a href="/u' + _userdata.user_id + '" target="_blank">' + _userdata.username + '</a>');</script></span>      
        </div>
                      
        <div class="fa_login_row">
            Tem certeza que deseja sair?
        </div>
              
        <div class="fa_login_row">
                      <input value="Sim" name="confirm" type="submit" class="fa_login_button" />          <input value="Não" name="cancel" type="submit" class="fa_login_button" />          <script type="text/javascript">//<![CDATA[
          _userdata.session_logged_in && (function() {
            var logout = document.getElementById('logout'),
                container = document.getElementById('fa_form_container'),
                form_logout = document.getElementById('fa_form_logout');
                
            document.title = 'Log out';
            container.className = 'logged_in';
          
            /* if the default login link is present we can get the data from the href attribute. ( FASTER )
            ** otherwise we'll need to send an AJAX request to the login page for the data ( SLOWER ) */
            if (logout) {
              var tid = logout.href.replace(/.*?tid=(.*?)&.*/, '$1'),
                  key = logout.href.replace(/.*?key=(.*?)$/, '$1');
                  
              form_logout.action += '&tid=' + tid;
              document.write('<input type="hidden" name="tid" value="' + tid + '"><input type="hidden" name="key" value="' + key + '">');
            } else {
              $.get('/login?logout=true&change_version=prosilver', function(d) {
                var info = $('.submit-buttons', d)[0];
                if (info) {
                  info.style.display = 'none';
                  form_logout.appendChild(info);
                  form_logout.action += '&tid=' + form_logout.tid.value;
                }
              });
            }
          }());
          //]]></script>      
        </div>
            
      </div>
        
  </form>
    
  <!--  END_LOGOUT_FORM  -->        
</div>
 <script type="text/javascript">//<![CDATA[
!_userdata.session_logged_in && (function() {
  document.title = 'Entrar';
 
  window.fa_form_login = {
    redirect : my_getcookie('fa_login_form_redirect') || '/forum', /* change redirection page after login */
    submitting : false, /* true if posting login info */
  
    accountList : document.createElement('DIV'), /* stores logged accounts */
 
    /* move onto the password step
      pass along the user id to get the user avatar faster */
    next : function(id) {
      var username = document.getElementById('fa_login_username');
    
      if (username.value) {
        var avatar = document.getElementById('fa_avatar_real'),
            row, accounts, i;
      
      
        fa_form_login.clearError('username');
        username.value = username.value.replace(/^\s+|\s+$/g, ''); // trim extra white space
      
        // check if the username is already stored
        if (!id && storage && storage.fa_accounts && window.JSON) {
          accounts = JSON.parse(storage.fa_accounts);
          for (i in accounts) {
            if (username.value.toLowerCase() == accounts[i].username.toLowerCase()) {
              id = i;
              break;
            }
          }
        }
      
        row = id ? null : document.getElementById('account_user_' + id);
      
        // check if account row is created to get an avatar that's already loaded
        if (row) avatar.src = row.getElementsByTagName('IMG')[0].src;
        else {
          $.get(id ? '/ajax/index.php?f=m&user_id=' + id : '/profile?mode=viewprofile&u=' + username.value, function(d) {
            var ava = id ? $('.tooltip-content img', d)[0] : $('#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img:first, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img', d)[0];
            avatar.src = ava ? ava.src : 'http://2img.net/i/fa/invision/pp-blank-thumb.png';
            avatar.className = 'avatar_visible';
          });
        }
    
        $('.fa_login_username').html('<a href="/profile?mode=viewprofile&u=' + username.value + '" target="_blank">' + username.value + '</a>');
      
        document.getElementById('fa_form_wrap').style.height = '260px';
        document.getElementById('login_step_1').style.left = '-400px';
        document.getElementById('login_step_2').style.left = '0px';
        document.getElementById('fa_login_back').className = 'fa_login_visible';
      
        window.setTimeout(function() {
          document.getElementById('fa_login_password').focus();
        }, 300);
      } else {
        fa_form_login.error('username');
      }
    },
  
    /* move back to the username step */
    back : function() {
      fa_form_login.clearError('password');
    
      document.getElementById('fa_login_username').focus();
      document.getElementById('fa_avatar_real').className = '';
    
      document.getElementById('fa_form_wrap').style.height = '210px';
      document.getElementById('login_step_1').style.left = '0px';
      document.getElementById('login_step_2').style.left = '400px';
      document.getElementById('fa_login_back').className = '';
      return false;
    },
  
    /* submit the login form */
    submit : function() {
      if (!fa_form_login.submitting) {
        fa_form_login.submitting = true;
      
        document.getElementById('fa_form_wrap').style.height = '260px';
        fa_form_login.clearError('password');
      
        $.post('/login', $('#fa_form_login').serialize() + '&login=true', function(d) {
          fa_form_login.submitting = false;
          if (/_userdata\["session_logged_in"\] = 1/.test(d)) {
            var storage = window.localStorage,
                id = d.match(/_userdata\["user_id"\] = (\d+)/)[1];
          
            /* store the user_id and username for next login */
            if (storage && window.JSON) {
              var accounts = storage.fa_accounts ? JSON.parse(storage.fa_accounts) : {}, i;
            
              for (i in accounts) accounts[i].last_active = 0;
            
              accounts[id] = {
                last_active : 1, /* last active account will be marked with a 1 */
                username : document.getElementById('fa_login_username').value
              };
            
              storage.fa_accounts = JSON.stringify(accounts);
            }
          
            my_setcookie('fa_login_form_redirect', '');
            window.location.href = fa_form_login.redirect;
          } else {
            fa_form_login.error('password');
          }
        });
      }
      return false;
    },
  
    /* throw a form error and display the error text */
    error : function(type) {
      var error = document.getElementById('fa_error_' + type),
          wrap = document.getElementById('fa_form_wrap');
    
      if (/none/.test(error.style.display)) {
        document.getElementById('fa_login_' + type).style.borderColor = '#F00';
    
        error.style.display = 'block';
        wrap.style.height = +wrap.style.height.replace(/px/, '') + error.getBoundingClientRect().height + 'px';
      }
    },
  
    /* clear the specified error */
    clearError : function(type) {
      document.getElementById('fa_error_' + type).style.display = 'none';
      document.getElementById('fa_login_' + type).style.borderColor = '';
    },
  
    /* delete a profile from the account list */
    deleteProfile : function(id) {
      var storage = window.localStorage, accounts = JSON.parse(storage.fa_accounts),
          row = document.getElementById('account_user_' + id),
          i;
 
      delete accounts[id];
      for (i in accounts) {
        accounts[i].last_active = 1;
        break;
      }
      storage.fa_accounts = JSON.stringify(accounts);
    
      row.parentNode.removeChild(row);
      if (!fa_form_login.accountList.firstChild) fa_form_login.accountList.innerHTML = '<div class="fa_login_row">Não existem contas armazenadas.</div><div class="fa_login_row"><a href="javascript:fa_form_login.toggleAccounts();">Retornar ao login</a></div>';
    },
  
    /* create the profile rows based onto the accounts you logged into */
    createProfile : function(id, o) {
      var row = document.createElement('DIV');
      row.id = 'account_user_' + id;
      row.className = 'account_list_row';
      row.innerHTML = '<div class="account_list_inner"><img class="account_list_avatar" src="http://2img.net/i/fa/invision/pp-blank-thumb.png"/> <span class="account_list_username">' + o.username + '</span></div><a class="account_list_delete" title="Remove account" href="javascript:fa_form_login.deleteProfile(\'' + id + '\');">X</a>';
      row.firstChild.onclick = function() {
        fa_form_login.toggleAccounts();
        document.getElementById('fa_login_username').value = $('.account_list_username', this).text();
        fa_form_login.next(this.parentNode.id.slice(13));
      };
    
      $.get('/ajax/index.php?f=m&user_id=' + id, function(d) {
        var ava = $('.tooltip-content img', d)[0];
        if (ava) row.getElementsByTagName('IMG')[0].src = ava.src;
      });
    
      fa_form_login.accountList.appendChild(row);
    },
  
    /* basic setup of the account list */
    initAccountList : function() {
      var a = document.createElement('A'),
          holder = document.getElementById('account_list_holder');
    
      a.href = '#';
      a.innerHTML = 'Entre com outra conta';
      a.onclick = fa_form_login.toggleAccounts;
    
      fa_form_login.accountList.id = 'account_list';
      fa_form_login.accountList.className = 'accounts_hidden';
    
      document.getElementById('fa_form_wrap').appendChild(fa_form_login.accountList);
      holder.appendChild(a);
    },
  
    /* toggle display of the account list */
    toggleAccounts : function() {
      if (/accounts_hidden/.test(fa_form_login.accountList.className)) {
        fa_form_login.accountList.className = '';
        document.getElementById('account_list_holder').firstChild.innerHTML = 'Retornar ao login';
      } else {
        fa_form_login.accountList.className = 'accounts_hidden';
        document.getElementById('account_list_holder').firstChild.innerHTML = 'Escolher outra conta';
      }
    
      if (!fa_form_login.accountList.firstChild) fa_form_login.accountList.innerHTML = '<div class="fa_login_row">Você não possui contas armazenadas.</div><div class="fa_login_row"><a href="javascript:fa_form_login.toggleAccounts();">Retornar ao login</a></div>';
      return false;
    }
  };
 
  var container = document.getElementById('fa_form_container'),
      username = document.getElementById('fa_login_username'),
      storage = window.localStorage;
 
  container.className = 'logged_out';
 
  /* move forward in the form when ENTER is pressed */
  username.onkeydown = function(e) {
    if (e.keyCode && e.keyCode == 13) {
      fa_form_login.next();
      return false;
    }
  };
  
  /* if the specified data is useable we'll go through the stored accounts in localStorage and form a list for switching */
  if (storage && storage.fa_accounts && window.JSON) {
    var accounts = JSON.parse(storage.fa_accounts),
        i, last_active = false;
  
    for (i in accounts) {
      if (accounts[i].last_active) {
        last_active = true;
        username.value = accounts[i].username;
        fa_form_login.next(i);
      }
      
      fa_form_login.createProfile(i, accounts[i]);
    }
  
    fa_form_login.initAccountList();
    !last_active && username.focus();
  } else username.focus();
 
  document.getElementById('fa_button_next').onclick = function() {
    fa_form_login.next();
  };
  document.getElementById('fa_login_back').onclick = fa_form_login.back;
  document.getElementById('fa_form_login').onsubmit = fa_form_login.submit;
}());
//]]></script>
Relativamente ao fundo, localize:
Código:
#fa_form_container { color:#666; font-size:12px; font-family:Arial, sans-serif; background: tomato; position:fixed; top:0; left:0; right:0; bottom:0; z-index:999999; overflow:auto; }
e personalize ao seu gosto!


Cordialmente,
pedxz.
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 4302
Pontos Ativos : 5109

Atendido / Resolvido Re: Página de login por etapas.

Mensagem por Saikenn em 04.09.19 20:56

@Pedxz escreveu:Olá @Saikenn,
mude a sua página para a seguinte:
Código:
<!--
DESENVOLVIDO POR ANGE TUTEUR
DISTRIBUIÇÃO PROIBIDA SEM O CONSENTIMENTO DO AUTOR
 --> <style type="text/css">/* CONTÊINERES E CONFIGURAÇÃO GERAL */
body { overflow:hidden; }
#fa_form_container { color:#666; font-size:12px; font-family:Arial, sans-serif; background: tomato; position:fixed; top:0; left:0; right:0; bottom:0; z-index:999999; overflow:auto; }
#fa_form_container a { color:#69C !important; }
#fa_form_container a:hover { color:#369 !important; }
.fa_login_maintitle { font-size:24px; font-weight:bold; text-align:center; text-transform:uppercase; margin:20px 0; }
.fa_login_maintitle img { vertical-align:-5px; height:30px; margin-right:6px; }
.fa_login_title { text-align:center; margin:30px 0; color:#666; font-size:28px; font-weight:bold; font-family:Arial, sans-serif; }
.fa_login_desc { font-size:16px; text-align:center; margin:10px 0; }
.fa_form_wrap { text-align:center; background:#EEE; border:1px solid #DDD; box-shadow:0 6px 12px rgba(0, 0, 0, 0.1); border-radius:3px; padding:30px 6px; width:300px; margin:30px auto; overflow:hidden; position:relative; transition:250ms; }
.fa_login_row { margin:10px 0; }
.fa_form_links { text-align:center; }
.fa_login_origin { font-size:12px; position:fixed; bottom:10px; right:10px; z-index:-1; }
.fa_login_origin a { font-weight:bold; }
 
/* NOME DE USUÁRIO E AVATAR */
.fa_login_avatar { background:#FFF; border:1px solid #DDD; border-radius:100px; padding:2px; display:inline-block; width:100px; height:100px; overflow:hidden; position:relative; }
.fa_login_avatar img { height:100px; width:100px; border-radius:100px; }
#fa_avatar_real { background:#FFF; position:absolute; top:50px; left:50px; right:2px; bottom:2px; height:0; width:0; transition:linear 150ms; }
#fa_avatar_real.avatar_visible { top:2px; left:2px; height:100px; width:100px; }
.fa_login_username { font-size:16px; font-weight:bold; }
 
/* BOTÕES E CAIXAS DE TEXTO */
.fa_login_button { color:#69C; background:none; border:1px solid #69C; border-radius:3px; font-size:16px; font-weight:bold; font-family:Arial, sans-serif; display:block; height:30px; width:240px; margin:10px auto; transition:250ms; outline:none; cursor:pointer; }
.fa_login_button:hover { color:#FFF; background:#69C; }
.fa_login_input { color:#666; background:#FFF; border:1px solid #CCC; border-radius:3px; padding: 0 3px; height:30px; width: 232px; outline:none; }
.fa_login_input:focus { border-color:#69C; }
 
/* SLIDES DE FORMULÁRIO E BOTÃO VOLTAR */
.fa_form_slide { position:absolute; width:100%; transition:300ms; }
#fa_login_back { position:absolute; top:30px; left:40px; opacity:0; visibility:hidden; transition:250ms; }
#fa_login_back.fa_login_visible { opacity:1; visibility:visible; }
 
 
/* LISTA DE CONTAS */
#account_list { background:#EEE; position:absolute; top:0; left:0; width:100%; height:100%; overflow:auto; }
.account_list_row { font-size:16px; text-align:left; width:80%; margin:10px auto; position:relative; }
.account_list_inner { background:#FFF; border:1px solid #DDD; border-radius:3px; padding:3px; width:80%; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account_list_inner:hover { background:#FFD }
.account_list_avatar { height:40px; width:40px; vertical-align:middle; margin-right:3px; }
#fa_form_container a.account_list_delete { font-size:30px; color:#F33 !important; background:#FFF; border:1px solid #F33; border-radius:100px; width:20px; height:20px; line-height:22px; text-align:center; position:absolute; margin-top:-10px; top:50%; right:0; display:block; overflow:hidden; }
#fa_form_container a.account_list_delete:hover { color:#333 !important; border-color:#333; }
 
/* CAMPOS OCULTOS */
.logged_out #fa_form_logout, .logged_in #fa_form_login, .noscript #fa_form_login, .noscript #fa_form_logout, #account_list.accounts_hidden { display:none }</style>
<div class="logged_out noscript" id="fa_form_container">
  
  <h1 class="fa_login_maintitle">
      <a target="_blank" href="http://www.forumeiros.com"><img src="http://im0.all-up.com/static/images/sigle.png" /><span style="color:#39C;">Forum</span><span style="color:#333;">eiros.com</span></a>
  </h1>
  
  <!--  START_NOSCRIPT_LOGIN_FORM  -->  <noscript>    <form action="/login" method="post">      <h2 class="fa_login_title">Log in</h2>      <p class="fa_login_desc">Por favor, faça conecte-se para acessar o fórum</p>      <div class="fa_form_wrap">        <div class="fa_login_row">          <input id="fa_login_username" class="fa_login_input" type="text" name="username" placeholder="Seu nome de usuário"/>        </div>                  <div class="fa_login_row">          <input id="fa_login_password" class="fa_login_input" type="password" name="password" placeholder="Senha"/>        </div>                  <div class="fa_login_row">          <input class="fa_login_button" type="submit" name="login" value="Entrar"/>                        <div style="width:240px;margin:auto;">            <div style="float:left;">              <label for="fa_autologin"><input id="fa_autologin" type="checkbox" name="autologin"/> Permanecer conectado</label>            </div>                            <div style="float:right;">              <a href="/profile?mode=sendpassword">Esqueci minha senha</a>            </div>                            <div class="clear"></div>          </div>        </div>      </div>              <div class="fa_form_links">        <div class="fa_login_row">          <a href="/register">Criar uma conta</a>        </div>        <div class="fa_login_row">          <a href="/login#login_classic">Log-in clássico</a> | <a href="/login?logout=true#login_classic">Sair</a>        </div>      </div>    </form>  </noscript>
  <!--  END_NOSCRIPT_LOGIN_FORM  -->
  <!--  START_LOGIN_FORM  -->
  <form method="post" action="/login" id="fa_form_login">
        
      <h2 class="fa_login_title">
        Log in
      </h2>
        
      <p class="fa_login_desc">
        Por favor, conecte-se para ter acesso a <script type="text/javascript">document.write('<a href="http://' + window.location.host + '">' + window.location.host + '</a>');</script>
      </p>
          
      <div style="height:210px;" class="fa_form_wrap" id="fa_form_wrap">
              
        <div class="fa_login_row">
                      <a href="#" id="fa_login_back">Voltar</a>          <span class="fa_login_avatar">            <img src="http://2img.net/i/fa/invision/pp-blank-thumb.png" />            <img src="http://2img.net/i/fa/invision/pp-blank-thumb.png" id="fa_avatar_real" />          </span>      
        </div>
                      
        <!--  START_STEP_1  -->      
        <div style="left:0px;" class="fa_form_slide" id="login_step_1">
                    
            <div class="fa_login_row">
                          <input placeholder="Insira seu nome de usuário" name="username" type="text" class="fa_login_input" id="fa_login_username" />          
              <p style="color:#F00;display:none;" class="fa_login_row" id="fa_error_username">
                  Por favor, insira seu nome de usuário.
              </p>
                      
            </div>
                            
            <div class="fa_login_row">
                          <input value="Próximo" type="button" class="fa_login_button" id="fa_button_next" />        
            </div>
                  
        </div>
              
        <!--  END_STEP_1  -->              
        <!--  START_STEP_2  -->      
        <div style="left:400px;" class="fa_form_slide" id="login_step_2">
                    
            <div class="fa_login_row">
                          <span class="fa_login_username"></span>        
            </div>
                            
            <div class="fa_login_row">
                          <input placeholder="Senha" name="password" type="password" class="fa_login_input" id="fa_login_password" />          
              <p style="color:#F00;width:240px;margin:10px auto;display:none;" class="fa_login_row" id="fa_error_password">
                  Nome de usuário ou senha inválida.
              </p>
                      
            </div>
                            
            <div class="fa_login_row">
                          <input value="Entrar" name="login" type="submit" class="fa_login_button" />                      
              <div style="width:240px;margin:auto;">
                              
                  <div style="float:left;">
                                    <label for="fa_autologin"><input name="autologin" type="checkbox" id="fa_autologin" /> Permanecer conectado</label>            
                  </div>
                                            
                  <div style="float:right;">
                                    <a href="/profile?mode=sendpassword">Esqueci minha senha</a>            
                  </div>
                                            
                  <div class="clear">
                  </div>
                            
              </div>
                      
            </div>
                  
        </div>
              
        <!--  END_STEP_2  -->    
      </div>
                
      <div class="fa_form_links">
              
        <div class="fa_login_row" id="account_list_holder">
        </div>
              
        <div class="fa_login_row">
                      <a href="/register">Criar um conta</a>      
        </div>
              
        <div class="fa_login_row">
                      <a href="/login#login_classic">Login clássico</a>      
        </div>
            
      </div>
      
  </form>
  
  <!--  END_LOGIN_FORM  -->
  <!--  START_LOGOUT_FORM  -->
  <form method="post" action="/login?logout=true" id="fa_form_logout">
        
      <h2 class="fa_login_title">
        Sair
      </h2>
        
      <p class="fa_login_desc">
        Você está prestes a sair de <script type="text/javascript">document.write('<a href="http://' + window.location.host + '">' + window.location.host + '</a>');</script>
      </p>
          
      <div class="fa_form_wrap">
              
        <div class="fa_login_row">
                      <span class="fa_login_avatar"><script type="text/javascript">document.write(_userdata.avatar);</script></span>      
        </div>
                      
        <div class="fa_login_row">
                      <span class="fa_login_username"><script type="text/javascript">document.write('<a href="/u' + _userdata.user_id + '" target="_blank">' + _userdata.username + '</a>');</script></span>      
        </div>
                      
        <div class="fa_login_row">
            Tem certeza que deseja sair?
        </div>
              
        <div class="fa_login_row">
                      <input value="Sim" name="confirm" type="submit" class="fa_login_button" />          <input value="Não" name="cancel" type="submit" class="fa_login_button" />          <script type="text/javascript">//<![CDATA[
          _userdata.session_logged_in && (function() {
            var logout = document.getElementById('logout'),
                container = document.getElementById('fa_form_container'),
                form_logout = document.getElementById('fa_form_logout');
                
            document.title = 'Log out';
            container.className = 'logged_in';
          
            /* if the default login link is present we can get the data from the href attribute. ( FASTER )
            ** otherwise we'll need to send an AJAX request to the login page for the data ( SLOWER ) */
            if (logout) {
              var tid = logout.href.replace(/.*?tid=(.*?)&.*/, '$1'),
                  key = logout.href.replace(/.*?key=(.*?)$/, '$1');
                  
              form_logout.action += '&tid=' + tid;
              document.write('<input type="hidden" name="tid" value="' + tid + '"><input type="hidden" name="key" value="' + key + '">');
            } else {
              $.get('/login?logout=true&change_version=prosilver', function(d) {
                var info = $('.submit-buttons', d)[0];
                if (info) {
                  info.style.display = 'none';
                  form_logout.appendChild(info);
                  form_logout.action += '&tid=' + form_logout.tid.value;
                }
              });
            }
          }());
          //]]></script>      
        </div>
            
      </div>
        
  </form>
    
  <!--  END_LOGOUT_FORM  -->        
</div>
 <script type="text/javascript">//<![CDATA[
!_userdata.session_logged_in && (function() {
  document.title = 'Entrar';
 
  window.fa_form_login = {
    redirect : my_getcookie('fa_login_form_redirect') || '/forum', /* change redirection page after login */
    submitting : false, /* true if posting login info */
  
    accountList : document.createElement('DIV'), /* stores logged accounts */
 
    /* move onto the password step
      pass along the user id to get the user avatar faster */
    next : function(id) {
      var username = document.getElementById('fa_login_username');
    
      if (username.value) {
        var avatar = document.getElementById('fa_avatar_real'),
            row, accounts, i;
      
      
        fa_form_login.clearError('username');
        username.value = username.value.replace(/^\s+|\s+$/g, ''); // trim extra white space
      
        // check if the username is already stored
        if (!id && storage && storage.fa_accounts && window.JSON) {
          accounts = JSON.parse(storage.fa_accounts);
          for (i in accounts) {
            if (username.value.toLowerCase() == accounts[i].username.toLowerCase()) {
              id = i;
              break;
            }
          }
        }
      
        row = id ? null : document.getElementById('account_user_' + id);
      
        // check if account row is created to get an avatar that's already loaded
        if (row) avatar.src = row.getElementsByTagName('IMG')[0].src;
        else {
          $.get(id ? '/ajax/index.php?f=m&user_id=' + id : '/profile?mode=viewprofile&u=' + username.value, function(d) {
            var ava = id ? $('.tooltip-content img', d)[0] : $('#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img:first, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img', d)[0];
            avatar.src = ava ? ava.src : 'http://2img.net/i/fa/invision/pp-blank-thumb.png';
            avatar.className = 'avatar_visible';
          });
        }
    
        $('.fa_login_username').html('<a href="/profile?mode=viewprofile&u=' + username.value + '" target="_blank">' + username.value + '</a>');
      
        document.getElementById('fa_form_wrap').style.height = '260px';
        document.getElementById('login_step_1').style.left = '-400px';
        document.getElementById('login_step_2').style.left = '0px';
        document.getElementById('fa_login_back').className = 'fa_login_visible';
      
        window.setTimeout(function() {
          document.getElementById('fa_login_password').focus();
        }, 300);
      } else {
        fa_form_login.error('username');
      }
    },
  
    /* move back to the username step */
    back : function() {
      fa_form_login.clearError('password');
    
      document.getElementById('fa_login_username').focus();
      document.getElementById('fa_avatar_real').className = '';
    
      document.getElementById('fa_form_wrap').style.height = '210px';
      document.getElementById('login_step_1').style.left = '0px';
      document.getElementById('login_step_2').style.left = '400px';
      document.getElementById('fa_login_back').className = '';
      return false;
    },
  
    /* submit the login form */
    submit : function() {
      if (!fa_form_login.submitting) {
        fa_form_login.submitting = true;
      
        document.getElementById('fa_form_wrap').style.height = '260px';
        fa_form_login.clearError('password');
      
        $.post('/login', $('#fa_form_login').serialize() + '&login=true', function(d) {
          fa_form_login.submitting = false;
          if (/_userdata\["session_logged_in"\] = 1/.test(d)) {
            var storage = window.localStorage,
                id = d.match(/_userdata\["user_id"\] = (\d+)/)[1];
          
            /* store the user_id and username for next login */
            if (storage && window.JSON) {
              var accounts = storage.fa_accounts ? JSON.parse(storage.fa_accounts) : {}, i;
            
              for (i in accounts) accounts[i].last_active = 0;
            
              accounts[id] = {
                last_active : 1, /* last active account will be marked with a 1 */
                username : document.getElementById('fa_login_username').value
              };
            
              storage.fa_accounts = JSON.stringify(accounts);
            }
          
            my_setcookie('fa_login_form_redirect', '');
            window.location.href = fa_form_login.redirect;
          } else {
            fa_form_login.error('password');
          }
        });
      }
      return false;
    },
  
    /* throw a form error and display the error text */
    error : function(type) {
      var error = document.getElementById('fa_error_' + type),
          wrap = document.getElementById('fa_form_wrap');
    
      if (/none/.test(error.style.display)) {
        document.getElementById('fa_login_' + type).style.borderColor = '#F00';
    
        error.style.display = 'block';
        wrap.style.height = +wrap.style.height.replace(/px/, '') + error.getBoundingClientRect().height + 'px';
      }
    },
  
    /* clear the specified error */
    clearError : function(type) {
      document.getElementById('fa_error_' + type).style.display = 'none';
      document.getElementById('fa_login_' + type).style.borderColor = '';
    },
  
    /* delete a profile from the account list */
    deleteProfile : function(id) {
      var storage = window.localStorage, accounts = JSON.parse(storage.fa_accounts),
          row = document.getElementById('account_user_' + id),
          i;
 
      delete accounts[id];
      for (i in accounts) {
        accounts[i].last_active = 1;
        break;
      }
      storage.fa_accounts = JSON.stringify(accounts);
    
      row.parentNode.removeChild(row);
      if (!fa_form_login.accountList.firstChild) fa_form_login.accountList.innerHTML = '<div class="fa_login_row">Não existem contas armazenadas.</div><div class="fa_login_row"><a href="javascript:fa_form_login.toggleAccounts();">Retornar ao login</a></div>';
    },
  
    /* create the profile rows based onto the accounts you logged into */
    createProfile : function(id, o) {
      var row = document.createElement('DIV');
      row.id = 'account_user_' + id;
      row.className = 'account_list_row';
      row.innerHTML = '<div class="account_list_inner"><img class="account_list_avatar" src="http://2img.net/i/fa/invision/pp-blank-thumb.png"/> <span class="account_list_username">' + o.username + '</span></div><a class="account_list_delete" title="Remove account" href="javascript:fa_form_login.deleteProfile(\'' + id + '\');">X</a>';
      row.firstChild.onclick = function() {
        fa_form_login.toggleAccounts();
        document.getElementById('fa_login_username').value = $('.account_list_username', this).text();
        fa_form_login.next(this.parentNode.id.slice(13));
      };
    
      $.get('/ajax/index.php?f=m&user_id=' + id, function(d) {
        var ava = $('.tooltip-content img', d)[0];
        if (ava) row.getElementsByTagName('IMG')[0].src = ava.src;
      });
    
      fa_form_login.accountList.appendChild(row);
    },
  
    /* basic setup of the account list */
    initAccountList : function() {
      var a = document.createElement('A'),
          holder = document.getElementById('account_list_holder');
    
      a.href = '#';
      a.innerHTML = 'Entre com outra conta';
      a.onclick = fa_form_login.toggleAccounts;
    
      fa_form_login.accountList.id = 'account_list';
      fa_form_login.accountList.className = 'accounts_hidden';
    
      document.getElementById('fa_form_wrap').appendChild(fa_form_login.accountList);
      holder.appendChild(a);
    },
  
    /* toggle display of the account list */
    toggleAccounts : function() {
      if (/accounts_hidden/.test(fa_form_login.accountList.className)) {
        fa_form_login.accountList.className = '';
        document.getElementById('account_list_holder').firstChild.innerHTML = 'Retornar ao login';
      } else {
        fa_form_login.accountList.className = 'accounts_hidden';
        document.getElementById('account_list_holder').firstChild.innerHTML = 'Escolher outra conta';
      }
    
      if (!fa_form_login.accountList.firstChild) fa_form_login.accountList.innerHTML = '<div class="fa_login_row">Você não possui contas armazenadas.</div><div class="fa_login_row"><a href="javascript:fa_form_login.toggleAccounts();">Retornar ao login</a></div>';
      return false;
    }
  };
 
  var container = document.getElementById('fa_form_container'),
      username = document.getElementById('fa_login_username'),
      storage = window.localStorage;
 
  container.className = 'logged_out';
 
  /* move forward in the form when ENTER is pressed */
  username.onkeydown = function(e) {
    if (e.keyCode && e.keyCode == 13) {
      fa_form_login.next();
      return false;
    }
  };
  
  /* if the specified data is useable we'll go through the stored accounts in localStorage and form a list for switching */
  if (storage && storage.fa_accounts && window.JSON) {
    var accounts = JSON.parse(storage.fa_accounts),
        i, last_active = false;
  
    for (i in accounts) {
      if (accounts[i].last_active) {
        last_active = true;
        username.value = accounts[i].username;
        fa_form_login.next(i);
      }
      
      fa_form_login.createProfile(i, accounts[i]);
    }
  
    fa_form_login.initAccountList();
    !last_active && username.focus();
  } else username.focus();
 
  document.getElementById('fa_button_next').onclick = function() {
    fa_form_login.next();
  };
  document.getElementById('fa_login_back').onclick = fa_form_login.back;
  document.getElementById('fa_form_login').onsubmit = fa_form_login.submit;
}());
//]]></script>
Relativamente ao fundo, localize:
Código:
#fa_form_container { color:#666; font-size:12px; font-family:Arial, sans-serif; background: tomato; position:fixed; top:0; left:0; right:0; bottom:0; z-index:999999; overflow:auto; }
e personalize ao seu gosto!


Cordialmente,
pedxz.

Amigão, ficou tudo vermelho, e só escrito ''FORUMEIROS.COM''
Saikenn

Saikenn
Nível 3

Masculino
Inscrito dia : 07/01/2019
Mensagens : 22
Pontos Ativos : 52

https://sisuk.forumeiros.com

Atendido / Resolvido Re: Página de login por etapas.

Mensagem por Harleen em 04.09.19 21:44

@pedxz escreveu:Relativamente ao fundo, localize:
Código:
#fa_form_container { color:#666; font-size:12px; font-family:Arial, sans-serif; background: tomato; position:fixed; top:0; left:0; right:0; bottom:0; z-index:999999; overflow:auto; }
e personalize ao seu gosto!


Cordialmente,
pedxz.

@Saikenn escreveu:Amigão, ficou tudo vermelho, e só escrito ''FORUMEIROS.COM''

Você altera o fundo nessa parte do código
#fa_form_container { color:#666; font-size:12px; font-family:Arial, sans-serif; background: tomato; position:fixed; top:0; left:0; right:0; bottom:0; z-index:999999; overflow:auto; }

Pode achar cores no site Color Hex Color Codes, não inseri o link pois acho que não é permitido.
Até mais
Harleen

Harleen
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1745
Pontos Ativos : 2319

https://antenadogames.forumeiros.com/

Atendido / Resolvido Re: Página de login por etapas.

Mensagem por Saikenn em 05.09.19 2:55

Pode fechar, já resolvi!
Saikenn

Saikenn
Nível 3

Masculino
Inscrito dia : 07/01/2019
Mensagens : 22
Pontos Ativos : 52

https://sisuk.forumeiros.com

Atendido / Resolvido Re: Página de login por etapas.

Mensagem por Roger123 em 05.09.19 8:23

Questão resolvida

Esta questão foi dada como resolvida pelo seu autor, e por esse motivo será marcada como resolvida e movida para o arquivo de questões resolvidas desta área.
Roger123

Roger123
Usuário experiente

Masculino
Inscrito dia : 30/06/2018
Mensagens : 2126
Pontos Ativos : 2310

https://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum