Tutorial como agregar un login flotante

Hola gente aca les traigo un tutorial de como poner un login mas elegante =)
Esto no lo hice yo..todo el credito es para manix ya q el mejoro el codigo yo solo le dije como queria que se vea xD
Solo deben modificar 2 archivos.

index.template.php
Este archivo se encuentra en Themes/{tema-que-uses}/. Lo primero es buscar la siguiente línea:

Code: [Select]

if (!empty($context['user']['is_guest']))
{
    echo '<div id="cuadro-login">';
        echo '
               <form action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
                   <h2>Iniciar sesion</h2>
                   <div class="campo"><span class="etiqueta">Usuario:</span><input type="text" name="user" size="10" class="input_text" /></div>
                   <div class="campo"><span class="etiqueta">Contrasena:</span><input type="password" name="passwrd" size="10" class="input_password" /></div>
                   <div class="campo">
                       <span class="etiqueta">Duracion:</span><select 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>
                   </div>
                   <div class="campo boton"><input type="submit" value="', $txt['login'], '" class="button_submit" /></div>
                   <div class="info">', sprintf($txt['welcome_guest'], $txt['guest_title']), '</div>';
 
        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>';
    echo '</div>';
}
index.css
Este archivo se encuentra en el directorio /Themes/{el-tema-que-usas}/css/. Tan solo deben agregar el siguiente código al final del archivo:

Code: [Select]

#cuadro-login{
    background: #fff;
    border: 3px dotted orange;
    padding: 10px;
    position: fixed;
    right: 70px;
    top: 200px;
    width: 300px;
}
#cuadro-login h2{
    border-bottom: 1px dotted #ccc;
    text-align: center;
}
#cuadro-login .campo{
    margin-top: 10px;
}
#cuadro-login .campo input{
    width: 150px;
}
#cuadro-login .boton{
    text-align: center;
}
#cuadro-login .boton input{
    width: 150px;
}
 
#cuadro-login .etiqueta{
    display: inline-block;
    margin-right: 30px;
    text-align: right;
    width: 90px;
}
#cuadro-login .info{
    border-top: #ccc 1px solid;
    margin-top: 10px;
}
Aca le dejo las imagenes que quizas quieran adaptar.

RESULTADO

Amigo como utilizo las imagenes me encanto el tutorial pero como utilizao las imagenes como puedo hacer que el cuadro del login se pueda cerrar hay una opcion cerrar

excelente! te dejo +10 por compartir! yo le agregaría algún script en jquery para darle un efecto de Fade in Fade out y la opción de cerrarlo. pero esta muy bien como base para hacer lo demas.
saludos

esta muy bueno men me gustó un montón