Caixa de Login

Detalhes da questão

Endereço do fórum: http://vgnfamily.forumais.com/
Versão do fórum: PunBB

Descrição

Boa tarde.

Gostaria de botar uma caixa ao clicar em Conectar-se/Entrar.
Fórum aonde vi: http://www.brasilplaystart.com.br/forum/
Imagem: https://i.imgur.com/FVFwffZ.jpg

Olá autor, bom dia.

Coloque esse código no fim ou no topo do seu template: overall_header:

Código:

<!-- #region sign_in_popup -->
<div id="document_modal" class="modal" style="display:none; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 10000; opacity: 0.4; background-color: #3E3E3E;"></div>
<div id="sign_in_popup_popup" style="display:none; position: absolute; top: 9%; left: 27%; z-index: 10001" class="popupWrapper">
  <div id="sign_in_popup_inner" class="popupInner" style="width: 600px; max-height: 641px;">
      <div style="" id="inline_login_form">
        <form id="login" method="post" action="/login.forum">
            <h3>Entrar</h3>
            <!-- BEGIN switch_fb_connect -->
            <div class="ipsBox_notice">
              <ul class="ipsList_inline">
                  <li>
                    <a class="ipsButton_secondary" href="/facebook_connect.forum" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">
                        <img alt="Facebook" src="https://i69.servimg.com/u/f69/16/62/61/50/facebo10.png"> &nbsp; Use Facebook
                    </a>
                  </li>
              </ul>
            </div>
            <!-- END switch_fb_connect -->
            <br>
            <div class="ipsForm ipsForm_horizontal">
              <fieldset>
                  <ul>
                    <li class="ipsField">
                        <div class="ipsField_content">
                          Precisa de uma conta? <a title="Registre-se agora!" href="/register">Registre-se agora!</a>
                        </div>
                    </li>
                    <li class="ipsField ipsField_primary">
                        <label class="ipsField_title" for="username">Usuário ou E-mail:</label>
                        <div class="ipsField_content">
                          <input type="text" tabindex="0" size="30" name="username" class="input_text" id="ips_username">
                        </div>
                    </li>
                    <li class="ipsField ipsField_primary">
                        <label class="ipsField_title" for="password">Senha</label>
                        <div class="ipsField_content">
                          <input type="password" tabindex="0" size="30" name="password" class="input_text" id="ips_password"><br>
                          <a title="Retrieve password" href="/profile?mode=sendpassword">Esqueci minha senha</a>
                        </div>
                    </li>
                    <li class="ipsField ipsField_checkbox">
                        <input type="checkbox" tabindex="0" class="input_check" value="1" name="autologin" checked="checked" id="autologin">
                        <div class="ipsField_content">
                          <label for="autologin">
                              <strong>Lembrar dados</strong><br>
                              <span class="desc lighter">Não recomendado para computadores públicos</span>
                          </label>
                        </div>
                    </li>
                    <li class="ipsPad_top ipsForm_center desc ipsType_smaller">
                        <a href="{FORUMURLINK}" rel="nofollow">Privacy Policy</a>
                    </li>
                  </ul>
              </fieldset>
              <div class="ipsForm_submit ipsForm_center">
                  <!-- <input type="submit" tabindex="0" value="Entrar" class="ipsButton"> -->
                  <input type="submit" tabindex="0" class="login-submit ipsButton" name="login" value="Entrar"/>
                  <input name="redirect" type="hidden" value="" /><br />
              </div>
            </div>
        </form>
      </div>
  </div>
  <div id="sign_in_popup_close" class="popupClose clickable">
      <img alt="x" src="https://i69.servimg.com/u/f69/16/62/61/50/close_10.png" onclick="sign_in_popup();">
  </div>
</div>
<script type="text/javascript">
  //<![CDATA[
  $(document).ready(function() {
      $('#user_navigation #sign_in').attr('href', '#').attr('onclick', 'sign_in_popup()');
      /*
      $('#user_navigation #sign_in').click(function() {
        sign_in_popup();
      });
      */
  });
  function sign_in_popup() {
      var x = document.getElementById('sign_in_popup_popup');
      if (x.style.display == 'none') {
        jQuery(x).add('#document_modal').fadeIn('slow');
        var r = x.getElementsByTagName('form')[0].redirect;
        r.value = window.location.href;
      } else {
        jQuery(x).add('#document_modal').fadeOut('slow');
      }
  }
  jQuery(function(){if(document.getElementById('logout')) document.getElementById('sign_in_popup_popup').style.display = 'none'; });
  //]]>
</script>
<style type="text/css">
  <!--
  .popupWrapper {background-color: rgba(70, 70, 70, 0.6);border-radius: 4px 4px 4px 4px;box-shadow: 0 12px 25px rgba(0, 0, 0, 0.7);padding: 4px;}
  .popupInner {background: none repeat scroll 0 0 #FFFFFF;box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);overflow-x: hidden;overflow-y: auto;width: 500px;}
  .popupInner h3 {background-color: #2C5687;background: url("http://www.autoitbrasil.com/public/style_images/master/maintitle.png") repeat-x scroll center top #2C5687;border-color: #316897;border-style: solid;border-width: 1px 1px 0;box-shadow: 0 1px 0 #528CBC inset;color: #FFFFFF;font-size: 16px;font-weight: 300;padding: 8px 10px 9px;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);}
  .ipsBox_notice {line-height: 1.6;margin-bottom: 10px;padding: 10px;}
  .ipsBox_notice, .ipsBox_highlight {background: none repeat scroll 0 0 #F4FCFF;border-bottom: 1px solid #CAE9F5;}
  .ipsList_inline > li:last-child {margin-right: 0;}
  .ipsList_inline > li:first-child {margin-left: 0;}
  .ipsList_inline > li {display: inline-block;}
  .ipsForm_horizontal .ipsField {margin-bottom: 15px;}
  .ipsForm_horizontal .ipsField_content, .ipsForm_horizontal .ipsField_submit {margin-left: 200px;}
  .ipsForm_horizontal .ipsField_title {float: left;line-height: 1.8;padding-right: 15px;text-align: right;width: 185px;}
  .ipsField .ipsField_title {font-size: 15px;font-weight: bold;}
  .ipsField_primary input {font-size: 18px;}
  .input_text, .ipsTagBox_wrapper {background: none repeat scroll 0 0 #FFFFFF;border-color: #848484 #C1C1C1 #E1E1E1;border-radius: 2px 2px 2px 2px;border-style: solid;border-width: 1px;padding: 4px;}
  .input_text:focus {border-color: #4E4E4E #7C7C7C #A3A3A3;box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);}
  input.inactive, select.inactive, textarea.inactive {color: #C4C4C4;}
  .ipsForm_horizontal .ipsField_checkbox {margin: 0 0 5px 200px;}
  .ipsForm .ipsField_checkbox input {float: left;margin-top: 3px;}
  .ipsForm .ipsField_checkbox .ipsField_content {margin-left: 25px;}
  .desc.lighter, .desc.lighter.blend_links a {color: #A4A4A4;}
  .ipsForm_center {text-align: center;}
  .desc, .desc.blend_links a, p.posted_info {color: #777777;font-size: 12px;}
  .ipsPad_top {padding-top: 9px;}
  .ipsType_smaller, .ipsType_smaller a {font-size: 11px !important;}
  .ipsForm_submit {background-color: #CCCCCC;background: -moz-linear-gradient(center top , #E4E4E4 0%, #CCCCCC 100%) repeat-x scroll 0 0 transparent !important;border-top: 1px solid #CCCCCC;margin-top: 25px;padding: 5px 10px;}
  .popupClose {position: absolute;right: 16px;top: 12px;}
  .clickable {cursor: pointer;}
  .topic_buttons li.important a, .topic_buttons li.important span, .ipsButton .important, .topic_buttons li a, .topic_buttons li span, .ipsButton{
      -moz-border-bottom-colors: none;-moz-border-left-colors: none;-moz-border-right-colors: none;-moz-border-top-colors: none;background: url("http://www.autoitbrasil.com/public/style_images/master/topic_button.png") repeat-x scroll center top #212121;
      border-color: #212121;border-image: none;border-radius: 3px 3px 3px 3px;border-style: solid;border-width: 1px 1px 0;box-shadow: 0 1px 0 0 #5C5C5C inset, 0 2px 3px rgba(0, 0, 0, 0.2);color: #FFFFFF;cursor: pointer;display: inline-block;
      font: 300 12px/30px Helvetica,Arial,sans-serif;height: 30px;min-width: 125px;padding: 0 10px;text-align: center;text-shadow: 0 -1px 0 #191919;
  }
  .ipsButton_secondary {
      background-color: #DBDBDB;background: -moz-linear-gradient(center top , #F6F6F6 0%, #E5E5E5 100%) repeat-x scroll 0 0 transparent !important;border: 1px solid #DBDBDB;border-radius: 3px 3px 3px 3px;
      box-shadow: 0 1px 0 #FFFFFF inset, 0 1px 0 rgba(0, 0, 0, 0.3);color: #616161;display: inline-block;font-size: 12px;height: 22px;line-height: 22px;padding: 0 10px;transition: all 0.2s ease-in-out 0s;white-space: nowrap;
  }
  -->
</style>
<!-- #endregion sign_in_popup -->


Até mais.

Olá, Bom dia.

Sem resultado.

#UP

Olá.
Deu trabalho, mas está feito. Uff...

---

Crie um novo JavaScript com investimento em todas as páginas, com o código:

Código:

(function ($) {
  'use strict';

  var $lzPopup = $([
    '<div class="luiz-popup">',
    '<form action="/login" method="post" class="frm-form" name="form_login">',
    '<div class="lz-col1" id="lz-1-col">',
    '<h1 class="lz-title">Entrar</h1>',
    '<a class="close" id="lzClosePP" title="Fechar" href="#" style="z-index:99;font-size: 16px;" onclick="fecharpopUp()">×</a>',
    '</div>',
    '<div class="lz-col1" id="lz-2-col">',
    '<div class="lz-col2">',
    '<label for="username">Usuário</label>',
    '<a href="/register">Não tenho conta</a>',
    '<input type="text" tabindex="1" name="username" id="username" size="30" maxlength="40" value="" placeholder="Usuário">',
    '</div>',
    '<div class="lz-col2">',
    '<label for="password">Senha</label>',
    '<a href="/profile?mode=sendpassword">Perdi a senha</a>',
    '<input type="password" tabindex="2" id="password" name="password" size="30" maxlength="25" placeholder="Senha">',
    '</div>',
    '</div>',
    '<div class="lz-col1" id="lz-3-col">',
    '<div class="lz-check">',
    '<input type="checkbox" name="autologin" id="autologin" tabindex="4" class="checkbox">',
    '<label for="autologin">Lembrar dados</label>',
    '</div>',
    '<span id="lz-recomenda">Não recomendado se você usa computadores públicos.</span>',
    '</div>',
    '<div class="lz-col1" id="lz-4-col">',
    '<input type="submit" name="login" tabindex="6" value="Entrar" class="button2">',
    '</div>',
    '</form>',
    '</div>'
  ].join('\n'));

  $(function () {
    $('a[href="/login"]').on('click', function (e) {
      $lzPopup.appendTo('body');
      e.preventDefault();
    });
  });
}(jQuery));

E adicione à sua CSS:

Código:

div.luiz-popup {
  width: 45%;
  position: absolute;
  top: 30vh;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
  background-color: #222;
  color: #898989;
}
div.luiz-popup * {
  box-sizing: border-box;
}
div.luiz-popup form {
  border-radius: 2px;
  box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.7);
  font-size: 14px;
}
div.luiz-popup #lz-1-col {
  display: block;
  background: #222 url(http://www.brasilplaystart.com.br/forum/public/style_images/Last/highlight_reallyfaint.png) repeat-x 0 0;
  padding: 13px;
  border-bottom: solid 1px #2a2a2a;
}
div.luiz-popup #lz-1-col h1 {
  font-weight: 500;
  font-size: 17px;
  display: inline-block;
}
div.luiz-popup #lz-1-col #lzClosePP {
  float: right;
}
div.luiz-popup #lz-2-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  border-bottom: solid 1px #2a2a2a;
}
div.luiz-popup #lz-2-col .lz-col2 {
  width: 50%;
  float: left;
  margin: 20px;
}
div.luiz-popup #lz-2-col .lz-col2 label {
  font-size: 13px;
}
div.luiz-popup #lz-2-col .lz-col2 label + a {
  float: right;
  color: #898989;
  text-decoration: none;
  font-size: 11px;
}
div.luiz-popup #lz-2-col .lz-col2 input {
  width: 100%;
  padding: 6px;
  background: #363636;
  color: #b7b7b7;
  border: 0px;
  margin-top: 7px;
  text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0px;
  box-shadow: inset rgba(0, 0, 0, 0.2) 0px 1px 4px;
  background-repeat: no-repeat;
  background-position: 5px center;
  padding-left: 25px;
}
div.luiz-popup #lz-2-col .lz-col2 input#username {
  background-image: url(http://i.imgur.com/JrjwJwu.png)!important;
}
div.luiz-popup #lz-2-col .lz-col2 input#password {
  background-image: url(http://i.imgur.com/bFauGO6.png)!important;
}
div.luiz-popup #lz-3-col {
  padding: 20px;
  border-bottom: solid 1px #2a2a2a;
}
div.luiz-popup #lz-3-col .lz-check {
  display: block;
  margin-bottom: 4px;
}
div.luiz-popup #lz-3-col .lz-check input#autologin + label[for="autologin"] {
  display: inline-block;
  color: #7f7f7f;
  font-weight: bold;
  font-size: 13px;
}
div.luiz-popup #lz-3-col .lz-check + #lz-recomenda {
  font-size: 12px;
}
div.luiz-popup #lz-4-col {
  padding: 20px;
  text-align: center;
}
div.luiz-popup #lz-4-col input[type="submit"] {
  background: #333;
  border: 0px;
  padding: 5px 8px;
  color: #ddd;
}
/* MADE WITH SASS (http://sass-lang.com/) */

Demo:
-> http://testepunbb.forumeiros.com/


Até mais.

Opá, ficou perfeito apenas mais duas coisa. É possível deixar as mesmas dimensões?

1- Como pode ver a "Caixa de Login" Que você fez para mim, está mais quadrada, etc..
https://imgur.com/a/BLpU4

2- Quando clico na caixinha de "Lembrar Dados" Eu logo etc.. quando sai e vai logar novamente Login/Senha, não fica salvo. É possível arrumar isto?

Quando ao item um, foi relativamente proposital, para não ficar igual ao outro. Mesmo tirando 90% da ideia, praticamente, sempre que podemos evitar a cópia, é bom.

Quanto ao item dois, eu testei e está tudo ok, retirei de seu fórum, todos os inputs que são necessários para funcionar nos fóruns forumeiros, e só os personalizei.

Até mais.

Ok sem problemas. Obrigado!