Caixa de login

Detalhes da questão

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

Descrição

Olá, gostaria de uma caixa de login bem semelhante à essa: http://prntscr.com/f7hmrb
Se possível gostaria que ela ficasse assim: http://prntscr.com/f7hnca , irei editar a mensagem lateral dela > entre algumas outras coisas.

Forum onde vi: http://1forum1.forumeiros.com/

Olá!

O senhor já leu essa regra?

O FdF existe para um propósito, fornecer suporte para seu fórum, e não, ser um fórum com uma equipe que plagia ou ataca fóruns. Este fórum é oficial por ser pacífico e benéfico para a Comunidade. Tópicos com intuito de plagiar, copiar coisas alheias sem autorização (principalmente dos fóruns oficiais ou deste mesmo) não serão atendidos pela equipe, e serão removidos sem aviso prévio.

Peço que o senhor modifique o seu pedido, caso contrário, ele será enviado para lixeira do fórum.
Havia me esquecido dessa regra, agora ela será aplicada com mais rigidez por minha parte. Espero que entenda.

o/

iScroll escreveu:

Detalhes da questão

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

Descrição

Olá, gostaria de uma caixa de login bem semelhante à essa: http://prntscr.com/f7hmrb

Veja, não pedi uma igual, mas sim semelhante e deixei claro que modificaria algumas coisas, os ícones por exemplo e a mensagem ao lado > mas já que insiste e respeito pois o fórum é de sua autoria e eu detestaria que fizessem o mesmo, então veja, eu fiz uma pelo Photoshop,
Veja : https://i.imgur.com/aImNGix.png
Fiz uma "base" do que quero, dá para se basear nela e fazer ? Os tons de cores eu irei personalizar sozinho para poupar seu trabalho.

UP

UP

UP

UP

UP

não vi essa caixa de login la!

Admin0 escreveu:não vi essa caixa de login la!

Olá meu caro, acho que seu post foi irrelevante já que aqui é uma área de ajuda e o senhor não ajudou em nada '-'..
No mais, veja:

[quote="iScroll"]

iScroll escreveu:

Detalhes da questão

eu fiz uma pelo Photoshop,
Veja : https://i.imgur.com/aImNGix.png

Eu fiz pelo photoshop para os admineiros e moderadeiros pegarem de exemplo para poder me ajudar.

[quote="iScroll"]

Admin0 escreveu:não vi essa caixa de login la!

Olá meu caro, acho que seu post foi irrelevante já que aqui é uma área de ajuda e o senhor não ajudou em nada '-'..
No mais, veja:

iScroll escreveu:

iScroll escreveu:

Detalhes da questão

eu fiz uma pelo Photoshop,
Veja : https://i.imgur.com/aImNGix.png

Eu fiz pelo photoshop para os admineiros e moderadeiros pegarem de exemplo para poder me ajudar.

Eu posso pegar qualquer código que eu queira, de um fórum
eu disse que eu não vi la, porque se eu tivesse visto teria pegado esse código para você
pensei que você no minimo ia mostrar onde ta isso.
passar bem

[quote="Admin0"]

iScroll escreveu:

Admin0 escreveu:não vi essa caixa de login la!

Olá meu caro, acho que seu post foi irrelevante já que aqui é uma área de ajuda e o senhor não ajudou em nada '-'..
No mais, veja:

iScroll escreveu:

iScroll escreveu:

Detalhes da questão

eu fiz uma pelo Photoshop,
Veja : https://i.imgur.com/aImNGix.png

Eu fiz pelo photoshop para os admineiros e moderadeiros pegarem de exemplo para poder me ajudar.

Eu posso pegar qualquer código que eu queira, de um fórum
eu disse que eu não vi la, porque se eu tivesse visto teria pegado esse código para você
pensei que você no minimo ia mostrar onde ta isso.
passar bem

iScroll escreveu:

Detalhes da questão

Forum onde vi: http://1forum1.forumeiros.com/

Acho que você não viu essa parte
Mas não quero desse jeito, queria do jeito que mandei lá que fiz pelo photoshop, justamente pelo fato de que se fosse copiar seria plágio

UP

UP

UP

UP

Up

up

Olá!

Vamos por parte. Primeiro, quero esclarecer que não consigo o mesmo design do exemplo da imagem, mas, consegui simular algo parecido. Você pode pegar este HTML e colocá-lo em uma página HTML para testar, ou aplicar em Visualização >> Geral >> Mensagem da página inicial

Código:

<div id="fundo"></div>
<div id="inboxShek" class="caixa" name="topic_109026">
   <table>
      <tr>
         <td class="bgWhite">
            <div class="blourpShek_box">
               <h2>Formulário de Login</h2>
               <p>Digite os dados da sua conta no formulário abaixo.</p>
                  <div class="groupsField">
                     <dd style="height: 30px;background: #efefef;"><span class="icon"><i class="fa fa-users"></i></span><input type="text" name="login" value="" placeholder="Usuário" class="inputbox"></dd>
                     <dd style="height: 30px;background: #efefef;"><span class="icon"><i class="fa fa-lock"></i></span><input type="text" name="senha" value="" placeholder="********" class="inputbox"></dd>
                     <br />
                     <dd><input class="buttonConn" type="submit" name="login" value="Conectar-me" ></dd>
                  </div>
            </div>
         </td>
         <td class="messagShek">
            <div class="boxShek" align="center">
               <div class="blourpShek_box">
                  <h2>CONEXÃO COM SUA CONTA</h2>
                  <p>Bem-vindo! Para participar das discussões, você precisa conectar-se usando um usuário e senha!</p>
                  <br />
                  <a href="#" class="buttonLink"><i class="fa fa-users"></i> Cadastrar-me!</a>
               </div>
            </div>
         </td>
      </tr>
   </table>
</div>

O CSS, se for usado na mensagem da página inicial, deve ser aplicado em Visualização >> Imagens e Cores > Cores > Folha de estilo CSS:

Código:

div#fundo {
    background: #000;
    position: fixed;
    width: 100%;
    top: 0px;
    height: 100%;
    left: 0px;
    z-index: 1;
    opacity: 0.7;
    cursor: pointer;
}

.blourpShek_box {padding: 10px;}

.caixa {
    height: auto;
    left: 25%;
    position: fixed;
    top: 10%;
    width: 50%;
    z-index: 2;
}
.groupsField dd {margin-bottom: 3px;}
span.icon {padding: 5px;}

.bgWhite {
   background: #fff;
   width: 50% !important;
}

.caixa .groupsField input {
    background: transparent;
    border: none;
    height: 25px;
}

.groupsField {
   padding: 10px;
}

.messagShek {
   background: #0076b1;
}

.messagShek h2, .buttonLink a {color: #fff;font-size: auto !important; border: none !important;}

.messagShek p {
   color: #fff;
   font-size: 15px;
}

.buttonLink {
   color: #fff !important;
    background: #12a3eb;
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
}

.buttonLink:hover {
   background: #105289 !important;
}

.buttonConn {
   color: #fff !important;
    background: #12a3eb !important;
    cursor: pointer !important;
    padding: 10px !important;
    border-radius: 5px !important;
   height: auto !important;
}

.buttonConn:hover {
   background: #105289 !important;
}

Caso contrário (em uma página HTML, por exemplo), deve ser aplicado entre as tags <style></style>.

Para funcionar bem, conforme a imagem abaixo, é recomendável que instale o Font Awesome (Clique aqui).

Veja se o design fica legal para você, e depois vamos ver se podemos dar luz ao jQuery para o botão com a caixa de login.

Perfeito crowley, o que tiver de editar nela eu edito eu mesmo. Pode deixar assim.
Bom... se bem entendi você fez o código em sentido para Poup certo? Eu gostaria mesmo a caixa quando o usuário clicasse no "Login". Se possível ficarei aguardando o JS.

Sim, foi como eu disse, vamos por parte para que eu não me perca. Se o layout foi aprovado, eu presumo que possamos começar os testes neste script:

Código:

$(document).ready(function(){
   var idCrowleys = '#fundo, #inboxShek';
   var menuCrow = 'a.mainmenu[href="/login"]:eq(0)';
   $(menuCrow).click(function() {
      event.preventDefault();
      $(idCrowleys).show("slow").delay(3000);
   });
   $('#fundo').click(function() {
      $(idCrowleys).hide();
   });
});

Você pode incluir ele em uma página Javascript em Módulos >> Html e Javascriot e depois acesse Gestão dos códigos javascript. Clique em Criar um novo javascript e em Investimento marque todas as páginas.

Para o próximo passo, você precisa incluir este código no seu CSS:

Código:

div#fundo, .caixa {display: none;}

Salve e veja se funciona.

Sem resultados, caro Crowley.

Para mim funciona. Você percebe que ele só vai funcionar se clicar no link login quando está desconectado, certo?!
Veja que funciona: https://nicedemo.forumeiros.com/

EDIT:

É claro... Não funcionará, pois, seu template foi editado. No script troca:

Código:

a.mainmenu[href="/login"]:eq(0)

Por:

Código:

a#user_link[href="/login"]:eq(0)

Salve e veja agora.

bom, percebi que desta vez simplesmente não apareceu nada.
Falta agora o CSS, certo?

Por favor, releia as mensagens anteriores atentamente. Primeiro, o HTML, depois o CSS, em seguida o jquery.

https://imgur.com/a/u00xO
Perfeito, dá pra centralizar mais ela ?
E percebi que há diferenças dela para esta: https://i.imgur.com/TPjB3PQ.jpg
Gostei bastante do layout proposto, poderia deixa-lo 100% igual ?

Acredito que não tenha lido o texto... Por favor, LEIA as mensagens anteriores,
por favor:

iScroll escreveu:Gostei bastante do layout proposto, poderia deixa-lo 100% igual ?

Shek Crowley escreveu:Primeiro, quero esclarecer que não consigo o mesmo design do exemplo da imagem...[..]

https://ajuda.forumeiros.com/t109026-caixa-de-login#765253

iScroll escreveu:Perfeito, dá pra centralizar mais ela ?

Sim! No CSS, você poderá encontrar:

Código:

.caixa {
    height: auto;
    left: 25%;
    position: fixed;
    top: 10%;
    width: 50%;
    z-index: 2;
}

Para mudar a centralização, altere o valor do left (mudar o 25 da porcentagem) para a o valor desejado e salve.

Até mais.

Certo, assim como essa linha abaixo do "formulário de login" : https://i.imgur.com/TPjB3PQ?r
Você consegueria por o mesmo na minha caixa? E a mesma coisa com "conexão com sua conta"?

Mas... O mesmo código que está no fórum de testes da imagem, é o mesmo que lhe passei. Se precisares mudar, é só pressionar o Ctrl + F no seu navegador e pesquisar pelo nome que deseja alterar. Se preferir, pode usar a caixa Buscar da área de texto do seu editor no fórum.

Mas a imagem não é igual.
Eu só queria adicionar uma linha abaixo do "formulário de login", isso seria possível?

Por favor, poderia ser mais específico? Uma linha abaixo, seria pular uma linha ou uma linha em si? Você poderia montar um exemplo em imagem, por favor?

iScroll escreveu:Certo, assim como essa linha abaixo do "formulário de login" : https://i.imgur.com/TPjB3PQ?r
Você consegueria por o mesmo na minha caixa? E a mesma coisa com "conexão com sua conta"?

Veja o exemplo acima kkk, abra a imagem e se possível veja a diferença no meu fórum pois estou sem PC para printar infelizmente :/

Bom dia.

O efeito não está aplicado ao fórum... Não consigo entender que tipo de linha é essa que deseja. Além do mais, o formulário de Login ainda não funciona porque estamos apenas testando o código, logo, você disse que a questão do design ficava por sua conta.

Por gentileza, esclareça-me que tipo de linha é essa, para darmos continuidade à sua dúvida.

Shek Crowley escreveu:Bom dia.

O efeito não está aplicado ao fórum... Não consigo entender que tipo de linha é essa que deseja. Além do mais, o formulário de Login ainda não funciona porque estamos apenas testando o código, logo, você disse que a questão do design ficava por sua conta.

Por gentileza, esclareça-me que tipo de linha é essa, para darmos continuidade à sua dúvida.

Certo, poderíamos dar continuidade no código?

Sobre a linha, cá está: https://i.imgur.com/dD0EVWd.png
Note que há algumas diferenças da apresentada para à que está no meu fórum
Desde já agradeço.

----
Edit:

Retirei o JS do meu fórum pois não conseguiam logar kk, se quiser deixar a linha para depois é só falar e a gente continua no código por enquanto.

UP

Bem, troque o CSS que te passei por este:

Código:

div#fundo, .caixa {display: none;}
div#fundo {
    background: #000;
    position: fixed;
    width: 100%;
    top: 0px;
    height: 100%;
    left: 0px;
    z-index: 1;
    opacity: 0.7;
    cursor: pointer;
}
 
.blourpShek_box {padding: 10px;}
 
.caixa {
    height: auto;
    left: 25%;
    position: fixed;
    top: 10%;
    width: 50%;
    z-index: 2;
}
.groupsField dd {margin-bottom: 3px;}
span.icon {padding: 5px;}
 
.bgWhite {
  background: #fff;
  width: 50% !important;
}
 
.caixa .groupsField input {
    background: transparent;
    border: none;
    height: 25px;
}
 
.groupsField {
  padding: 10px;
}
 
.messagShek {
  background: #0076b1;
}
.messagShek h2 {color: #fff !important;border-bottom: 1px solid #fff;}

.buttonLink a {color: #fff;font-size: auto !important; border: none !important;}
 
.messagShek p {
  color: #fff;
  font-size: 15px;
}
 
.buttonLink {
  color: #fff !important;
    background: #12a3eb;
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
}
 
.buttonLink:hover {
  background: #105289 !important;
}
 
.buttonConn {
  color: #fff !important;
    background: #12a3eb !important;
    cursor: pointer !important;
    padding: 10px !important;
    border-radius: 5px !important;
  height: auto !important;
}
 
.buttonConn:hover {
  background: #105289 !important;
}

Em seguida, troque o HTML por este:

Código:

<div id="fundo"></div>
<div id="inboxShek" class="caixa" name="topic_109026">
  <table>
      <tr>
        <td class="bgWhite">
      <form action="/login" method="post" name="form_login">
            <div class="blourpShek_box">
              <h2>Formulário de Login</h2>
              <p>Digite os dados da sua conta no formulário abaixo.</p>
                  <div class="groupsField">
                    <dd style="height: 30px;background: #efefef;"><span class="icon"><i class="fa fa-users"></i></span><input type="text" tabindex="1" name="username" maxlength="40" value="" placeholder="Usuário" class="inputbox"></dd>
                    <dd style="height: 30px;background: #efefef;"><span class="icon"><i class="fa fa-lock"></i></span><input type="password" tabindex="2" id="password" name="password" size="25" maxlength="25" placeholder="********" class="inputbox"></dd>
                <dd><label for="autologin"><input type="checkbox" name="autologin" id="autologin" tabindex="4" checked="checked" class="radio"> Conexão automática</label></dd>
                    <br />
                    <dd><input class="buttonConn" type="submit" name="login" value="Conectar-se"></dd>
                  </div>
            </div>
      </form>
        </td>
        <td class="messagShek">
            <div class="boxShek" align="center">
              <div class="blourpShek_box">
                  <h2>CONEXÃO COM SUA CONTA</h2>
                  <p>Bem-vindo! Para participar das discussões, você precisa conectar-se usando um usuário e senha!</p>
                  <br />
                  <a href="#" class="buttonLink"><i class="fa fa-users"></i> Cadastrar-me!</a>
              </div>
            </div>
        </td>
      </tr>
  </table>
</div>

Agora podes deixá-lo ativado, pois, seus membros podem logar.

Certo, falta agora o registro que não funciona, rs.
Poderíamos agora tentar fazer a linha cujo eu falei?
Veja:
O meu: http://prntscr.com/fg7fl2
A sua proposta: http://prntscr.com/fg7fp4

(Agora ficou mais fácil pois estava sem PC para explicar melhor, )

A versão de seu fórum é PunBB, e por isso não tem essa barra por baixo. Para incluir, você precisa adicionar este novo CSS:

Código:

div.blourpShek_box h2 {
    border-bottom: 1px solid #0076b1;
    color: #0076b1;
    font-size: 1.6em;
    font-weight: 400;
    margin-bottom: .5em;
    margin-top: .5em;
    padding-bottom: .5em;
}

Aliás, o botão Registrar pode ser alterado por você! É só mudar o jogo da velha (#) pelo link da página de registro!

Eu sei que vocês (digo boa parte dos membros) são leigos com códigos, mas, pelo menos o HTML básico vocês, como Administradores, precisam aprender. Tutoriais aqui no FdF que ensinam isso, não falta. Além do mais, estamos aqui para sanar suas dúvidas quando tiverem em relação ao HTML que criaram.

Até mais.

A pedido do autor do tópico, o tópico está voltando à atividade.

---

Edit:

Adicione mais esta peça em sua Folha de Estilos CSS:

Código:

#inboxShek,
#inboxShek * {
  box-sizing: border-box;
}

div#inboxShek:focus {
  outline: none;
}

o/

Up.
Estou viajando assim q chegar vejo o código acima.
Peço q n fechem o tópico

Bom, o código passado acima não resultou em muita coisa no que eu queria.
Veja : http://prntscr.com/g83ne5

A parte em verde quero que fique em toda parte vermelha, entende?

Adicione mais este CSS:

Código:

.groupsField dd {
  position: relative;
  display: flex;
  align-items: center;
}

.groupsField dd input[type="text"],
.groupsField dd input[type="password"] {
  width: 100%;
  margin-top: -4px;
}

o/

Perfeito mas ficou desigual, veja: http://prntscr.com/g8cb3m
Tem como também alinhar o "Conectar automaticamente" e adicionar "Esqueci minha senha" ao lado dele? http://prntscr.com/g8cbhq
Veja.

UP

UP

Irei pedir para que o senhor desative o código que está usando, pois irei fazer um novo do zero.

o/

Luiz escreveu:Irei pedir para que o senhor desative o código que está usando, pois irei fazer um novo do zero.

o/

certo, vou deixa-lo desativado.

UP

UP