Login estilo hitskin

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Login estilo hitskin

Mensagem por TappedOut em Dom 22 Jun 2014 - 14:34

  • Descrição:
Queria que ao clicar em login aparecesse isso embaixo do botão:

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 Qua 2 Jul 2014 - 15:53, editado 1 vez(es)
avatar

TappedOut
Usuário destaque

Masculino
Inscrito dia : 07/05/2014
Mensagens : 545
Pontos Ativos : 756

Ver perfil do usuário http://www.gtav-curiosidades.forumeiros.com

Resolvido Re: Login estilo hitskin

Mensagem por waghcwb em Seg 23 Jun 2014 - 11:59

Olá,

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

Só aguardar...

Até mais
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

Ver perfil do usuário http://punbb.forumeiros.com

Resolvido Re: Login estilo hitskin

Mensagem por TappedOut em Seg 23 Jun 2014 - 16: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 
avatar

TappedOut
Usuário destaque

Masculino
Inscrito dia : 07/05/2014
Mensagens : 545
Pontos Ativos : 756

Ver perfil do usuário http://www.gtav-curiosidades.forumeiros.com

Resolvido Re: Login estilo hitskin

Mensagem por DeeW. em Seg 23 Jun 2014 - 19: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
avatar

DeeW.
Nível 10

Masculino
Inscrito dia : 27/05/2014
Mensagens : 271
Pontos Ativos : 389

Ver perfil do usuário http://webpixel.forum-pro.net https://www.facebook.com/headbanger.d

Resolvido Re: Login estilo hitskin

Mensagem por TappedOut em Ter 24 Jun 2014 - 0:46

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

TappedOut
Usuário destaque

Masculino
Inscrito dia : 07/05/2014
Mensagens : 545
Pontos Ativos : 756

Ver perfil do usuário http://www.gtav-curiosidades.forumeiros.com

Resolvido Re: Login estilo hitskin

Mensagem por DeeW. em Ter 24 Jun 2014 - 1:38

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

DeeW.
Nível 10

Masculino
Inscrito dia : 27/05/2014
Mensagens : 271
Pontos Ativos : 389

Ver perfil do usuário http://webpixel.forum-pro.net https://www.facebook.com/headbanger.d

Resolvido Re: Login estilo hitskin

Mensagem por Galileu em Ter 24 Jun 2014 - 2: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.
avatar

Galileu
Nível 9

Masculino
Inscrito dia : 16/12/2012
Mensagens : 189
Pontos Ativos : 291

Ver perfil do usuário http://cidadezumbi.forumeiros.com

Resolvido Re: Login estilo hitskin

Mensagem por DeeW. em Ter 24 Jun 2014 - 12:53

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

DeeW.
Nível 10

Masculino
Inscrito dia : 27/05/2014
Mensagens : 271
Pontos Ativos : 389

Ver perfil do usuário http://webpixel.forum-pro.net https://www.facebook.com/headbanger.d
  • 0

Resolvido Re: Login estilo hitskin

Mensagem por waghcwb em Ter 24 Jun 2014 - 19: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:


Lhe agradou?
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

Ver perfil do usuário http://punbb.forumeiros.com

Resolvido Re: Login estilo hitskin

Mensagem por Hancki em Qua 25 Jun 2014 - 7: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
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: Login estilo hitskin

Mensagem por TappedOut em Qua 2 Jul 2014 - 15:50

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

TappedOut
Usuário destaque

Masculino
Inscrito dia : 07/05/2014
Mensagens : 545
Pontos Ativos : 756

Ver perfil do usuário http://www.gtav-curiosidades.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum