Login Box PopUp

Started by KaoX00, January 01, 2014, 05:36:36 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

KaoX00

Hola bueno, este es mi primer tutorial para esta comunidad SMFHispano, en ningún otro lado esta esto  ;) , pero primero, créditos por la idea a Mick de idesign360, yo solamente la modifique para hacerla mas atractiva.

Antes
Spoiler
[close]

Empecemos; Que necesitamos?

index.template.php >> Del theme que usen.
index.css >> Del theme que usen.
ThemeStrings.suidioma.php >> Del theme que usen. >>> Pueden usar el Modification.suidioma.php si así gustan.
Este tutorial fue realizado en el Theme MinDI "By Diego"
La explicación se basara en el Theme Default
Bueno empecemos, el primer archivo a editar:

index.template.php
Buscamos: / Si no lo localizan busquen algo parecido.

                        echo '
                            <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
                            <form id="guest_form" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
                                <div class="info">', sprintf($txt['welcome_guest'], $txt['guest_title']), '</div>
                                <input type="text" class="input_text2" name="user" size="12" value="', $txt['username'], '" onfocus="this.value = \'\';" onblur="if(this.value==\'\') this.value=\'', $txt['username'], '\';" />
                                <input type="password" class="input_password2" name="passwrd" size="12" value="', $txt['password'], '" onfocus="this.value = \'\';" onblur="if(this.value==\'\') this.value=\'', $txt['password'], '\';" />
                                  <input class="button_submit2" type="submit" value="', $txt['login'], '" />';
           
                        if (!empty($modSettings['enableOpenID']))
                            echo '
                                <br /><input type="text" name="openid_identifier" id="openid_url" size="25" class="input_text openid_login" />';
           
                        echo '
                                <input type="hidden" name="hash_passwrd" value="" />
                            </form>';


Remplazamos por:

                  echo '   
<!-- Boton Open PopUp -->
   <a href="#login-box" class="login-window"><button class="login_PU_open">', $txt['login_or_register'], '</button></a>

<!-- Script -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script>
var logpu = jQuery.noConflict();
logpu(document).ready(function() {
$(\'a.login-window\').click(function() {
   
            //Getting the variable\'s value from a link
    var loginBox = $(this).attr(\'href\');

    //Fade in the Popup
    $(loginBox).fadeIn(300);
   
    //Set the center alignment padding   border see css style
    var popMargTop = ($(loginBox).height()   24) / 2;
    var popMargLeft = ($(loginBox).width()   24) / 2;
   
    $(loginBox).css({
        \'margin-top\' : -popMargTop,
        \'margin-left\' : -popMargLeft
    });
   
    // Add the mask to body
    $(\'body\').append(\'<div id="mask"></div>\');
    $(\'#mask\').fadeIn(300);
   
    return false;
});

// When clicking on the button close or the mask layer the popup closed
logpu(\'a.close, #mask\').live(\'click\', function() {
  $(\'#mask , .login-wrap\').fadeOut(300 , function() {
    $(\'#mask\').remove(); 
});
return false;
});
});
  </script>

<!-- LoginBox Content -->
<div id="login-box"  class="login-wrap">
<div class="login-wrap_logo"><img class="login-wrap_logo" src="', $settings['images_url'], '/theme/logo.png" /></div>
<br />

<!--Bton Close PopUp -->
<a href="#" class="close"><button class="login_PU_close">', $txt['close'], '</button></a>

  <h2>', $txt['login_or_register'], '</h2>
  <div class="form">
    <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
    <form id="guest_form" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
    <input type="text" name="user" size="10" class="input_text" placeholder="', $txt['user'], '"/>
    <input type="password" name="passwrd" size="10" class="input_password" placeholder="', $txt['password'], '"/>
                        <h4>', $txt['sesion_expired'], ':
                       <select type="cookielength" name="cookielength">
                           <option value="60">', $txt['one_hour'], '</option>
                           <option value="1440">', $txt['one_day'], '</option>
                           <option value="10080">', $txt['one_week'], '</option>
                           <option value="43200">', $txt['one_month'], '</option>
                           <option value="-1" selected="selected">', $txt['forever'], '</option>
                       </select></h4>
               <h4>', $txt['never_expire'], ':
                    <input type="checkbox" name="cookieneverexp"', $context['never_expire'] ? ' checked="checked"' : '', ' class="input_check" onclick="this.form.cookielength.disabled = this.checked;" /></h4>
                    <br />
    <button type="submit" class="button_submit">', $txt['login'], '</button>
    </form>
    <h2>Ó</h2>
    <br />
    <a href="'. $scripturl. '?action=register"><button>', $txt['register'], '</button></a>
  <h3><a href="'. $scripturl. '?action=reminder">', $txt['forgot_password'], '</a></h3>
  <h3><a href="'. $scripturl. '?action=activate">', $txt['forgot_eactivat'], '</a></h3>
  </div>

  </div>

                              </ul>                         
                            </div>';


ThemeStrings.tuidioma.php /Ó/ Modifications.tuidioma.php
Agregar antes de ?>

$txt['forgot_password'] = '¿Olvidaste tu contraseña?';
$txt['forgot_eactivat'] = '¿Perdiste tu email de activación?';
$txt['sesion_expired'] = 'Duración de la Sesión';
$txt['never_expire'] = 'Recordar Usuario/Contraseña';
$txt['login_or_register'] = 'Iniciar Sesión';
$txt['close'] = 'Cerrar';


index.css
Agregar al Final

/* Login PopUp By KaoX00*/
.login_PU_open
{
float: right;
margin: 30px 10px 0 0;
opacity: 0.8;
}
.login_PU_close
{
float: right;
position: absolute;
top: -2.5%;
left: 84.25%;
z-index: 9999;
}
.login-wrap_logo img {
text-align: center;
width: 100%;
height: 100%;
opacity: 0.8;

}
/* Mask for background, default is not display */
#mask {
display: none;
background: #000;
position: fixed;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
opacity: 0.8;
z-index: 99;
}

/* You can customize to your needs */
.login-wrap {
display: none;
position: absolute;
top: 50%;
left: 50%;
z-index: 999;
margin: 10px auto 0 auto;
background: #ecf0f1;
border: 2px solid #ddd;
float: left;
width: 350px;
border-radius: 5px;
padding: 15px;
box-shadow: 0px 0px 20px #999;
/* CSS3 */
  -moz-box-shadow: 0px 0px 20px #999;
/* Firefox */
  -webkit-box-shadow: 0px 0px 20px #999;
/* Safari, Chrome */
border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px;
/* Firefox */
  -webkit-border-radius: 3px;
/* Safari, Chrome */
}
.login-wrap h2 {
  text-align: center;
  font-weight: 200;
  font-size: 1.5em;
  margin-top: 0;
  color: #34495e;
}
.login-wrap h3 {
  text-align: center;
  font-weight: 100;
  font-size: 1.2em;
  margin: 0;
  color: #34495e;
}
.login-wrap h4 {
  text-align: center;
  padding: 0 0 0 10px;
  font-weight: bold;
  font-size: 9pt;
  margin: 0;
  color: #34495e;
}
.login-wrap .form select[type="cookielength"]{
  width: auto;
  margin-bottom: 5px;
  border-radius: 5px;
  outline: 0;
  -moz-outline-style: none;
  border: 1px solid #bbb;
  padding: 0 0 0 10px;
  font-size: 14px;
}
.login-wrap .form {
  padding-top: 20px;
}
.login-wrap .form input[type="text"],
.login-wrap .form input[type="password"],
.login-wrap .form button {
  width: 80%;
  margin-left: 10%;
  margin-bottom: 15px;
  height: 40px;
  border-radius: 5px;
  outline: 0;
  -moz-outline-style: none;
}
.login-wrap .form input[type="text"],
.login-wrap .form input[type="password"] {
  border: 1px solid #bbb;
  padding: 0 0 0 10px;
  font-size: 14px;
}
.login-wrap .form input[type="text"]:focus,
.login-wrap .form input[type="password"]:focus {
  border: 1px solid #3498db;
}
.login-wrap .form a {
  text-align: center;
  font-size: 10px;
  color: #3498db;
}
.login-wrap .form a p {
  padding-bottom: 10px;
}
.login-wrap .form button {
  background: #e74c3c;
  border: none;
  color: white;
  font-size: 18px;
  font-weight: 200;
  cursor: pointer;
  transition: box-shadow .4s ease;
}
.login-wrap .form button:hover {
  box-shadow: 1px 1px 5px #555;
}
.login-wrap .form button:active {
  box-shadow: 1px 1px 7px #222;
}
.login-wrap:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 5px 5px 0 0;
}


Despues
Spoiler
[close]

Bueno, pues nada espero que les sirva y les guste, cualquier duda pueden formularla y lo mas pronto les aclarare sus dudas.
Last Edit: August 20, 2019, 09:24:05 PM by Diego Andrés

DeroZ

cómo se podría hacer para abrir el popup desde el menu? (subs.php)

'login' => array(
'title' => '<i class="icon-signin"></i> ' .$txt['login'],
'href' => $scripturl . '?action=login',
'show' => $user_info['is_guest'],
'sub_buttons' => array(

KaoX00

Quote from: Snoopix on January 07, 2014, 08:46:00 PM
cómo se podría hacer para abrir el popup desde el menu? (subs.php)

De echo si lo tenia en mente hacerlo como tu dices...

Estoy trabajando en una nueva versión (pero ya empaquetada), para ser sincero estoy tomando como base la de ADK Login de SMFPersonal, pero la versión en la que trabajo es mas estética y con unas opciones extra pero aun me falta, lo que te sugiero es SI TE URGE instalar el ADK Login y con el .template adaptar mi código.

Saludos.