Login estilo hitskin

5 participantes

Ir para baixo

Tópico resolvido Login estilo hitskin

Mensagem por TappedOut 22.06.14 18:34

  • Descrição:
Queria que ao clicar em login aparecesse isso embaixo do botão:
Login estilo hitskin Hitski10
Que nem a hitskin, não precisa ser igual, mas parecido Feliz mas se fazer igual não tem problema tambem Feliz

  • Informações:
Fórum:http://thesimpsons-forum.forumeiros.com/Versão:PUNBB
Tipo:Pedido de códigoTags:Login,estilo,hitskin



Última edição por Boo em 02.07.14 19:53, editado 1 vez(es)
TappedOut
TappedOut
Membro

Membro desde : 08/05/2014
Mensagens : 545
Pontos : 756

http://www.gtav-curiosidades.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Login estilo hitskin

Mensagem por waghcwb 23.06.14 15:59

Olá,

Como não sei se é permitido fazer exatamente igual vou lhe fazer um semelhante, beleza?

Só aguardar...

Até mais
waghcwb
waghcwb
Membro

Membro desde : 07/09/2012
Mensagens : 734
Pontos : 1097

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Login estilo hitskin

Mensagem por TappedOut 23.06.14 20:51

Sim claro, é que fiquei muito interessado em logins como este, pois alem de não precisar sair da pagina que está, é mais rapido.
Ficarei no aguardo.  Estilo cool 
TappedOut
TappedOut
Membro

Membro desde : 08/05/2014
Mensagens : 545
Pontos : 756

http://www.gtav-curiosidades.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Login estilo hitskin

Mensagem por DeeW. 23.06.14 23:10

Crie um novo javascript com investimento em todas as páginas:

Código:

$(function() {
  $('a[href="/login"]').attr('href','#login');
  $('#pun-head').append('<span class="close-login">X</span><div class="login_pop_up" style="display:none"><form action="/login" method="post" name="form_login"><fieldset><div class=""><dl><dt><label for="username">Nome de usuário:</label></dt><dd><input type="text" tabindex="1" name="username" id="username" size="30" maxlength="40" value="" class="inputfield"></dd></dl><dl><dt><label for="password">Senha:</label></dt><dd><input type="password" tabindex="2" id="password" name="password" size="30" maxlength="25" class="inputfield"></dd></dl><dl><dt></dt><dd><label for="autologin" id="lbl_autologin"><input type="checkbox" name="autologin" id="autologin" tabindex="4" class="checkbox" checked="checked"> Conexão automática</label></dd></dl></div><dl><dt>&nbsp;</dt><dd><input type="hidden" name="redirect" value=""><input type="hidden" name="query" value=""><input type="submit" name="login" tabindex="6" value="Login" class="button2"></dd></dl></fieldset></form></div>');
$('a[href="#login"]').click(function(){
$('.login_pop_up').attr('style','display:block');
$('.close-login').attr('style','display:block');
});
$('.close-login').click(function(){
$('.login_pop_up').attr('style','display:none');
$('.close-login').attr('style','display:none');
});
});

E Adicione ao CSS:

Código:

.login_pop_up {
transition: 1s;
background: rgba(255, 255, 255, 0.5);
padding: 10px;
border-radius: 5px;
float: left;
position: absolute;
top: 100px;
left: 40%;
}
.login_pop_up input {
color: #000!important;
background: #FFB800!important;
padding: 5px!important;
border: 1px solid #4D4D4D!important;
}
.close-login:hover {
background: #FFF;
}
.close-login {
transition: 1s;
padding: 10px;
border-radius: 50%;
float: left;
position: absolute;
top: 78px;
font-size: 18px;
left: 56%;
color: #A00;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
font-weight: bold;
}

Espero que goste! Piscada
DeeW.
DeeW.
****

Membro desde : 27/05/2014
Mensagens : 271
Pontos : 389

http://webpixel.forum-pro.net https://www.facebook.com/headbanger.d

Ir para o topo Ir para baixo

Tópico resolvido Re: Login estilo hitskin

Mensagem por TappedOut 24.06.14 4:46

Fez nenhum efeito -Nakano .. Aguardo respostas do wagh, pois acho que a dele vai dar mais certo
TappedOut
TappedOut
Membro

Membro desde : 08/05/2014
Mensagens : 545
Pontos : 756

http://www.gtav-curiosidades.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Login estilo hitskin

Mensagem por DeeW. 24.06.14 5:38

Amigo, o código funciona apenas se você não estiver logado, sabia?
DeeW.
DeeW.
****

Membro desde : 27/05/2014
Mensagens : 271
Pontos : 389

http://webpixel.forum-pro.net https://www.facebook.com/headbanger.d

Ir para o topo Ir para baixo

Tópico resolvido Re: Login estilo hitskin

Mensagem por Galileu 24.06.14 6:36

-Nakano escreveu:Amigo, o código funciona apenas se você não estiver logado, sabia?

Se o código ainda estiver no fórum dele de Simpsons, então o código realmente não funcionou, Nakano.
Galileu
Galileu
***

Membro desde : 17/12/2012
Mensagens : 189
Pontos : 291

http://cidadezumbi.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Login estilo hitskin

Mensagem por DeeW. 24.06.14 16:53

É Claro, o fórum de testes dele já contém um código que faz o mesmo funcionamento.
DeeW.
DeeW.
****

Membro desde : 27/05/2014
Mensagens : 271
Pontos : 389

http://webpixel.forum-pro.net https://www.facebook.com/headbanger.d

Ir para o topo Ir para baixo

Tópico resolvido Re: Login estilo hitskin

Mensagem por waghcwb 24.06.14 23:14

Olá,

Segue o código que fiz, por favor faça os testes:
Código:
$(function(){
    var login = $('a.mainmenu[href="/login"]'),
        pos = login.offset(),
        dropdown =
            '<ul style="display:none;margin-top:3em;position:absolute;top:'+pos.top+'px;left:'+pos.left+'px">'+
                '<li>'+
                    '<form style="border-radius:0 0 5px 5px;padding:1em;display:inline-block;" action="/login" method="post" class="frm-form" name="form_login"><dl><dt><label for="username">Nome de usuário:</label></dt><dd><input style="outline:none;margin:1em 0;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;background:#efefef;padding:.5em 1em;border:none;border-radius:3px;" type="text" name="username" id="username" maxlength="40"></dd></dl><dl><dt><label for="password">Senha:</label></dt><dd><input style="outline:none;margin:1em 0;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;background:#efefef;padding:.5em 1em;border:none;border-radius:3px;" type="password" id="password" name="password" maxlength="25"></dd></dl><dl><dt></dt><dd><label for="autologin"><input type="checkbox" name="autologin" id="autologin" class="checkbox" checked="checked">Conexão automática</label></dd></dl><input type="hidden" name="redirect" value=""><input type="hidden" name="query" value=""><input type="submit" name="login" value="Login" style="background:#71a200;border:none;border-radius:3px;display:block;padding:.5em;text-align:center;width:100%;color:#fff;margin:1em 0;"></form>'+
                '</li>'+
            '</ul>';
   
    login.after( dropdown ).click(function(e){
        e.preventDefault();
        $(this).next('ul').fadeToggle();
    });
});


Resultado em seu fórum:
Login estilo hitskin XzBm7jF

Lhe agradou?
waghcwb
waghcwb
Membro

Membro desde : 07/09/2012
Mensagens : 734
Pontos : 1097

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Login estilo hitskin

Mensagem por Hancki 25.06.14 11:21

Redação 10 escreveu:o código não funcionou em meu fórum.
Olá!

O código funcionou pois testei no seu fórum e está tudo ok!
Agora preciso que crie um novo tópico para a sua dúvida.

Hancki
Hancki
Hancki
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Login estilo hitskin

Mensagem por TappedOut 02.07.14 19:50

Valeu wagh, ficou perfeito mano! Adorei parabens Muito feliz Muito grato, grato mesmo.
TappedOut
TappedOut
Membro

Membro desde : 08/05/2014
Mensagens : 545
Pontos : 756

http://www.gtav-curiosidades.forumeiros.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos