Como criar caixa de para conectar-se ao clicar em Login?

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

Resolvido Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll em 13/03/17, 03:51 pm

Detalhes da questão


Endereço do fórum: http://www.brasilplayultimate.forumeiros.com/forum
Versão do fórum: PunBB

Descrição


Boa tarde, gostaria do seguinte código:

Quando clico em "Conectar-se" aparece isso: http://i.imgur.com/rg3qGA3.png

Seria possível um JS assim?
Eu gostaria de editá-lo para não ficar igual (lógico)
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por while em 13/03/17, 04:51 pm

Olá autor, boa tarde.

Poderia me explicar como quer? eu faço um parecido ao senhor. Visto que não pretendo expor o meu ao publico.

Se possível ilustrar uma imagem de como quer, e se quiser alguma imagem, favor expor urls das imagens.

Até mais.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3152
Pontos Ativos : 4600

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll em 13/03/17, 05:05 pm

@while escreveu:Olá autor, boa tarde.

Poderia me explicar como quer? eu faço um parecido ao senhor. Visto que não pretendo expor o meu ao publico.

Se possível ilustrar uma imagem de como quer, e se quiser alguma imagem, favor expor urls das imagens.

Até mais.
O senhor poderia fazer e eu poderia personaliza-lo com a imagem que queria, no caso seria basicamente a mesma coisa so que percebi um pequeno defeito, quando clica nele não há como sair, então gostaria de um tipo esse com um X logo acima dele ou nele mesmo.... 
Se possível eu agradeceria


Se quiser a imagem pode fazer com essa render: http://pre12.deviantart.net/86b6/th/pre/f/2014/270/9/1/trevor_phillips_render_2_by_squizcat-d80pu4t.png
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll em 14/03/17, 06:48 pm

UP
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por while em 15/03/17, 02:25 pm

Crie um novo javascript com investimento em todas as paginas com esse código:

Código:
$(document).ready(function() {
    /**
    * Title: Caixa de Login
    * Créditos: Cepheus
    * Copyright: (C) 2016 Cepheus
    * Site: bestskins.net
    */
    var cepheus = 'cepheus'.length;
    logged = _userdata.session_logged_in;
    $('a[href="/login"]').click(function(e) {
        $('.cepheusLogin').slideToggle();
        e.preventDefault();
    });
    if (logged + cepheus == 7) {
        $('body').append(
            '<style>' +
            '::-webkit-input-placeholder {' +
            'color:#333333; ' +
            '}' +
            ':-moz-placeholder {' +
            'color:#333333; ' +
            '}' +
            '::-moz-placeholder {' +
            'color:#333333; ' +
            '}' +
            ':-ms-input-placeholder { ' +
            'color:#333333; ' +
            '}' +
            '.cepheusLogin { ' +
            'margin: 0 auto; ' +
            'width: 340px; ' +
            'font-family: "Geo", sans-serif; ' +
            'position: fixed; ' +
            'left: 0; ' +
            'right: 0; ' +
            'top: 20%; ' +
            '} ' +
            '.cepheusCenter .Center_login img, .cepheusCenter .Center_login input {  ' +
            ' width:80px; ' +
            '} ' +
            '.cepheusTop { ' +
            'background-color: #333333; ' +
            'border-bottom: 6px solid #51b4a5; ' +
            'width: 340px; ' +
            'height: 75px; ' +
            'position: relative; ' +
            'color: #fff; ' +
            '} ' +
            '.Top_logo { ' +
            'margin: 0 auto; ' +
            'width: 290px; ' +
            'padding: 15px 10px 10px 10px; ' +
            'text-align: center; ' +
            'font-size: 37px; ' +
            '} ' +
            '.cepheusTop:before { ' +
            'content: ""; ' +
            'border-top: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            'bottom: -31px; ' +
            '} ' +
            '.cepheusTop:after { ' +
            'content: ""; ' +
            'border-top: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            'right: 0; ' +
            'bottom: -31px; ' +
            '} ' +
            '.cepheusCenter { ' +
            'position: relative; ' +
            'margin: 0 auto; ' +
            'background-color: #e3e3e3; ' +
            'width: 310px; ' +
            'height: 320px; ' +
            'z-index: 999; ' +
            '} ' +
            '.cepheusCenter .Center_login { ' +
            'text-align: center; ' +
            'margin: 0 auto; ' +
            'width: 290px; ' +
            '} ' +
            '.cepheusCenter .Center_login img,  .cepheusCenter .Center_login input { ' +
            'margin-bottom: 10px; ' +
            'font-family: "Geo", sans-serif; ' +
            '} ' +
            '.cepheusCenter .Center_login input[name="username"], .cepheusCenter .Center_login input[name="password"] { ' +
            'width: 270px; ' +
            'border: 1px solid #333333; ' +
            'padding: 0 10px;' +
            'font-size: 20px; ' +
            'height: 40px;' +
            'cursor: inherit;' +
            '}' +
            '.cepheusCenter .Center_login input[name="login"] { ' +
            'border-radius: 50%; ' +
            'width: 34px; ' +
            'height: 34px; ' +
            'border: 4px solid #51b4a5; ' +
            'background: transparent; ' +
            'position: relative; ' +
            'cursor: pointer; ' +
            '} ' +
            '.btn_entrar { ' +
            'text-align: center; ' +
            '} ' +
            '.btn_entrar:before { ' +
            'content: ""; ' +
            'border-bottom: 10px solid transparent; ' +
            'border-top: 10px solid transparent; ' +
            'border-left: 10px solid #51b4a5; ' +
            'position: absolute; ' +
            'margin: 7px 16px; ' +
            '} ' +
            '.cepheusFooter { ' +
            'background-color: #333333; ' +
            'width: 340px; ' +
            'height: 25px; ' +
            'position: relative; ' +
            'text-align: center; ' +
            '} ' +
            '.cepheusFooter:before { ' +
            'content: ""; ' +
            'border-bottom: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            'left: 0; ' +
            'bottom: 25px; ' +
            '} ' +
            '.cepheusFooter:after { ' +
            'content: ""; ' +
            'border-bottom: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            '  right: 0; ' +
            '  bottom: 25px; ' +
            '} ' +
            '.cepheusFooter a { ' +
            '  font-size: 20px; ' +
            '  color: #fff; ' +
            '  text-decoration: none; ' +
            'font-family: "Geo", sans-serif; ' +
            '} ' +
            '.cepheusFooter a span { ' +
            '  font-family: arial, sans-serif; ' +
            '  color: #51b4a5; ' +
            '  margin-right: 5px; ' +
            '} ' +
            '<style>'
        );
        $('body').append(
            '<link href="https://fonts.googleapis.com/css?family=Geo:400,400italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">' +
            '<div class="cepheusLogin" style="display:none">' +
            '<div class="cepheusTop">' +
            '<div class="Top_logo">Brasil Play Ultimate</div>' +
            '</div>' +
            '<div class="cepheusCenter">' +
            '<div class="Center_login">' +
            '<img src="http://pre12.deviantart.net/86b6/th/pre/f/2014/270/9/1/trevor_phillips_render_2_by_squizcat-d80pu4t.png" />' +
            '<form action="/login.forum" class="form-login" method="post">' +
            '<input name="username" type="text" required placeholder="Nome" />' +
            '<input name="password" type="password" required placeholder="Senha" /><br />' +
            '<div class="btn_entrar">' +
            '<input name="login" type="submit" value="" />' +
            '</div>' +
            '</form>' +
            '</div>' +
            '</div>' +
            '<div class="cepheusFooter"> <a href="/register"><span>+</span>Criar Conta</a></div>' +
            '</div>'

        );
    } else {
        jQuery('body').append('');
    };
});

OBS: O código foi pego do Cepheus e eu apenas adaptei do meu modo, tornando desse jeito, portanto ele tem o maior crédito.

Até mais.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3152
Pontos Ativos : 4600

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll em 15/03/17, 02:39 pm

Perfeito!
Personalizei as cores apenas e a fonte.
Gostaria de adicinoar um ultimo campo, escrito: "Recuperar minha senha" 

Seria possível?

Codigo:
Código:
$(document).ready(function() {
    /**
    * Title: Caixa de Login
    * Créditos: Cepheus
    * Copyright: (C) 2016 Cepheus
    * Site: bestskins.net
    */
    var cepheus = 'cepheus'.length;
    logged = _userdata.session_logged_in;
    $('a[href="/login"]').click(function(e) {
        $('.cepheusLogin').slideToggle();
        e.preventDefault();
    });
    if (logged + cepheus == 7) {
        $('body').append(
            '<style>' +
            '::-webkit-input-placeholder {' +
            'color:#333333; ' +
            '}' +
            ':-moz-placeholder {' +
            'color:#333333; ' +
            '}' +
            '::-moz-placeholder {' +
            'color:#333333; ' +
            '}' +
            ':-ms-input-placeholder { ' +
            'color:#333333; ' +
            '}' +
            '.cepheusLogin { ' +
            'margin: 0 auto; ' +
            'width: 340px; ' +
            'font-family: "Geo", sans-serif; ' +
            'position: fixed; ' +
            'left: 0; ' +
            'right: 0; ' +
            'top: 20%; ' +
            '} ' +
            '.cepheusCenter .Center_login img, .cepheusCenter .Center_login input {  ' +
            ' width:80px; ' +
            '} ' +
            '.cepheusTop { ' +
            'background-color: #333333; ' +
            'border-bottom: 6px solid #51aada; ' +
            'width: 340px; ' +
            'height: 75px; ' +
            'position: relative; ' +
            'color: #fff; ' +
            '} ' +
            '.Top_logo { ' +
            'margin: 0 auto; ' +
            'width: 290px; ' +
            'padding: 15px 10px 10px 10px; ' +
            'text-align: center; ' +
            'font-family: Leckerli One, Ubuntu, sans-serif!important;' +
            'font-size: 30px; ' +
            '} ' +
            '.cepheusTop:before { ' +
            'content: ""; ' +
            'border-top: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            'bottom: -31px; ' +
            '} ' +
            '.cepheusTop:after { ' +
            'content: ""; ' +
            'border-top: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            'right: 0; ' +
            'bottom: -31px; ' +
            '} ' +
            '.cepheusCenter { ' +
            'position: relative; ' +
            'margin: 0 auto; ' +
            'background-color: #e3e3e3; ' +
            'width: 310px; ' +
            'height: 320px; ' +
            'z-index: 999; ' +
            '} ' +
            '.cepheusCenter .Center_login { ' +
            'text-align: center; ' +
            'margin: 0 auto; ' +
            'width: 290px; ' +
            '} ' +
            '.cepheusCenter .Center_login img,  .cepheusCenter .Center_login input { ' +
            'margin-bottom: 10px; ' +
            'font-family: "Geo", sans-serif; ' +
            '} ' +
            '.cepheusCenter .Center_login input[name="username"], .cepheusCenter .Center_login input[name="password"] { ' +
            'width: 270px; ' +
            'border: 1px solid #333333; ' +
            'padding: 0 10px;' +
            'font-size: 20px; ' +
            'height: 40px;' +
            'cursor: inherit;' +
            '}' +
            '.cepheusCenter .Center_login input[name="login"] { ' +
            'border-radius: 50%; ' +
            'width: 34px; ' +
            'height: 34px; ' +
            'border: 4px solid #51aada; ' +
            'background: transparent; ' +
            'position: relative; ' +
            'cursor: pointer; ' +
            '} ' +
            '.btn_entrar { ' +
            'text-align: center; ' +
            '} ' +
            '.btn_entrar:before { ' +
            'content: ""; ' +
            'border-bottom: 10px solid transparent; ' +
            'border-top: 10px solid transparent; ' +
            'border-left: 10px solid #51aada; ' +
            'position: absolute; ' +
            'margin: 7px 16px; ' +
            '} ' +
            '.cepheusFooter { ' +
            'background-color: #333333; ' +
            'width: 340px; ' +
            'height: 25px; ' +
            'position: relative; ' +
            'text-align: center; ' +
            '} ' +
            '.cepheusFooter:before { ' +
            'content: ""; ' +
            'border-bottom: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            'left: 0; ' +
            'bottom: 25px; ' +
            '} ' +
            '.cepheusFooter:after { ' +
            'content: ""; ' +
            'border-bottom: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            '  right: 0; ' +
            '  bottom: 25px; ' +
            '} ' +
            '.cepheusFooter a { ' +
            '  font-size: 20px; ' +
            '  color: #fff; ' +
            '  text-decoration: none; ' +
            'font-family: "Geo", sans-serif; ' +
            '} ' +
            '.cepheusFooter a span { ' +
            '  font-family: arial, sans-serif; ' +
            '  color: #51aada; ' +
            '  margin-right: 5px; ' +
            '} ' +
            '<style>'
        );
        $('body').append(
            '<link href="https://fonts.googleapis.com/css?family=Geo:400,400italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">' +
            '<div class="cepheusLogin" style="display:none">' +
            '<div class="cepheusTop">' +
            '<div class="Top_logo">Brasil Play Ultimate</div>' +
            '</div>' +
            '<div class="cepheusCenter">' +
            '<div class="Center_login">' +
            '<img src="http://pre12.deviantart.net/86b6/th/pre/f/2014/270/9/1/trevor_phillips_render_2_by_squizcat-d80pu4t.png" />' +
            '<form action="/login.forum" class="form-login" method="post">' +
            '<input name="username" type="text" required placeholder="Nome" />' +
            '<input name="password" type="password" required placeholder="Senha" /><br />' +
            '<div class="btn_entrar">' +
            '<input name="login" type="submit" value="" />' +
            '</div>' +
            '</form>' +
            '</div>' +
            '</div>' +
            '<div class="cepheusFooter"> <a href="/register"><span>+</span>Criar Conta</a></div>' +
            '</div>'

        );
    } else {
        jQuery('body').append('');
    };
});
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por while em 15/03/17, 03:02 pm

Troque por este:

Código:
$(document).ready(function() {
    /**
    * Title: Caixa de Login
    * Créditos: Cepheus
    * Copyright: (C) 2016 Cepheus
    * Site: bestskins.net
    */
    var cepheus = 'cepheus'.length;
    logged = _userdata.session_logged_in;
    $('a[href="/login"]').click(function(e) {
        $('.cepheusLogin').slideToggle();
        e.preventDefault();
    });
    if (logged + cepheus == 7) {
        $('body').append(
            '<style>' +
            '::-webkit-input-placeholder {' +
            'color:#333333; ' +
            '}' +
            ':-moz-placeholder {' +
            'color:#333333; ' +
            '}' +
            '::-moz-placeholder {' +
            'color:#333333; ' +
            '}' +
            ':-ms-input-placeholder { ' +
            'color:#333333; ' +
            '}' +
            '.cepheusLogin { ' +
            'margin: 0 auto; ' +
            'width: 340px; ' +
            'font-family: "Geo", sans-serif; ' +
            'position: fixed; ' +
            'left: 0; ' +
            'right: 0; ' +
            'top: 20%; ' +
            '} ' +
            '.cepheusCenter .Center_login img, .cepheusCenter .Center_login input {  ' +
            ' width:70px; ' +
            '} ' +
            '.cepheusTop { ' +
            'background-color: #333333; ' +
            'border-bottom: 6px solid #51aada; ' +
            'width: 340px; ' +
            'height: 75px; ' +
            'position: relative; ' +
            'color: #fff; ' +
            '} ' +
            '.Top_logo { ' +
            'margin: 0 auto; ' +
            'width: 290px; ' +
            'padding: 15px 10px 10px 10px; ' +
            'text-align: center; ' +
            'font-family: Leckerli One, Ubuntu, sans-serif!important;' +
            'font-size: 30px; ' +
            '} ' +
            '.cepheusTop:before { ' +
            'content: ""; ' +
            'border-top: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            'bottom: -31px; ' +
            '} ' +
            '.cepheusTop:after { ' +
            'content: ""; ' +
            'border-top: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            'right: 0; ' +
            'bottom: -31px; ' +
            '} ' +
            '.cepheusCenter { ' +
            'position: relative; ' +
            'margin: 0 auto; ' +
            'background-color: #e3e3e3; ' +
            'width: 310px; ' +
            'height: 320px; ' +
            'z-index: 999; ' +
            '} ' +
            '.cepheusCenter .Center_login { ' +
            'text-align: center; ' +
            'margin: 0 auto; ' +
            'width: 290px; ' +
            '} ' +
            '.cepheusCenter .Center_login img,  .cepheusCenter .Center_login input { ' +
            'margin-bottom: 10px; ' +
            'font-family: "Geo", sans-serif; ' +
            '} ' +
            '.cepheusCenter .Center_login input[name="username"], .cepheusCenter .Center_login input[name="password"] { ' +
            'width: 270px; ' +
            'border: 1px solid #333333; ' +
            'padding: 0 10px;' +
            'font-size: 20px; ' +
            'height: 40px;' +
            'cursor: inherit;' +
            '}' +
            '.cepheusCenter .Center_login input[name="login"] { ' +
            'border-radius: 50%; ' +
            'width: 34px; ' +
            'height: 34px; ' +
            'border: 4px solid #51aada; ' +
            'background: transparent; ' +
            'position: relative; ' +
            'cursor: pointer; ' +
            '} ' +
            '.btn_entrar { ' +
            'text-align: center; ' +
            'margin-top: 10px; ' +
            '} ' +
            '.btn_entrar:before { ' +
            'content: ""; ' +
            'border-bottom: 10px solid transparent; ' +
            'border-top: 10px solid transparent; ' +
            'border-left: 10px solid #51aada; ' +
            'position: absolute; ' +
            'margin: 7px 16px; ' +
            '} ' +
            '.cepheusFooter { ' +
            'background-color: #333333; ' +
            'width: 340px; ' +
            'height: 25px; ' +
            'position: relative; ' +
            'text-align: center; ' +
            '} ' +
            '.cepheusFooter:before { ' +
            'content: ""; ' +
            'border-bottom: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            'left: 0; ' +
            'bottom: 25px; ' +
            '} ' +
            '.cepheusFooter:after { ' +
            'content: ""; ' +
            'border-bottom: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            '  right: 0; ' +
            '  bottom: 25px; ' +
            '} ' +
            '.cepheusFooter a { ' +
            '  font-size: 20px; ' +
            '  color: #fff; ' +
            '  text-decoration: none; ' +
            'font-family: "Geo", sans-serif; ' +
            '} ' +
            '.cepheusFooter a span { ' +
            '  font-family: arial, sans-serif; ' +
            '  color: #51aada; ' +
            '  margin-right: 5px; ' +
            '} ' +
            '<style>'
        );
        $('body').append(
            '<link href="https://fonts.googleapis.com/css?family=Geo:400,400italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">' +
            '<div class="cepheusLogin" style="display:none">' +
            '<div class="cepheusTop">' +
            '<div class="Top_logo">Brasil Play Ultimate</div>' +
            '</div>' +
            '<div class="cepheusCenter">' +
            '<div class="Center_login">' +
            '<img src="http://pre12.deviantart.net/86b6/th/pre/f/2014/270/9/1/trevor_phillips_render_2_by_squizcat-d80pu4t.png" />' +
            '<form action="/login.forum" class="form-login" method="post">' +
            '<input name="username" type="text" required placeholder="Nome" />' +
            '<input name="password" type="password" required placeholder="Senha" /><br />' +
            '<a href="/profile?mode=sendpassword">Recuperar minha senha</a>' +
            '<div class="btn_entrar">' +
            '<input name="login" type="submit" value="" />' +
            '</div>' +
            '</form>' +
            '</div>' +
            '</div>' +
            '<div class="cepheusFooter"> <a href="/register"><span>+</span>Criar Conta</a></div>' +
            '</div>'

        );
    } else {
        jQuery('body').append('');
    };
});
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3152
Pontos Ativos : 4600

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll em 15/03/17, 04:31 pm

Perfeito While, muito obrigado, só que percebi uma falha, não há como fechar kkkk, teria como adicionar um Botão "X" pra o usuário fechar se quiser?
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll em 16/03/17, 06:19 pm

UP
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll em 17/03/17, 07:07 pm

UP
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll em 18/03/17, 11:04 pm

UP
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll em 20/03/17, 11:27 am

UP
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por Shek em 20/03/17, 01:01 pm



Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17161
Pontos Ativos : 21418

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll em 20/03/17, 01:19 pm

Olá @Shek Crowley, eu gostaria apenas do X ali no canto superior da caixa, ela já está organizada, basta o X mesmo.
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por while em 20/03/17, 01:40 pm

Troque o código por este:

Código:
$(document).ready(function() {
    /**
    * Title: Caixa de Login
    * Créditos: Cepheus
    * Copyright: (C) 2016 Cepheus
    * Site: bestskins.net
    */
    var cepheus = 'cepheus'.length;
    logged = _userdata.session_logged_in;
    $('a[href="/login"]').click(function(e) {
        $('.cepheusLogin').slideToggle();
        e.preventDefault();
    });
      $('.Top_logo:after"]').click(function(e) {
      $('.cepheusLogin').remove();
        e.preventDefault();
    });
    if (logged + cepheus == 7) {
        $('body').append(
            '<style>' +
            '::-webkit-input-placeholder {' +
            'color:#333333; ' +
            '}' +
            ':-moz-placeholder {' +
            'color:#333333; ' +
            '}' +
            '::-moz-placeholder {' +
            'color:#333333; ' +
            '}' +
            ':-ms-input-placeholder { ' +
            'color:#333333; ' +
            '}' +
            '.cepheusLogin { ' +
            'margin: 0 auto; ' +
            'width: 340px; ' +
            'font-family: "Geo", sans-serif; ' +
            'position: fixed; ' +
            'left: 0; ' +
            'right: 0; ' +
            'top: 20%; ' +
            '} ' +
            '.cepheusCenter .Center_login img, .cepheusCenter .Center_login input {  ' +
            ' width:70px; ' +
            '} ' +
            '.cepheusTop { ' +
            'background-color: #333333; ' +
            'border-bottom: 6px solid #51aada; ' +
            'width: 340px; ' +
            'height: 75px; ' +
            'position: relative; ' +
            'color: #fff; ' +
            '} ' +
            '.Top_logo { ' +
            'margin: 0 auto; ' +
            'width: 290px; ' +
            'padding: 15px 10px 10px 10px; ' +
            'text-align: center; ' +
            'font-family: Leckerli One, Ubuntu, sans-serif!important;' +
            'font-size: 30px; ' +
            '} ' +
            '.cepheusTop:before { ' +
            'content: ""; ' +
            'border-top: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            'bottom: -31px; ' +
            '} ' +
            '.cepheusTop:after { ' +
            'content: ""; ' +
            'border-top: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            'right: 0; ' +
            'bottom: -31px; ' +
            '} ' +
            '.cepheusCenter { ' +
            'position: relative; ' +
            'margin: 0 auto; ' +
            'background-color: #e3e3e3; ' +
            'width: 310px; ' +
            'height: 320px; ' +
            'z-index: 999; ' +
            '} ' +
            '.cepheusCenter .Center_login { ' +
            'text-align: center; ' +
            'margin: 0 auto; ' +
            'width: 290px; ' +
            '} ' +
            '.cepheusCenter .Center_login img,  .cepheusCenter .Center_login input { ' +
            'margin-bottom: 10px; ' +
            'font-family: "Geo", sans-serif; ' +
            '} ' +
            '.cepheusCenter .Center_login input[name="username"], .cepheusCenter .Center_login input[name="password"] { ' +
            'width: 270px; ' +
            'border: 1px solid #333333; ' +
            'padding: 0 10px;' +
            'font-size: 20px; ' +
            'height: 40px;' +
            'cursor: inherit;' +
            '}' +
            '.cepheusCenter .Center_login input[name="login"] { ' +
            'border-radius: 50%; ' +
            'width: 34px; ' +
            'height: 34px; ' +
            'border: 4px solid #51aada; ' +
            'background: transparent; ' +
            'position: relative; ' +
            'cursor: pointer; ' +
            '} ' +
            '.btn_entrar { ' +
            'text-align: center; ' +
            'margin-top: 10px; ' +
            '} ' +
            '.btn_entrar:before { ' +
            'content: ""; ' +
            'border-bottom: 10px solid transparent; ' +
            'border-top: 10px solid transparent; ' +
            'border-left: 10px solid #51aada; ' +
            'position: absolute; ' +
            'margin: 7px 16px; ' +
            '} ' +
            '.cepheusFooter { ' +
            'background-color: #333333; ' +
            'width: 340px; ' +
            'height: 25px; ' +
            'position: relative; ' +
            'text-align: center; ' +
            '} ' +
            '.cepheusFooter:before { ' +
            'content: ""; ' +
            'border-bottom: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            'left: 0; ' +
            'bottom: 25px; ' +
            '} ' +
            '.cepheusFooter:after { ' +
            'content: ""; ' +
            'border-bottom: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            '  right: 0; ' +
            '  bottom: 25px; ' +
            '} ' +
            '.cepheusFooter a { ' +
            '  font-size: 20px; ' +
            '  color: #fff; ' +
            '  text-decoration: none; ' +
            'font-family: "Geo", sans-serif; ' +
            '} ' +
            '.cepheusFooter a span { ' +
            '  font-family: arial, sans-serif; ' +
            '  color: #51aada; ' +
            '  margin-right: 5px; ' +
            '} ' +
            ' .Top_logo:after { ' +
            '  content:"X"; ' +
            '  position:absolute; ' +
            '  margin-top:-30px; ' +
            '  margin-left:10px; ' +
            '} ' +
            '<style>'                 
        }
        );
        $('body').append(
            '<link href="https://fonts.googleapis.com/css?family=Geo:400,400italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">' +
            '<div class="cepheusLogin" style="display:none">' +
            '<div class="cepheusTop">' +
            '<div class="Top_logo">Brasil Play Ultimate</div>' +
            '</div>' +
            '<div class="cepheusCenter">' +
            '<div class="Center_login">' +
            '<img src="http://pre12.deviantart.net/86b6/th/pre/f/2014/270/9/1/trevor_phillips_render_2_by_squizcat-d80pu4t.png" />' +
            '<form action="/login.forum" class="form-login" method="post">' +
            '<input name="username" type="text" required placeholder="Nome" />' +
            '<input name="password" type="password" required placeholder="Senha" /><br />' +
            '<a href="/profile?mode=sendpassword">Recuperar minha senha</a>' +
            '<div class="btn_entrar">' +
            '<input name="login" type="submit" value="" />' +
            '</div>' +
            '</form>' +
            '</div>' +
            '</div>' +
            '<div class="cepheusFooter"> <a href="/register"><span>+</span>Criar Conta</a></div>' +
            '</div>'

        );
    } else {
        jQuery('body').append('');
    };
});
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3152
Pontos Ativos : 4600

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll em 20/03/17, 01:50 pm

Bom while, o código que me passou não resultou, até sumiu o login, mas vi onde o código funcionava e adicionei, infelizmente quando coloquei o CSS ele abriu mas não fechava, ai achei o JS

Código:
$('.Top_logo:after"]').click(function(e) {
      $('.cepheusLogin').remove();
        e.preventDefault();
    });

e mesmo assim agora ele nem aparece mais... Seria algum conflito ?
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll em 21/03/17, 08:27 pm

UP
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por Luiz em 21/03/17, 08:31 pm

Não. Com certeza não é conflito.
Por gentileza, procure este trecho em sua CSS:
Código:
.Top_logo:after {
    content: "X";
    position: absolute;
    margin-top: -30px;
    margin-left: 10px;
}

Feito isso, remova tudo isso.
Até mais. Piscada
Após isso, iremos dar continuidade.
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll em 21/03/17, 08:35 pm

Visto que o código estava causando isso nos meus tópicos: http://i.imgur.com/BUdWVxS.png
Resolvi por no fórum de testes se não haver problemas.
Segue o link: http://testebpu.forumeiros.com/forum

Deixei no jeito que pediu
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por Luiz em 21/03/17, 08:46 pm

O senhor não aplicou o código do pop-up de login:
-> http://prntscr.com/emvzdu

Até mais.
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll em 21/03/17, 08:57 pm

Luiz~ escreveu:O senhor não aplicou o código do pop-up de login:
-> http://prntscr.com/emvzdu

Até mais.

Na verdade apliquei mas esqueci de retirar esse, tente agora.
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por Luiz em 21/03/17, 08:59 pm

Ainda não está funcionando.
:s

Até mais. Tchau
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll em 21/03/17, 10:22 pm

Não sei o que houve, mas mudei o JS para a penultima versão que o While me passou.
Veja ai por favor
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por Luiz em 21/03/17, 10:28 pm

Ué, agora funcionou, que doidera! Rindo
Enfim...

---

Altere o JavaScript por este:
Código:
$(document).ready(function() {
  /**
    * Title: Caixa de Login
    * Créditos: Cepheus
    * Copyright: (C) 2016 Cepheus
    * Site: bestskins.net
    */
    var cepheus = 'cepheus'.length;
    logged = _userdata.session_logged_in;
    $('a[href="/login"]').click(function(e) {
        $('.cepheusLogin').slideToggle();
        e.preventDefault();
    });

    $('.Top_logo').append('<a href="javascript:void(0)" id="close-my-login">x</a>');
   
    if (logged + cepheus == 7) {
        $('body').append(
            '<style>' +
            '::-webkit-input-placeholder {' +
            'color:#333333; ' +
            '}' +
            ':-moz-placeholder {' +
            'color:#333333; ' +
            '}' +
            '::-moz-placeholder {' +
            'color:#333333; ' +
            '}' +
            ':-ms-input-placeholder { ' +
            'color:#333333; ' +
            '}' +
            '.cepheusLogin { ' +
            'margin: 0 auto; ' +
            'width: 340px; ' +
            'font-family: "Geo", sans-serif; ' +
            'position: fixed; ' +
            'left: 0; ' +
            'right: 0; ' +
            'top: 20%; ' +
            '} ' +
            '.cepheusCenter .Center_login img, .cepheusCenter .Center_login input {  ' +
            ' width:70px; ' +
            '} ' +
            '.cepheusTop { ' +
            'background-color: #333333; ' +
            'border-bottom: 6px solid #51aada; ' +
            'width: 340px; ' +
            'height: 75px; ' +
            'position: relative; ' +
            'color: #fff; ' +
            '} ' +
            '.Top_logo { ' +
            'margin: 0 auto; ' +
            'width: 290px; ' +
            'padding: 15px 10px 10px 10px; ' +
            'text-align: center; ' +
            'font-family: Leckerli One, Ubuntu, sans-serif!important;' +
            'font-size: 30px; ' +
            '} ' +
            '.cepheusTop:before { ' +
            'content: ""; ' +
            'border-top: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            'bottom: -31px; ' +
            '} ' +
            '.cepheusTop:after { ' +
            'content: ""; ' +
            'border-top: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            'right: 0; ' +
            'bottom: -31px; ' +
            '} ' +
            '.cepheusCenter { ' +
            'position: relative; ' +
            'margin: 0 auto; ' +
            'background-color: #e3e3e3; ' +
            'width: 310px; ' +
            'height: 320px; ' +
            'z-index: 999; ' +
            '} ' +
            '.cepheusCenter .Center_login { ' +
            'text-align: center; ' +
            'margin: 0 auto; ' +
            'width: 290px; ' +
            '} ' +
            '.cepheusCenter .Center_login img,  .cepheusCenter .Center_login input { ' +
            'margin-bottom: 10px; ' +
            'font-family: "Geo", sans-serif; ' +
            '} ' +
            '.cepheusCenter .Center_login input[name="username"], .cepheusCenter .Center_login input[name="password"] { ' +
            'width: 270px; ' +
            'border: 1px solid #333333; ' +
            'padding: 0 10px;' +
            'font-size: 20px; ' +
            'height: 40px;' +
            'cursor: inherit;' +
            '}' +
            '.cepheusCenter .Center_login input[name="login"] { ' +
            'border-radius: 50%; ' +
            'width: 34px; ' +
            'height: 34px; ' +
            'border: 4px solid #51aada; ' +
            'background: transparent; ' +
            'position: relative; ' +
            'cursor: pointer; ' +
            '} ' +
            '.btn_entrar { ' +
            'text-align: center; ' +
            'margin-top: 10px; ' +
            '} ' +
            '.btn_entrar:before { ' +
            'content: ""; ' +
            'border-bottom: 10px solid transparent; ' +
            'border-top: 10px solid transparent; ' +
            'border-left: 10px solid #51aada; ' +
            'position: absolute; ' +
            'margin: 7px 16px; ' +
            '} ' +
            '.cepheusFooter { ' +
            'background-color: #333333; ' +
            'width: 340px; ' +
            'height: 25px; ' +
            'position: relative; ' +
            'text-align: center; ' +
            '} ' +
            '.cepheusFooter:before { ' +
            'content: ""; ' +
            'border-bottom: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            'left: 0; ' +
            'bottom: 25px; ' +
            '} ' +
            '.cepheusFooter:after { ' +
            'content: ""; ' +
            'border-bottom: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            '  right: 0; ' +
            '  bottom: 25px; ' +
            '} ' +
            '.cepheusFooter a { ' +
            '  font-size: 20px; ' +
            '  color: #fff; ' +
            '  text-decoration: none; ' +
            'font-family: "Geo", sans-serif; ' +
            '} ' +
            '.cepheusFooter a span { ' +
            '  font-family: arial, sans-serif; ' +
            '  color: #51aada; ' +
            '  margin-right: 5px; ' +
            '} ' +
            ' .Top_logo:after { ' +
            '  content:"X"; ' +
            '  position:absolute; ' +
            '  margin-top:-30px; ' +
            '  margin-left:10px; ' +
            '} ' +
            '<style>'                 
        }
        );
        $('body').append(
            '<link href="https://fonts.googleapis.com/css?family=Geo:400,400italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">' +
            '<div class="cepheusLogin" style="display:none">' +
            '<div class="cepheusTop">' +
            '<div class="Top_logo">Brasil Play Ultimate</div>' +
            '</div>' +
            '<div class="cepheusCenter">' +
            '<div class="Center_login">' +
            '<img src="http://pre12.deviantart.net/86b6/th/pre/f/2014/270/9/1/trevor_phillips_render_2_by_squizcat-d80pu4t.png" />' +
            '<form action="/login.forum" class="form-login" method="post">' +
            '<input name="username" type="text" required placeholder="Nome" />' +
            '<input name="password" type="password" required placeholder="Senha" /><br />' +
            '<a href="/profile?mode=sendpassword">Recuperar minha senha</a>' +
            '<div class="btn_entrar">' +
            '<input name="login" type="submit" value="" />' +
            '</div>' +
            '</form>' +
            '</div>' +
            '</div>' +
            '<div class="cepheusFooter"> <a href="/register"><span>+</span>Criar Conta</a></div>' +
            '</div>'

        );
    } else {
        jQuery('body').append('');
    };
});
$(window).on('load', function () {
  $('#close-my-login').click(function(e) {
      $('.cepheusLogin').slideToggle();
      e.preventDefault();
  });
});

Resulta? Até mais. Feliz
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll em 21/03/17, 10:37 pm

Negativo, caro amigo, desta vez nem abre...
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

Ver perfil do usuário http://ultimatelife.forumeiros.com
  • 0

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por Luiz em 22/03/17, 02:16 pm

Olá.
Tente criar um novo JavaScript, com investimento em todas as páginas.

Código:
Código:
(function ($) {

    $(function () {
      var $topLink = $('<a>', {
         href: 'javascript:void(0)',
         text: 'X',
         class: 'popupClose'
        }).appendTo('.Top_logo');

      $topLink.on('click', function () {
         $('.cepheusLogin').slideToggle();
        });
    });
}(jQuery));

O CSS, você pode personalizar à seu gosto usando a classe "popupClose".
Se o senhor quiser sua antiga personalização, adicione este código ao final de sua CSS:
Código:
a.popupClose {
    font-family: Leckerli One, Ubuntu, sans-serif!important;
    top: -20px;
    right: -5px;
    color: #e3e3e3;
}

Até mais.
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll em 22/03/17, 03:43 pm

Vamos lá,

Código do Login:
Código:
$(document).ready(function() {
    /**
    * Title: Caixa de Login
    * Créditos: Cepheus
    * Copyright: (C) 2016 Cepheus
    * Site: bestskins.net
    */
    var cepheus = 'cepheus'.length;
    logged = _userdata.session_logged_in;
    $('a[href="/login"]').click(function(e) {
        $('.cepheusLogin').slideToggle();
        e.preventDefault();
    });
      $('.Top_logo:after"]').click(function(e) {
      $('.cepheusLogin').remove();
        e.preventDefault();
    });
    if (logged + cepheus == 7) {
        $('body').append(
            '<style>' +
            '::-webkit-input-placeholder {' +
            'color:#333333; ' +
            '}' +
            ':-moz-placeholder {' +
            'color:#333333; ' +
            '}' +
            '::-moz-placeholder {' +
            'color:#333333; ' +
            '}' +
            ':-ms-input-placeholder { ' +
            'color:#333333; ' +
            '}' +
            '.cepheusLogin { ' +
            'margin: 0 auto; ' +
            'width: 340px; ' +
            'font-family: "Geo", sans-serif; ' +
            'position: fixed; ' +
            'left: 0; ' +
            'right: 0; ' +
            'top: 20%; ' +
            '} ' +
            '.cepheusCenter .Center_login img, .cepheusCenter .Center_login input {  ' +
            ' width:70px; ' +
            '} ' +
            '.cepheusTop { ' +
            'background-color: #333333; ' +
            'border-bottom: 6px solid #51aada; ' +
            'width: 340px; ' +
            'height: 75px; ' +
            'position: relative; ' +
            'color: #fff; ' +
            '} ' +
            '.Top_logo { ' +
            'margin: 0 auto; ' +
            'width: 290px; ' +
            'padding: 15px 10px 10px 10px; ' +
            'text-align: center; ' +
            'font-family: Leckerli One, Ubuntu, sans-serif!important;' +
            'font-size: 30px; ' +
            '} ' +
            '.cepheusTop:before { ' +
            'content: ""; ' +
            'border-top: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            'bottom: -31px; ' +
            '} ' +
            '.cepheusTop:after { ' +
            'content: ""; ' +
            'border-top: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            'right: 0; ' +
            'bottom: -31px; ' +
            '} ' +
            '.cepheusCenter { ' +
            'position: relative; ' +
            'margin: 0 auto; ' +
            'background-color: #e3e3e3; ' +
            'width: 310px; ' +
            'height: 320px; ' +
            'z-index: 999; ' +
            '} ' +
            '.cepheusCenter .Center_login { ' +
            'text-align: center; ' +
            'margin: 0 auto; ' +
            'width: 290px; ' +
            '} ' +
            '.cepheusCenter .Center_login img,  .cepheusCenter .Center_login input { ' +
            'margin-bottom: 10px; ' +
            'font-family: "Geo", sans-serif; ' +
            '} ' +
            '.cepheusCenter .Center_login input[name="username"], .cepheusCenter .Center_login input[name="password"] { ' +
            'width: 270px; ' +
            'border: 1px solid #333333; ' +
            'padding: 0 10px;' +
            'font-size: 20px; ' +
            'height: 40px;' +
            'cursor: inherit;' +
            '}' +
            '.cepheusCenter .Center_login input[name="login"] { ' +
            'border-radius: 50%; ' +
            'width: 34px; ' +
            'height: 34px; ' +
            'border: 4px solid #51aada; ' +
            'background: transparent; ' +
            'position: relative; ' +
            'cursor: pointer; ' +
            '} ' +
            '.btn_entrar { ' +
            'text-align: center; ' +
            'margin-top: 10px; ' +
            '} ' +
            '.btn_entrar:before { ' +
            'content: ""; ' +
            'border-bottom: 10px solid transparent; ' +
            'border-top: 10px solid transparent; ' +
            'border-left: 10px solid #51aada; ' +
            'position: absolute; ' +
            'margin: 7px 16px; ' +
            '} ' +
            '.cepheusFooter { ' +
            'background-color: #333333; ' +
            'width: 340px; ' +
            'height: 25px; ' +
            'position: relative; ' +
            'text-align: center; ' +
            '} ' +
            '.cepheusFooter:before { ' +
            'content: ""; ' +
            'border-bottom: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            'left: 0; ' +
            'bottom: 25px; ' +
            '} ' +
            '.cepheusFooter:after { ' +
            'content: ""; ' +
            'border-bottom: 25px solid #212121; ' +
            'border-left: 25px solid transparent; ' +
            'border-right: 25px solid transparent; ' +
            'position: absolute; ' +
            '  right: 0; ' +
            '  bottom: 25px; ' +
            '} ' +
            '.cepheusFooter a { ' +
            '  font-size: 20px; ' +
            '  color: #fff; ' +
            '  text-decoration: none; ' +
            'font-family: "Geo", sans-serif; ' +
            '} ' +
            '.cepheusFooter a span { ' +
            '  font-family: arial, sans-serif; ' +
            '  color: #51aada; ' +
            '  margin-right: 5px; ' +
            '} ' +
            ' .Top_logo:after { ' +
            '  content:"X"; ' +
            '  position:absolute; ' +
            '  margin-top:-30px; ' +
            '  margin-left:10px; ' +
            '} ' +
            '<style>'                 
        }
        );
        $('body').append(
            '<link href="https://fonts.googleapis.com/css?family=Geo:400,400italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">' +
            '<div class="cepheusLogin" style="display:none">' +
            '<div class="cepheusTop">' +
            '<div class="Top_logo">Brasil Play Ultimate</div>' +
            '</div>' +
            '<div class="cepheusCenter">' +
            '<div class="Center_login">' +
            '<img src="http://pre12.deviantart.net/86b6/th/pre/f/2014/270/9/1/trevor_phillips_render_2_by_squizcat-d80pu4t.png" />' +
            '<form action="/login.forum" class="form-login" method="post">' +
            '<input name="username" type="text" required placeholder="Nome" />' +
            '<input name="password" type="password" required placeholder="Senha" /><br />' +
            '<a href="/profile?mode=sendpassword">Recuperar minha senha</a>' +
            '<div class="btn_entrar">' +
            '<input name="login" type="submit" value="" />' +
            '</div>' +
            '</form>' +
            '</div>' +
            '</div>' +
            '<div class="cepheusFooter"> <a href="/register"><span>+</span>Criar Conta</a></div>' +
            '</div>'

        );
    } else {
        jQuery('body').append('');
    };
});

Código do X:
Código:

(function ($) {
 
    $(function () {
      var $topLink = $('<a>', {
        href: 'javascript:void(0)',
        text: 'X',
        class: 'popupClose'
        }).appendTo('.Top_logo');
 
      $topLink.on('click', function () {
        $('.cepheusLogin').slideToggle();
        });
    });
}(jQuery));
Certo? Continua sem abrir a caixa desta vez...
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por Luiz em 22/03/17, 03:47 pm

O senhor pode deixar o código ativo para que eu possa realizar uns testes?
Será rápido...

Até mais. Piscada
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll em 22/03/17, 04:58 pm

Está ativo nesse fórum : http://testebpu.forumeiros.com/
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll em 23/03/17, 08:30 pm

UP
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll em 24/03/17, 09:10 pm

UP
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll em 26/03/17, 12:00 am

UP
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por Luiz em 27/03/17, 03:12 pm

Tente esse:
Código:
/**
* Title: Caixa de Login
* Créditos: Cepheus
* Copyright: (C) 2016 Cepheus
* Site: bestskins.net
*/
(function ($) {
  $(function () {
   
    $('a[href="/login"]').on('click', function (e) {
      $('.cepheusLogin').fadeIn();
      e.preventDefault();
    });

    $('#cpClosePp').on('click', function () {
      $('.cepheusLogin').remove();
    });
   
    $('body').append(
      '<style>' +
      '::-webkit-input-placeholder {' +
      'color:#333333; ' +
      '}' +
      ':-moz-placeholder {' +
      'color:#333333; ' +
      '}' +
      '::-moz-placeholder {' +
      'color:#333333; ' +
      '}' +
      ':-ms-input-placeholder { ' +
      'color:#333333; ' +
      '}' +
      '.cepheusLogin { ' +
      'margin: 0 auto; ' +
      'width: 340px; ' +
      'font-family: "Geo", sans-serif; ' +
      'position: fixed; ' +
      'left: 0; ' +
      'right: 0; ' +
      'top: 20%; ' +
      '} ' +
      '.cepheusCenter .Center_login img, .cepheusCenter .Center_login input {  ' +
      ' width:70px; ' +
      '} ' +
      '.cepheusTop { ' +
      'background-color: #333333; ' +
      'border-bottom: 6px solid #51aada; ' +
      'width: 340px; ' +
      'height: 75px; ' +
      'position: relative; ' +
      'color: #fff; ' +
      '} ' +
      '.Top_logo { ' +
      'margin: 0 auto; ' +
      'width: 290px; ' +
      'padding: 15px 10px 10px 10px; ' +
      'text-align: center; ' +
      'font-family: Leckerli One, Ubuntu, sans-serif!important;' +
      'font-size: 30px; ' +
      '} ' +
      '.cepheusTop:before { ' +
      'content: ""; ' +
      'border-top: 25px solid #212121; ' +
      'border-left: 25px solid transparent; ' +
      'border-right: 25px solid transparent; ' +
      'position: absolute; ' +
      'bottom: -31px; ' +
      '} ' +
      '.cepheusTop:after { ' +
      'content: ""; ' +
      'border-top: 25px solid #212121; ' +
      'border-left: 25px solid transparent; ' +
      'border-right: 25px solid transparent; ' +
      'position: absolute; ' +
      'right: 0; ' +
      'bottom: -31px; ' +
      '} ' +
      '.cepheusCenter { ' +
      'position: relative; ' +
      'margin: 0 auto; ' +
      'background-color: #e3e3e3; ' +
      'width: 310px; ' +
      'height: 320px; ' +
      'z-index: 999; ' +
      '} ' +
      '.cepheusCenter .Center_login { ' +
      'text-align: center; ' +
      'margin: 0 auto; ' +
      'width: 290px; ' +
      '} ' +
      '.cepheusCenter .Center_login img,  .cepheusCenter .Center_login input { ' +
      'margin-bottom: 10px; ' +
      'font-family: "Geo", sans-serif; ' +
      '} ' +
      '.cepheusCenter .Center_login input[name="username"], .cepheusCenter .Center_login input[name="password"] { ' +
      'width: 270px; ' +
      'border: 1px solid #333333; ' +
      'padding: 0 10px;' +
      'font-size: 20px; ' +
      'height: 40px;' +
      'cursor: inherit;' +
      '}' +
      '.cepheusCenter .Center_login input[name="login"] { ' +
      'border-radius: 50%; ' +
      'width: 34px; ' +
      'height: 34px; ' +
      'border: 4px solid #51aada; ' +
      'background: transparent; ' +
      'position: relative; ' +
      'cursor: pointer; ' +
      '} ' +
      '.btn_entrar { ' +
      'text-align: center; ' +
      'margin-top: 10px; ' +
      '} ' +
      '.btn_entrar:before { ' +
      'content: ""; ' +
      'border-bottom: 10px solid transparent; ' +
      'border-top: 10px solid transparent; ' +
      'border-left: 10px solid #51aada; ' +
      'position: absolute; ' +
      'margin: 7px 16px; ' +
      '} ' +
      '.cepheusFooter { ' +
      'background-color: #333333; ' +
      'width: 340px; ' +
      'height: 25px; ' +
      'position: relative; ' +
      'text-align: center; ' +
      '} ' +
      '.cepheusFooter:before { ' +
      'content: ""; ' +
      'border-bottom: 25px solid #212121; ' +
      'border-left: 25px solid transparent; ' +
      'border-right: 25px solid transparent; ' +
      'position: absolute; ' +
      'left: 0; ' +
      'bottom: 25px; ' +
      '} ' +
      '.cepheusFooter:after { ' +
      'content: ""; ' +
      'border-bottom: 25px solid #212121; ' +
      'border-left: 25px solid transparent; ' +
      'border-right: 25px solid transparent; ' +
      'position: absolute; ' +
      '  right: 0; ' +
      '  bottom: 25px; ' +
      '} ' +
      '.cepheusFooter a { ' +
      '  font-size: 20px; ' +
      '  color: #fff; ' +
      '  text-decoration: none; ' +
      'font-family: "Geo", sans-serif; ' +
      '} ' +
      '.cepheusFooter a span { ' +
      '  font-family: arial, sans-serif; ' +
      '  color: #51aada; ' +
      '  margin-right: 5px; ' +
      '} ' +
      ' .Top_logo:after { ' +
      '  content:"X"; ' +
      '  position:absolute; ' +
      '  margin-top:-30px; ' +
      '  margin-left:10px; ' +
      '} ' +
      '.Top_logo:after {content: none!important;}' +
      'span#cpClosePp {position: absolute;top: -40px;right: -5px;font-size: 50px;z-index: 999999;}' +
      'span#cpClosePp:hover {color: #39c!important;}' +
      '<style>'                 
    );
   
    $('body').append(
      '<link href="https://fonts.googleapis.com/css?family=Geo:400,400italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">' +
      '<div class="cepheusLogin" style="display:none">' +
      '<div class="cepheusTop">' +
      '<div class="Top_logo">Brasil Play Ultimate<span id="cpClosePp">x</span></div>' +
      '</div>' +
      '<div class="cepheusCenter">' +
      '<div class="Center_login">' +
      '<img src="http://pre12.deviantart.net/86b6/th/pre/f/2014/270/9/1/trevor_phillips_render_2_by_squizcat-d80pu4t.png" />' +
      '<form action="/login.forum" class="form-login" method="post">' +
      '<input name="username" type="text" required placeholder="Nome" />' +
      '<input name="password" type="password" required placeholder="Senha" /><br />' +
      '<a href="/profile?mode=sendpassword">Recuperar minha senha</a>' +
      '<div class="btn_entrar">' +
      '<input name="login" type="submit" value="" />' +
      '</div>' +
      '</form>' +
      '</div>' +
      '</div>' +
      '<div class="cepheusFooter"> <a href="/register"><span>+</span>Criar Conta</a></div>' +
      '</div>'
    );

  });
}(jQuery));

Até.
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll em 27/03/17, 07:34 pm

Resultou mas com um problema:
http://i.imgur.com/AdCvqOd.png
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por Luiz em 27/03/17, 07:42 pm

Adicione este código, ao final de sua CSS:
Código:
span#cpClosePp {
  visibility: hidden!important;
}

a.popupClose {
  position: absolute;
  top: -20px;
  right: -8px;
  font-family: Leckerli One, Ubuntu, sans-serif!important;
  color: #fff;
}

Até mais.
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll em 27/03/17, 07:52 pm

Perfeito Kyo, muito obrigado, pode fechar o tópico Feliz
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1567
Pontos Ativos : 2126

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

Resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por Luiz em 27/03/17, 07:54 pm

Oxe, eu não sou o Kyo não, @iScroll ! Rindo

---
Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

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