Caixa de login

5 participantes

Página 1 de 2 1, 2  Seguinte

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

Tópico resolvido Caixa de login

Mensagem por iScroll 13.05.17 21:38

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/
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: Caixa de login

Mensagem por Luiz 13.05.17 21:56

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/


Última edição por Luiz~ em 14.05.17 15:17, editado 1 vez(es)
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: Caixa de login

Mensagem por iScroll 13.05.17 22:46

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.
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: Caixa de login

Mensagem por iScroll 15.05.17 15:32

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: Caixa de login

Mensagem por iScroll 16.05.17 20:12

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: Caixa de login

Mensagem por iScroll 17.05.17 22:57

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: Caixa de login

Mensagem por iScroll 19.05.17 15:22

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: Caixa de login

Mensagem por iScroll 20.05.17 16:22

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: Caixa de login

Mensagem por Admin0 20.05.17 17:45

não vi essa caixa de login la! Pensativo
Admin0

Admin0
**

Membro desde : 20/08/2013
Mensagens : 92
Pontos : 142

http://script.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Caixa de login

Mensagem por iScroll 20.05.17 17:51

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

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.
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: Caixa de login

Mensagem por Admin0 20.05.17 17:58

[quote="iScroll"]
Admin0 escreveu:não vi essa caixa de login la! Pensativo

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 Rindo
eu disse que eu não vi la, porque se eu tivesse visto teria pegado esse código para você Mostrando a lingua
pensei que você no minimo ia mostrar onde ta isso.
passar bem Estudar
Admin0

Admin0
**

Membro desde : 20/08/2013
Mensagens : 92
Pontos : 142

http://script.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Caixa de login

Mensagem por iScroll 20.05.17 19:18

[quote="Admin0"]
iScroll escreveu:
Admin0 escreveu:não vi essa caixa de login la! Pensativo

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 Rindo
eu disse que eu não vi la, porque se eu tivesse visto teria pegado esse código para você Mostrando a lingua
pensei que você no minimo ia mostrar onde ta isso.
passar bem Estudar

iScroll escreveu:

Detalhes da questão

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

Acho que você não viu essa parte Rindo
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 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

Tópico resolvido Re: Caixa de login

Mensagem por iScroll 22.05.17 18:58

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: Caixa de login

Mensagem por iScroll 23.05.17 23: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: Caixa de login

Mensagem por iScroll 25.05.17 1: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: Caixa de login

Mensagem por iScroll 26.05.17 1:32

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: Caixa de login

Mensagem por iScroll 27.05.17 13:28

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: Caixa de login

Mensagem por iScroll 29.05.17 22:50

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: Caixa de login

Mensagem por Shek 30.05.17 0:27

Olá!

Vamos por parte. Feliz 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 Piscada
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>. Feliz

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

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

  • 0

Tópico resolvido Re: Caixa de login

Mensagem por iScroll 30.05.17 0:50

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.
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: Caixa de login

Mensagem por Shek 30.05.17 1:50

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

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.

Hm... Hm...
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: Caixa de login

Mensagem por iScroll 30.05.17 2:20

Sem resultados, caro Crowley.
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: Caixa de login

Mensagem por Shek 30.05.17 2:25

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

EDIT:

É claro... Não funcionará, pois, seu template foi editado. Rindo 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.
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: Caixa de login

Mensagem por iScroll 30.05.17 2:34

bom, percebi que desta vez simplesmente não apareceu nada.
Falta agora o CSS, certo?
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: Caixa de login

Mensagem por Shek 30.05.17 2:36

Por favor, releia as mensagens anteriores atentamente. Primeiro, o HTML, depois o CSS, em seguida o jquery.
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: Caixa de login

Mensagem por iScroll 30.05.17 2:40

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

Principal Contribuidor

Tópico resolvido Re: Caixa de login

Mensagem por Shek 30.05.17 2:51

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

Até mais.
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: Caixa de login

Mensagem por iScroll 30.05.17 3:15

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"?
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: Caixa de login

Mensagem por Shek 30.05.17 3:29

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.
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: Caixa de login

Mensagem por iScroll 30.05.17 12:06

Mas a imagem não é igual.
Eu só queria adicionar uma linha abaixo do "formulário de login", isso seria possível?
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: Caixa de login

Mensagem por Shek 30.05.17 12:42

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?
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: Caixa de login

Mensagem por iScroll 30.05.17 14:23

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 :/
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: Caixa de login

Mensagem por Shek 01.06.17 12:10

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

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: Caixa de login

Mensagem por iScroll 03.06.17 14:39

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 Feliz
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.
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: Caixa de login

Mensagem por iScroll 05.06.17 16:01

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: Caixa de login

Mensagem por Shek 05.06.17 16:58

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. Piscada
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: Caixa de login

Mensagem por iScroll 05.06.17 17:50

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, Muito 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

Principal Contribuidor

Tópico resolvido Re: Caixa de login

Mensagem por Shek 07.06.17 13:30

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

Até mais.
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

Membro Entusiasta

Tópico resolvido Re: Caixa de login

Mensagem por Luiz 12.06.17 18:35

Questão abandonada pelo autor, mas considerada resolvida por ter solução para o problema.
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

Membro Entusiasta

Tópico resolvido Re: Caixa de login

Mensagem por Luiz 07.08.17 23:42

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/
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: Caixa de login

Mensagem por iScroll 12.08.17 0:22

Up.
Estou viajando assim q chegar vejo o código acima.
Peço q n fechem o tópico
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: Caixa de login

Mensagem por iScroll 14.08.17 0:33

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?
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: Caixa de login

Mensagem por Luiz 14.08.17 13:01

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/
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: Caixa de login

Mensagem por iScroll 14.08.17 15:20

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.
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: Caixa de login

Mensagem por iScroll 15.08.17 16:22

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: Caixa de login

Mensagem por iScroll 16.08.17 17:20

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: Caixa de login

Mensagem por Luiz 16.08.17 20:06

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

o/
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: Caixa de login

Mensagem por iScroll 16.08.17 20:34

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.
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: Caixa de login

Mensagem por iScroll 17.08.17 19:40

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: Caixa de login

Mensagem por iScroll 18.08.17 19:42

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

Página 1 de 2 1, 2  Seguinte

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