Fórum dos Fóruns

Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

Criar tela de Login em página HTML

4 participantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode

Ir para baixo

Tópico resolvido Criar tela de Login em página HTML

Mensagem por GeonTavares 30.05.14 8:36

  • Descrição:
Queria fazer fazer uma caixa de login e por baixo uma imagem. Existe essa possibilidade?

Algo parecido com isso.

http://info.abril.com.br/noticias/blogs/download-da-hora/files/2011/09/fbrefresh-1.jpg
  • Informações:
Fórum:www.semperviri.comVersão:PHPBB3
Tipo:Pedido de códigoTags:Criar,Login,página


Última edição por GeonTavares em 31.05.14 19:04, editado 1 vez(es)
GeonTavares
GeonTavares
*

Membro desde : 28/05/2014
Mensagens : 37
Pontos : 73

http://clubedoshomens.forumbrasil.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar tela de Login em página HTML

Mensagem por waghcwb 30.05.14 17:33

Olá,

Sim é possível, mas me de umas informações aqui...

Isso ai é uma página completa certo? Ou só um pop-up? Ele aparece logo ao entrar no fórum (quando o usuário estiver desconectado) ou somente ao clicar no botão de login?

E qual imagem você gostaria de por no fundo?

Abraços..
waghcwb
waghcwb
Membro

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

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar tela de Login em página HTML

Mensagem por TappedOut 30.05.14 18:05

-wagh, suponho que seja ao entrar no forum e estiver desconectado estar nesta pagina.
TappedOut
TappedOut
Membro

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

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar tela de Login em página HTML

Mensagem por GeonTavares 30.05.14 23:43

-wagh- escreveu:Olá,

Sim é possível, mas me de umas informações aqui...

Isso ai é uma página completa certo? Ou só um pop-up? Ele aparece logo ao entrar no fórum (quando o usuário estiver desconectado) ou somente ao clicar no botão de login?

E qual imagem você gostaria de por no fundo?

Abraços..

Seria quando estivesse desconectado. Quando conectasse ele iria para o fórum normalmente. Só quando está deslogado mesmo. Eu hospedei a imagem que quero no meu servidor. posso deixar o link dela? Ta em grande qualidade. Quero que ele seja o fundo da página sabe. Não um pop-up. Se for mais facil um pop-up.. um que ocupe toda a tela. Mas preferencialmente, queria uma página html própria para isso.
GeonTavares
GeonTavares
*

Membro desde : 28/05/2014
Mensagens : 37
Pontos : 73

http://clubedoshomens.forumbrasil.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar tela de Login em página HTML

Mensagem por Shek 31.05.14 2:10

Qual é a URL da página que mostra na imagem?
Shek
Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar tela de Login em página HTML

Mensagem por GeonTavares 31.05.14 3:50

Ah, aquilo eu achei no google images, não sei. É de uma extenção do Google Chrome eu acho.
GeonTavares
GeonTavares
*

Membro desde : 28/05/2014
Mensagens : 37
Pontos : 73

http://clubedoshomens.forumbrasil.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar tela de Login em página HTML

Mensagem por waghcwb 31.05.14 15:58

Olá,

Então vamos lá..

Criei um baseado neste que me mandou, ok? Qualquer alteração me avise..

Preview:
http://punbbteste.forumeiros.com/h12-

Código HTML
Código:
<!DOCTYPE html>
<html>
<head>
    <title>Painel de login</title>
    <meta charset="utf-8" />
    <style type="text/css">
    @font-face {
      font-family: 'Sigmar One';
      font-style: normal;
      font-weight: 400;
      src: local('Sigmar One'), local('SigmarOne'), url(http://themes.googleusercontent.com/static/fonts/sigmarone/v4/aRAZJs6CY7SV6eSg6Wx4jxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
    }
    body{
        margin: 0;
        font: 14px Lucida sans;
        background: #333 url('http://i.imgur.com/Ggzvfr8.jpg') no-repeat;
        -webkit-background-size: cover;
          -moz-background-size: cover;
            -o-background-size: cover;
                background-size: cover;
        color: #fff;
    }
    a, a:active, a:focus{
        text-decoration: none;
        color: #fafafa;
    }
    #logo{
        font: 30px 'Sigmar One';
        text-align: center;
        padding: 0;
        margin: 5em 0 0;
        text-shadow: rgba(0,0,0,1) 0 0 5px;
    }
    #wrap{
        margin: 0 auto;
        max-width: 50%;
        background: rgba(255,255,255,.3);
        border-radius: 5px;
        text-shadow: rgba(0,0,0,.5) 1px 1px 0;
        box-shadow: rgba(0,0,0,.2) 0 0 3px;
        text-align: center;
        padding: 3em 1em;
    }
    hr{
        margin: 1em;
        border: 0;
        border-top: 1px rgba(0,0,0,.2) solid;
        border-bottom: 1px rgba(255,255,255,.2) solid;
    }
    </style>
</head>
<body>
   
    <form action="/login?">
        <p id="logo">forumname</p>
        <div id="wrap">
            <label for="username">
                Nome:
                <input name="username" type="text" />
            </label>

            <label for="password">
                Senha:
                <input name="password" type="password" />
            </label>

            <label for="login">
                <input name="login" type="submit" value="Login" />
            </label>
            <hr>
            <label for="sendpassword">
                <a href="/profile?mode=sendpassword">Esqueci minha senha</a>
            </label>

            <label for="autologin">
                <input name="autologin" id="autologin" tabindex="4" checked="checked" class="radio" type="checkbox" /> Conexão automática
            </label>
        </div>
    </form>
   
</body>
</html>

Para alterar a fonte do logotipo, busque na internet sobre a propriedade @font-face, aquela eu peguei diretamente no Google Fonts...

Sua intenção é que ao usuário clicar num link para a página de login seja redirecionado para essa página ai né? Sendo assim vamos ter que recorrer ao Javascript...

Crie um Javascript com investimento em todas as páginas com este conteúdo
Código:
$(function(){
  $('a[href*="/login"]').attr('href','hID-');
});

Note o hID-

Mude o ID para a página que você criou...


Resulta?

Abraços...
waghcwb
waghcwb
Membro

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

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar tela de Login em página HTML

Mensagem por TappedOut 31.05.14 16:24

wagh esta página que passou a ele, quando vai deslogar ele vai pra pagina HTML, arruma ai pra ele ja antes que ele volte se puder
TappedOut
TappedOut
Membro

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

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar tela de Login em página HTML

Mensagem por waghcwb 31.05.14 16:34

Triste 

Não me atentei a este detalhe x.x

Obrigado pelo aviso..

Troque o Javascript por este:
Código:
$(function(){
    $('a[href="/login"]').attr('href','hID-');
});
waghcwb
waghcwb
Membro

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

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar tela de Login em página HTML

Mensagem por TappedOut 31.05.14 16:41

Amigo, agora quando está deslogado não vai pra pagina html, suponho que pra arrumar o logout teria de fazer outro JS e seria separado

Achei a solução mais teria de mudar o cod para phpBB3 pois este é para PunBB
Código:
//<![CDATA[
$(function () {
    $('#user_navigation li a[href="/login?logout"]').attr('href', $('#logout').attr('href'));
});
//]]>
TappedOut
TappedOut
Membro

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

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar tela de Login em página HTML

Mensagem por waghcwb 31.05.14 16:53

Estranho... Aqui está funcionando perfeitamente...
Criar tela de Login em página HTML D72cIZ6

Vamos esperar o usuário verificar se da esse bug para ele também, ok?

Se der pensamos em alguma solução...

Abraços...
waghcwb
waghcwb
Membro

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

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar tela de Login em página HTML

Mensagem por TappedOut 31.05.14 16:55

Claro, abraços. (Meu forum é a msm versão dele)
TappedOut
TappedOut
Membro

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

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar tela de Login em página HTML

Mensagem por GeonTavares 31.05.14 18:25

Simplesmente perfeito senhores, superou minhas expectativas. Só tem duas coisinhas que queria modificar.

Eu queria saber, se tem como também colocar a opção de Cadastre-se. e outra. A intenção não era substituir o link de login no forum, mas sim ela ser a página principal. Eu tentei por ela como principal, porem n tive sucesso pois ela n possui um link para o forumeiros.

Vocês conseguem resolver issso?
GeonTavares
GeonTavares
*

Membro desde : 28/05/2014
Mensagens : 37
Pontos : 73

http://clubedoshomens.forumbrasil.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar tela de Login em página HTML

Mensagem por TappedOut 31.05.14 18:41

acrescente isto no final da pagina HTML
Código:
<center><a href="http://www.forumeiros.com/" target="_blank">http://www.forumeiros.com/</a></center>
E tente botar de pagina principal denovo.
TappedOut
TappedOut
Membro

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

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar tela de Login em página HTML

Mensagem por waghcwb 31.05.14 18:55

Olá,

Com o botão de register substitua o conteúdo por este:
Código:
    <!DOCTYPE html>
    <html>
    <head>
        <title>Painel de login</title>
        <meta charset="utf-8" />
        <style type="text/css">
        @font-face {
          font-family: 'Sigmar One';
          font-style: normal;
          font-weight: 400;
          src: local('Sigmar One'), local('SigmarOne'), url(http://themes.googleusercontent.com/static/fonts/sigmarone/v4/aRAZJs6CY7SV6eSg6Wx4jxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
        }
        body{
            margin: 0;
            font: 14px Lucida sans;
            background: #333 url('http://i.imgur.com/Ggzvfr8.jpg') no-repeat;
            -webkit-background-size: cover;
              -moz-background-size: cover;
                -o-background-size: cover;
                    background-size: cover;
            color: #fff;
        }
        a, a:active, a:focus{
            text-decoration: none;
            color: #fafafa;
        }
        #logo{
            font: 30px 'Sigmar One';
            text-align: center;
            padding: 0;
            margin: 5em 0 0;
            text-shadow: rgba(0,0,0,1) 0 0 5px;
        }
        form{
            margin: 0 auto;
            max-width: 50%;
        }
        #wrap{
            width: 100%;
            background: rgba(255,255,255,.3);
            border-radius: 5px;
            text-shadow: rgba(0,0,0,.5) 1px 1px 0;
            box-shadow: rgba(0,0,0,.2) 0 0 3px;
            text-align: center;
            padding: 3em 1em;
        }
        hr{
            margin: 1em;
            border: 0;
            border-top: 1px rgba(0,0,0,.2) solid;
            border-bottom: 1px rgba(255,255,255,.2) solid;
        }
        #register{
            background: url('http://imgur.com/EK2ZA9X.png') repeat-x scroll 0px 0px #8FBE5F;
            box-shadow: 0px 1px 0px 0px #ADD08B inset, 0px 2px 3px rgba(0, 0, 0, 0.2);
            text-shadow: 0px -1px 0px #474747;
            border: 1px solid #51842F;
            border-radius: 3px;
            color: #FFF;
            cursor: pointer;
            padding: .3em 5em;
            display: inline-block;
            margin: 0 2em 1em;
        }
        #copyrights{
            font-size: 13px;
        }
        </style>
    </head>
    <body>
     
        <form action="/login?">
            <p id="logo">forumname</p>
            <div id="wrap">
                <a id="register" href="/register">Registre-se</a>
                <hr>
                <label for="username">
                    Nome:
                    <input name="username" type="text" />
                </label>

                <label for="password">
                    Senha:
                    <input name="password" type="password" />
                </label>

                <label for="login">
                    <input name="login" type="submit" value="Login" />
                </label>
                <hr>
                <label for="sendpassword">
                    <a href="/profile?mode=sendpassword">Esqueci minha senha</a>
                </label>

                <label for="autologin">
                    <input name="autologin" id="autologin" tabindex="4" checked="checked" class="radio" type="checkbox" /> Conexão automática
                </label>
            </div>
            <a id="copyrights" href="www.forumeiros.com">Página hospedada na Forumeiros</a>
        </form>
     
    </body>
    </html>

E para deixar como página inicial é só marcar a opção para deixar como página inicial, você não estava conseguindo pois não havia nenhum link para a Forumeiros...
waghcwb
waghcwb
Membro

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

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar tela de Login em página HTML

Mensagem por GeonTavares 31.05.14 19:03

Ficou perfeito pessoal!

Podem checar! Muito bom!

http://www.semperviri.com/
GeonTavares
GeonTavares
*

Membro desde : 28/05/2014
Mensagens : 37
Pontos : 73

http://clubedoshomens.forumbrasil.net/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode

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