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

4 participantes

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

Tópico resolvido Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll 13.03.17 18:51

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: https://i.imgur.com/rg3qGA3.png

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

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por while 13.03.17 19:51

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.
while

while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll 13.03.17 20:05

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
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll 14.03.17 21:48

UP
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por while 15.03.17 17:25

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.
while

while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll 15.03.17 17:39

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('');
    };
});
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por while 15.03.17 18:02

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('');
    };
});
while

while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll 15.03.17 19:31

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?
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll 16.03.17 21:19

UP
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll 17.03.17 22:07

UP
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll 19.03.17 2:04

UP
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll 20.03.17 14:27

UP
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por Shek 20.03.17 16:01

Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll 20.03.17 16:19

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

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por while 20.03.17 16:40

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('');
    };
});
while

while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll 20.03.17 16:50

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 ?
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll 21.03.17 23:27

UP
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por Luiz 21.03.17 23:31

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.
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll 21.03.17 23:35

Visto que o código estava causando isso nos meus tópicos: https://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
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por Luiz 21.03.17 23:46

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

Até mais.
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll 21.03.17 23:57

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.
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por Luiz 21.03.17 23:59

Ainda não está funcionando.
:s

Até mais. Tchau
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll 22.03.17 1:22

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

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por Luiz 22.03.17 1:28

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
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll 22.03.17 1:37

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

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta
  • 0

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por Luiz 22.03.17 17:16

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.
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll 22.03.17 18:43

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...
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por Luiz 22.03.17 18:47

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

Até mais. Piscada
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll 22.03.17 19:58

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

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll 23.03.17 23:30

UP
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll 25.03.17 0:10

UP
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll 26.03.17 4:00

UP
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por Luiz 27.03.17 19:12

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é.
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll 27.03.17 23:34

Resultou mas com um problema:
https://i.imgur.com/AdCvqOd.png
iScroll

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por Luiz 27.03.17 23:42

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.
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por iScroll 27.03.17 23:52

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

iScroll
Super Membro

Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

http://ultimatelife.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como criar caixa de para conectar-se ao clicar em Login?

Mensagem por Luiz 27.03.17 23:54

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

---
Como criar caixa de para conectar-se ao clicar em Login? Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

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

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

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