[TUTORIAL] Caixa de login ao clicar na barra de ferramentas

Este recurso visa acelerar e facilitar o acesso aos seus usuários usando a função Login da barra de ferramentas. Ao clicar em Login, ao invés de um redirecionamento, o membro poderá colocar seus dados sem precisar virar a página.

--> Tutoriais, dicas e astúcias <--
Caixa de login ao clicar na barra de ferramentas

1º - Uso do Javascript:
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. No nosso caso, aplicaremos Em todas as páginas.

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.

2º - Código a ser usado:
Em seguida ao marcar o Investimento, queira colar o seguinte código:

Código:

// toolbar login
    $(function(){$(function(){
      if (_userdata.session_logged_in != 0) return;
      /* -- PERSONALIZAÇÃO BEGIN -- */
      var both = true,
          redirect = window.location.pathname,
          imgOverlay = 'http://i39.servimg.com/u/f39/18/21/41/30/overla10.png',
          imgConnex = 'http://i59.servimg.com/u/f59/18/21/60/73/connex10.png',
      /* -- PERSONALIZAÇÃO END -- */
          content = cre('DIV'), overlay = cre('DIV'), cacheMe = cre('DIV'), style = cre('STYLE'), css = '.loginForm,.loginOverlay{position:fixed;display:none}.loginForm{background:url('+imgConnex+') no-repeat 8% center #FBFBFB;background-size:12.5%;border:1px solid #CCC;border-radius:3px;padding:5%;top:20%;left:20%;right:20%;z-index:100001;}@media(max-width:500px){.loginForm{background-image:none}}@media(min-width:1000px){.loginForm{left:25%;right:25%}}.loginForm .loginTitle{font-size:12px;margin:5px 0;}.loginOverlay{background:url('+imgOverlay+');left:0;top:0;right:0;bottom:0;z-index:100000;cursor:pointer}.loginForm div { text-align:center; }.loginForm .inputbox {font-size:14px;height:25px;width:50% !important;border-radius:3px;padding-left:30px;}.loginForm input{margin:5px 0 !important}.loginForm .button1 {font-size:14px;padding:10px 15px !important;width:54% !important}#fa_username {background:url(http://i59.servimg.com/u/f59/18/21/60/73/un10.png) no-repeat 8px center #FFF}#fa_password {background:url(http://i59.servimg.com/u/f59/18/45/41/65/pw10.png) no-repeat 10px center #FFF}';
      content.className = 'loginForm', overlay.className = 'loginOverlay';
      cacheMe.innerHTML = '<img src="'+imgOverlay+'"/><img src="'+imgConnex+'"/>', cacheMe.style.display = 'none';
      style.type = 'text/css';
      if (style.styleSheet) style.styleSheet.cssText = css;
      else style.appendChild(document.createTextNode(css));
      document.getElementsByTagName('HEAD')[0].appendChild(style);
      content.innerHTML = '<form action="/login" method="post" name="form_login"><div class="loginTitle">Entre com seus dados do usuário para conectar-se à este fórum!</div><div><input tabindex="100" placeholder="username" name="username" id="fa_username" size="25" maxlength="40" value="" class="inputbox autowidth" type="text"/></div><div><input tabindex="101" id="fa_password" placeholder="password" name="password" size="25" maxlength="25" class="inputbox autowidth" type="password"/></div><div><input name="redirect" value="'+redirect+'" type="hidden"><input name="login" tabindex="103" value="Conectar-se" class="button1" type="submit"></div><a href="#close" id="closeMe" style="position:absolute;bottom:5px;right:5px;">Fechar</a></form>';
      insert(overlay, content, cacheMe);
   
      if (both === true) {
        var a = document.getElementsByTagName('A');
        for (var i=0; i<a.length; i++) if (/\/login/.test(a[i].href) && /(mainmenu|rightHeaderLink)/.test(a[i].className)) a[i].onclick = function() { display('block'), fadeIn(overlay, content); document.getElementById('fa_username').focus(); return false };
      } else {
        document.getElementById('fa_right').firstChild.onclick = function() {
          display('block'), fadeIn(overlay, content);
          document.getElementById('fa_username').focus();
          return false
        }
      }
      overlay.onclick = function() { close() };
      document.getElementById('closeMe').onclick = function() { close(); return false };
   
      function cre(el) { return document.createElement(el) };
      function display(val) { content.style.display = val, overlay.style.display = val };
      function close() { display('none'), overlay.style.opacity = 1, content.style.opacity = 1 };
      function insert() { var args = arguments; for (var i=0; i<args.length; i++) document.body.insertBefore(args[i], document.body.firstChild) };
      function fadeIn() {
        var args = arguments;
        for (var i=0; i<args.length; i++) args[i].style.opacity = 0;
        var fader = window.setInterval(function() {
          for (var i=0; i<args.length; i++) {
            var opa = Number(args[i].style.opacity);
            if (opa >= 1) {
              window.clearInterval(fader);
              return args[i].style.opacity = 1;
            } else args[i].style.opacity = opa + 0.15
          }
        },25);
      }
    })});

Você pode modificar os valores:

/* -- PERSONALIZAÇÃO BEGIN -- */
var both = true,
redirect = window.location.pathname,
imgOverlay = 'URL_DA_IMAGEM_DE_FUNDO_PRETO',
imgConnex = 'IMAGEM_DEUSUARIOS',
/* -- PERSONALIZAÇÃO END -- */

Troque o valor URL_DA_IMAGEM_DE_FUNDO_PRETO pela URL da imagem de fundo transparente preto e IMAGEM_DEUSUARIOS para a URL da imagem que ficará ao lado da caixa.

• Resultado:
  
  

---

© Fórum dos Fóruns & Ange Tuteur

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Caixa de login ao clicar na barra de ferramentas