pop-up de conexão

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

Resolvido pop-up de conexão

Mensagem por Uatyla em 18/05/14, 06:22 pm

  • Descrição:
Olá senhores!

Eu gostaria de saber si é possível adicionar essa pop-up, sem ser por widget, como o fórum já tem a função de pop-up, não quero gasta um slot dos widget.

quero que a pop-up fique assim


o código que uso nela e esse, porém como widget.

Código:
<div id="show">
     
    <div id="fade">
         
    </div>
     
    <div class="popup_block">
         
        <div class="popup">
             <a href="#" id="popupclose"><img src="http://i38.servimg.com/u/f38/17/31/71/58/icon_c10.png" class="cntrl" title="Fechar" /></a>
            <h3>
                 Bem Vindo ao Fórum <strong>Vida de Aquarista</strong>
            </h3>
             
            <p>
                 <span style="color: rgb(0, 0, 0);">Para poder utilizar todos os atributos deste fórum, será necessário que você se registre-se em nosso fórum.<br /><br />O cadastro é <strong>gratuito </strong>e leva pouco tempo para ser preenchido.<br />Durante o cadastro, será requerida uma conta de e-mail válida, um login e uma senha. Todos os campos deveram ser preenchidos, para ter a tua conta!</span><br />
            </p><br /><br />
            <center>
                 <a href="/register" title="Cadastre-se" style="text-decoration: none;color: black;font-weight: bold;font-family: cursive;font-size: 25px;">Registre-se Agora!</a>
            </center>
             
            <p>
                 
            </p><br />
            <form action="/login" method="post" name="form_login" id="login">
                 
                <p style="text-align: left;text-decoration: none;position: relative;top: -10%;margin-left: 4%;">
                     <a style="text-decoration: none" href="/login">Já sou cadrastrado!</a>
                </p>
                 
                <table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
                     
                    <tbody>
                         
                        <tr>
                             
                            <td style="width: 100%;" align="right">
                                 
                                <div align="center">
                                     <strong>Usuário:</strong> <input id="ips_username" class="input_text" name="username" size="15" tabindex="1" type="text" /> <strong>Senha:</strong> <input id="ips_password" class="input_text" name="password" size="15" tabindex="2" type="password" /> <input name="login" class="input_submit" value="Logar" type="submit" />
                                </div>
                                 
                            </td>
                             
                        </tr>
                         
                        <tr>
                             
                            <td>
                                 
                            </td>
                             
                        </tr>
                         
                        <tr>
                             
                        </tr>
                         
                    </tbody>
                     
                </table>
                 
            </form>
             
        </div>
         
    </div>
     
</div>
 <script type="text/javascript">
    jQuery('#popupclose').click(function(){
    jQuery('#show').fadeOut('fast');return false;
    });
    if (location.pathname == '/login') {
    jQuery('#show').css('display','none');
    }
    if (location.pathname == '/register') {
    jQuery('#show').css('display','none');
    }
    </script> <style type="text/css">
    #fade {
    background: #000;
    position: fixed;
    width: 100%;
    height: 100%;
    filter:alpha(opacity=80);
    opacity: .30;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    /*--IE 8 Transparency--*/
    left: 0;
    top: 0;
    z-index: 10;
    }
    #show {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    }
    .popup_block {
    background-color: #33CCFF;
   background-position: 60% 30%;
    padding: 10px 20px;
    border: 10px solid #fff;
    float: left;
    width: 480px;
    position: fixed;
    top: 20%;
    left: 50%;
    margin: 0 0 0 -250px;
    z-index: 100;
    }
    .popup_block .popup {
    float: left;
    width: 100%;
    background: #fff;
    margin: 10px 0;
    padding: 10px 0;
    border: 1px solid #bbb;
    }
    .popup h3 {
    margin: 0 0 20px;
    padding: 6px 11px;
    border-bottom: 1px solid #bbb;
    font-size: 1.5em;
    font-weight: normal;
    }
    .popup p {
    padding: 5px 10px;
    margin: 5px 0;
    }
   .popup {
      background: #FFFFFF url(http://s5.postimg.org/szrnw3jdz/20pct.png) no-repeat !important;
   }
    .popup img.cntrl {
    position: absolute;
    right: -20px;
    top: -20px;
    }
    .input_text {
    padding: 4px;
    border-width: 1px;
    border-style: solid;
    border-color: #848484 #C1C1C1 #E1E1E1 #C1C1C1;
    background: white;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    }
    .input_submit {
    -moz-border-radius: 3px;
    -moz-box-shadow: inset 0 1px 0 0 #5c5c5c, 0 2px 3px rgba(0,0,0,0.2);
    -webkit-border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 0 0 #5C5C5C, 0 2px 3px rgba(0, 0, 0, 0.2);
    background: #212121 url(http://i78.servimg.com/u/f78/17/31/71/58/topic_10.png) repeat-x top;
    border-color: #212121;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    box-shadow: inset 0 1px 0 0 #5C5C5C, 0 2px 3px rgba(0, 0, 0, 0.2);
    color: white;
    cursor: pointer;
    padding: 4px 10px;
    text-decoration: none;
    }
    </style>

tem como deixa o pop-up assim sem necessidade de usar um widget?

  • Informações:
Fórum:http://vidadeaquarista.forumeiros.comVersão:PHPBB3
Tipo:Pedido de códigoTags:pop-up,conexão



Última edição por uatyla em 23/05/14, 09:10 am, editado 1 vez(es)
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Resolvido Re: pop-up de conexão

Mensagem por Superbomber em 18/05/14, 06:26 pm

A forumeiros já vem com um pop-up desses. Para ativa-lo vá em Painel de Controle>Geral>Fórum>Configuração
Na parte Pop-Up de conexão, em Ativar marque sim E personalize como quiser.



Última edição por Superbomber em 18/05/14, 06:29 pm, editado 1 vez(es)

Superbomber
Nível 9

Masculino
Inscrito dia : 28/04/2014
Mensagens : 238
Pontos Ativos : 328

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

Resolvido Re: pop-up de conexão

Mensagem por iPrompt em 18/05/14, 06:28 pm

Olá,

Já tentou adicionar este código em

Painel de Controle Seta Geral Seta Fórum Seta Configuração Seta Pop-up de conexão

Adiciona o código em "Mensagem :", caso já tenha tentado por favor deixa ele ativo

Até
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

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

Resolvido Re: pop-up de conexão

Mensagem por Uatyla em 18/05/14, 06:39 pm

Não esse código só funciona no widget, quero fazer com que ele funcione sem ser widget.

testei um código para pop-up, que encontrei aqui mesmo no fórum, achei até legal, porém não curto fundos escuros, pois dificulta a leitura, quero adiciona a seguinte imagem de fundo http://s5.postimg.org/szrnw3jdz/20pct.png

Código:
    input#login_popup_close {
    padding: 8px 8px!important;
    background: #00CC99;
    color: #FFFFFF;
    border: 1px solid #474747!important;
    border-radius: 3px;
    font-size: 11px;
    box-shadow: 1px 1px 5px #333131;
    }

    div#login_popup_buttons input.button1 {
    padding: 8px 8px!important;
    background: #00CC99;
    color: #FFFFFF;
    border: 1px solid #474747!important;
    border-radius: 3px;
    font-size: 11px;
    box-shadow: 1px 1px 5px #333131;
    }
    div#login_popup_buttons input.button1:hover {
    color: #008563!important;
    }
    #login_popup {
    font-size: 11px!important;
    background-color: #2D2D2D;
    border: 2px solid #049987;
    color: #FFF;
    border-radius: 10px 10px 0px 0px;
    box-shadow: 1px 1px 5px #000;
    padding: 6px;
    position: absolute;
    z-index: 999;
    }
    #login_popup .h3 {
    color: #DBDBDB!important;
    padding: 15px 15px 20px!important;
    margin: 5px 0px 16px!important;
    border: none!important;
    box-shadow: 1px 1px 3px #141414;
    font-style: italic;
    }

avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista
  • 0

Resolvido Re: pop-up de conexão

Mensagem por iPrompt em 18/05/14, 06:49 pm

Olá,

Adiciona este código na sua Folha de estilo CSS

Código:
#login_popup {
background: white url(http://s5.postimg.org/szrnw3jdz/20pct.png)!important;
color: black!important;
}

Até
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

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

Resolvido Re: pop-up de conexão

Mensagem por Uatyla em 18/05/14, 07:01 pm

A questão de logar no próprio pop-up, é possível? também queria tirar esse não exibir mais!
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista
  • 0

Resolvido Re: pop-up de conexão

Mensagem por iPrompt em 18/05/14, 07:03 pm

Olá,

Adiciona este código na sua Folha de estilo CSS

Código:
input#login_popup_close {
display: none!important;
}

Até
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

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

Resolvido Re: pop-up de conexão

Mensagem por Uatyla em 18/05/14, 07:15 pm

Colega, tanto a imagem quanto, retirar a opção não exibir mais funcionou.

pop-up 75 concluída, você acha que da para por login e senha? Ah! outra coisa, o titulo ficou apagado, em que lugar do código faço essa alteração?
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista
  • 0

Resolvido Re: pop-up de conexão

Mensagem por iPrompt em 18/05/14, 07:20 pm

Olá,

Não entendi esse sistema de login e senha que deseja

Para alterar a cor e só adicionar este código

Código:
#login_popup .h3 {
color: black!important;
}

Caso não funcione e só procurar na sua Folha de estilo CSS por "#login_popup .h3"" e então alterar o "color:" por este "color: black!important;"

Até
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

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

Resolvido Re: pop-up de conexão

Mensagem por Uatyla em 18/05/14, 07:26 pm

Nesta parte você entenderá! Na parti Usuário & Senha.
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Resolvido Re: pop-up de conexão

Mensagem por iPrompt em 18/05/14, 07:28 pm

Olá,

Já tentou pegar a parte de Usuários e Senha do antigo código e por lá na Mensagem do Poup e depois e só retirar os botões Login e Registrar

Até
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

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

Resolvido Re: pop-up de conexão

Mensagem por Uatyla em 18/05/14, 07:33 pm

Não funciona, tem que ser algo no css! já tentei porem não acc códigos no pop-up
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Resolvido Re: pop-up de conexão

Mensagem por iPrompt em 18/05/14, 07:37 pm

Olá,

Não sei se vai ser possível através de CSS oque você deseja mais vou ver se acho um jeito aqui, mais acho que não irei achar

Até
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

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

Resolvido Re: pop-up de conexão

Mensagem por Uatyla em 18/05/14, 07:45 pm

ok!
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Resolvido Re: pop-up de conexão

Mensagem por Uatyla em 23/05/14, 09:10 am

Por hora vou deixa o tópico como resolvido OK!
Pois atende minhas necessidades, mais vamos tenta implementar a função depois.
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

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