Login personalizado

Qual é minha questão:
Olá, gostaria de saber se tem como colocar esse tipo de login como na imagem a seguir:

http://1.bp.blogspot.com/-Wdm7LECA7F8/Uyezev21-qI/AAAAAAAABBg/FSCX-4DoYGA/s1600/jhu.JPG

Obrigado...!!!

Endereço do meu fórum:
http://xgamesaem.forumclan.com

Versão do fórum:
PHPBB3

Link onde vi o efeito:

http://bestskins.forumeiros.com/forum

vlwww..

Olá,

1. Evite duplo post, sempre edite sua postagem para acrescentar algo.

2. Crie um novo Widget visível somente para os convidados e adicione o código abaixo:

Código:


    //Login BESTSKINS
    <div id="user_nav_login">
        <a href="#" onclick="jQuery('#user_nav_login').slideUp(); return false;" id="login_close"></a>
      <div>
          
         <div class="captions">
              
             <form action="/login" method="post" name="form_login" id="login">
                 Usuário: <input size="30" name="username" class="input_text" type="text" id="username" /><br /><br />Senha: <input style="margin-left: 8px" size="30" name="password" class="input_text" type="password" id="password" /><br />
               <p style="margin-left: 0; padding-left: 0">
                   <input class="input_check" value="1" name="autologin" checked="checked" id="remember" type="checkbox" /> Lembrar dados?<input value="Enviar" class="input_submit" name="login" type="submit" />
               </p>
                
            </form>
              
          </div>
          
      </div>
    </div><script>
    jQuery(function() {
      jQuery('a[href*="/login"]').click(function() {
        jQuery('#user_nav_login').css({"bottom": "0px"}).slideDown();return false;
      });
    });
    </script><style>
    #user_nav_login {
    height: 160px;
    left: 0px;
    bottom: -160px;
    background: url(http://i.imgur.com/ylwhiOI.png) repeat-x;
    position: fixed;
    width: 100%;
    z-index: 10003;
    display: block;
    }
    #user_nav_login div {
    width: 400px;
    margin: 0px auto;
    }
    #user_nav_login div.captions {
    color: #FFF;
    padding: 30px 0 0 30px;
    }
    #user_nav_login .input_text {
    background: #fff url(http://i.imgur.com/Bea3qZJ.png) repeat-x;
    font-size: 1em;
    font-family: arial,verdana,tahoma,sans-serif;
    border: 1px solid #b5b5b5;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    padding: 3px;
    }
    #user_nav_login p {
    padding: 8px 0 0 20px;
    }
    #user_nav_login .input_submit {
    background: url(http://forum.muaway.net/public/style_images/MuAwaY/input_button.png);
    background-color: #f2f2f2;
    border: 0px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.5);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5);
    text-shadow: 0px 1px 0px rgba(255,255,255,0.4);
    color: #262626;
    margin-top: 1px;
    margin-bottom: -15px;
    margin-left: 77px;
    font-weight: normal;
    font-size: 10px;
    padding: 2px 7px;
    cursor: pointer;
    }
    #login_close {
    float: right;
    width: 50px;
    height: 10px;
    background: url(http://i.imgur.com/989DVCx.png);
    margin: 10px;
    opacity: 0.5;
    }
    #login_close:hover {
    opacity: 1;
    }
    </style>


Tópico movido de 'Questões sobre aparência' para 'Questões sobre códigos'

Fiz desse jeito e ficou estanho de não apareceu... vlww

Olá,

Eu testei o código que o Alex lhe passou e eis o resultado:



Ou houve algum erro na hora de você colar o código no Widget ou há algum outro Javascript que impediu ele de funcionar corretamente.

Abraços.

Olha como ficou depois que eu coloquei o código...:

http://xgamesaem.forumclan.com/

num entendo como funcionou ai , e aqui não funcionou...   
vlw..

Vlww.. deixa queto vou tentar outro estilo que eu vi aqui em outro site... blz... faço já o tópico com o outro estilo vlw... Ate mais..!!!  

Parece que alguns estilos dos Widgets padrão estão zoando tudo.

Façamos o seguinte:

1 - Exclua o Widget defeituoso.

2 - Adicione esse script a um novo módulo Javascript:

Código:

// Login BESTSKINS
$(function() {
    $('body').append($('<div id="user_nav_login"><a href="#" onclick="jQuery(\'#user_nav_login\').slideUp(); return false;" id="login_close"></a><div><div class="captions"><form action="/login" method="post" name="form_login" id="login">Usuário: <input size="30" name="username" class="input_text" type="text" id="username" /><br /><br />Senha: <input style="margin-left: 8px" size="30" name="password" class="input_text" type="password" id="password" /><br /><p style="margin-left: 0; padding-left: 0"><input class="input_check" value="1" name="autologin" checked="checked" id="remember" type="checkbox" /> Lembrar dados?<input value="Enviar" class="input_submit" name="login" type="submit" /></p></form></div></div></div>'));
});

E adicione isso ao seu CSS:

Código:

#user_nav_login {
    height: 160px;
    left: 0px;
    bottom: -160px;
    background: url(http://i.imgur.com/ylwhiOI.png) repeat-x;
    position: fixed;
    width: 100%;
    z-index: 10003;
    display: block;
}

#user_nav_login div {
    width: 400px;
    margin: 0px auto;
}

#user_nav_login div.captions {
    color: #FFF;
    padding: 30px 0 0 30px;
}

#user_nav_login .input_text {
    background: #fff url(http://i.imgur.com/Bea3qZJ.png) repeat-x;
    font-size: 1em;
    font-family: arial,verdana,tahoma,sans-serif;
    border: 1px solid #b5b5b5;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    padding: 3px;
}

#user_nav_login p {
    padding: 8px 0 0 20px;
}

#user_nav_login .input_submit {
    background: url(http://forum.muaway.net/public/style_images/MuAwaY/input_button.png);
    background-color: #f2f2f2;
    border: 0px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.5);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5);
    text-shadow: 0px 1px 0px rgba(255,255,255,0.4);
    color: #262626;
    margin-top: 1px;
    margin-bottom: -15px;
    margin-left: 77px;
    font-weight: normal;
    font-size: 10px;
    padding: 2px 7px;
    cursor: pointer;
}

#login_close {
    float: right;
    width: 50px;
    height: 10px;
    background: url(http://i.imgur.com/989DVCx.png);
    margin: 10px;
    opacity: 0.5;
}

#login_close:hover {
    opacity: 1;
}

É o mesmo script, só que adicionado de uma maneira diferente.

Créditos à BestSkins.

---

EDIT: