Login Box PopUp

[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.

Code Select Expand


                        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:

Code Select Expand


                  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 ?>

Code Select Expand


$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

Code Select Expand


/* 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.

[DeroZ]

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

Code Select Expand

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

[KaoX00]

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.