Como fazer um painel de login igual a esse?

+4
Lexus
ZombieW
webpixel
Pixoyo
8 participantes

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

Tópico resolvido Como fazer um painel de login igual a esse?

Mensagem por Pixoyo 25.11.11 17:04

Qual é minha questão:
Como eu faço para colocar um painel de login igual ao desse fórum
http://tugatech.com.pt/forum

Medidas que eu tomei para corrigir o problema:
vim aqui

Imagens do meu problema:
Como fazer um painel de login igual a esse? Ttech010
Como fazer um painel de login igual a esse? Ttech011


Endereço do meu fórum:
pcblast.forumeiros.com

Versão do meu fórum:
PHPBB3
Pixoyo

Pixoyo
**

Membro desde : 21/10/2011
Mensagens : 56
Pontos : 98

http://expert.forum.st/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por webpixel 28.11.11 11:49

O fórum é da forumeiros ?
O Tuga Tech ?
webpixel

webpixel
**

Membro desde : 28/11/2011
Mensagens : 59
Pontos : 82

http://webpixelforum.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por Pixoyo 28.11.11 19:50

webpixel escreveu:O fórum é da forumeiros ?
O Tuga Tech ?

é da forumeiros sim...

alguém sabe e pode ajudar? Triste
Pixoyo

Pixoyo
**

Membro desde : 21/10/2011
Mensagens : 56
Pontos : 98

http://expert.forum.st/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por ZombieW 29.11.11 14:32

Pessoal, também tenho interesse por isso, e eu já por aí esse código (uns 4 meses atrás).

Tentem olhar as msg antigas! ^^
ZombieW

ZombieW
Super Membro

Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020

http://www.perfectteam.org

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por Lexus 29.11.11 14:49

Olá,

o código é este:

Código:
<div id="toppanel"><div id="panel"><div class="content clearfix"><div class="left"><h1>Bem vindo ao TugaTech</h1><p class="grey">Seja bem vindo ao TugaTech, o Fórum Nacional de Tecnologias e Informática.<br>Introduza os dados de login nos campos ao lado ou registe-se no fórum.</p></div><div class="left"> <form action="http://tugatech.com.pt/login.forum" method="post" name="form_login"><h1>Login</h1><label class="grey" for="log">Username:</label><input name="username" size="20" maxlength="25" type="text"><label class="grey" for="pwd">Password:</label><input name="password" size="20" maxlength="25" type="password"><div class="clear"></div><input name="redirect" value="" type="hidden"><input name="query" value="" type="hidden"><input type="submit" name="login" value="Login" class="bt_login"/><a class="lost-pwd" href="http://tugatech.com.pt/profile.forum?mode=sendpassword">Perdeu a password?</a></form></div><div class="left right"> <h1>Não é membro do TugaTech?</h1>Ainda não é membro do TugaTech? Registe-se clicando no botão em baixo.<br><input type="submit" name="submit" value="Registar" class="bt_register" onclick="window.location='http://tugatech.com.pt/profile.forum?mode=register';"/></form></div></div></div>  <div class="tab"><ul class="login"><li class="left"> </li><li>Login/Registo</li><li class="sep">|</li><li id="toggle"><a id="open" class="open" href="#">Abrir</a><a id="close" style="display: none;" class="close" href="#">Fechar</a></li><li class="right"> </li></ul> </div> </div> <a id="top" name="top" accesskey="t"></a>

deve ser colocado em um widget ou no campo de mensagens da home-page.

Adicionem estes códigos na sua folha de estilo CSS:

Código:
.clear{clear:both;height:0;line-height:0}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.clearfix{height:1%;display:block}* html .clearfix{height:1%}.tab{background:url(http://files3.tugatech.com.pt/slidelogin/images/tab_b.png) repeat-x 0 0;height:42px;position:relative;top:0;z-index:999}.tab ul.login{display:block;position:relative;float:right;clear:right;height:42px;width:auto;font-weight:700;line-height:42px;right:150px;color:#FFF;font-size:80%;text-align:center;margin:0}.tab ul.login li.left{background:url(http://files3.tugatech.com.pt/slidelogin/images/tab_l.png) no-repeat left 0;height:42px;width:30px;display:block;float:left;margin:0;padding:0}.tab ul.login li.right{background:url(http://files3.tugatech.com.pt/slidelogin/images/tab_r.png) no-repeat left 0;height:42px;width:30px;display:block;float:left;margin:0;padding:0}.tab ul.login li{text-align:left;display:block;float:left;height:42px;background:url(http://files3.tugatech.com.pt/slidelogin/images/tab_m.png) repeat-x 0 0;padding:0 6px}.tab ul.login li a{color:#15ADFF}.tab .sep{color:#414141}.tab a.open,.tab a.close{height:20px;line-height:20px!important;padding-left:30px!important;cursor:pointer;display:block;width:100px;position:relative;top:11px}.tab a.open{background:url(http://files3.tugatech.com.pt/slidelogin/images/bt_open.png) no-repeat left 0}.tab a.close{background:url(http://files3.tugatech.com.pt/slidelogin/images/bt_close.png) no-repeat left 0}.tab a:hover.open{background:url(http://files3.tugatech.com.pt/slidelogin/images/bt_open.png) no-repeat left -19px}.tab a:hover.close{background:url(http://files2.tugatech.com.pt/slidelogin/images/bt_close.png) no-repeat left -19px}#toppanel{position:absolute;top:0;width:100%;z-index:999;text-align:center;margin-left:auto;margin-right:auto}#panel{width:100%;height:270px;color:#999;background:#272727;overflow:hidden;position:relative;z-index:3;display:none}#panel h1{font-size:1.6em;color:#FFF;margin:0;padding:5px 0 10px}#panel h2{font-size:1.2em;color:#FFF;margin:0;padding:10px 0 5px}#panel p{margin:5px 0;padding:0}#panel a{text-decoration:none;color:#15ADFF}#panel a-lost-pwd{display:block;float:left}#panel .content{width:960px;padding-top:15px;text-align:left;font-size:.85em;margin:0 auto}#panel .content .left{width:280px;float:left;border-left:1px solid #333;padding:0 15px}#panel .content .right{border-right:1px solid #333}#panel .content form{margin:0 0 10px}#panel .content label{float:left;padding-top:8px;clear:both;width:280px;display:block}#panel .content input.field{border:1px #1A1A1A solid;background:#414141;margin-right:5px;margin-top:4px;width:200px;color:#FFF;height:16px}#panel .content input:focus.field{background:#545454}#panel .content input.bt_login,#panel .content input.bt_register{display:block;float:left;clear:left;height:24px;text-align:center;cursor:pointer;border:none;font-weight:700;margin:10px 0}#panel .content input.bt_login{width:74px;background:transparent url(http://files2.tugatech.com.pt/slidelogin/images/bt_login.png) no-repeat 0 0}#panel .content input.bt_register{width:94px;color:#FFF;background:transparent url(http://files2.tugatech.com.pt/slidelogin/images/bt_register.png) no-repeat 0 0}#panel .lost-pwd{display:block;float:left;clear:right;font-size:.95em;text-decoration:underline;padding:15px 5px 0}.tab ul.login li a:hover,#panel a:hover{color:#FFF}

Não me responsabilizo pelo uso das imagens e textos, somente peguei o código e o mostrei a vocês para editarem.
Lexus

Lexus
Hiper Membro

Membro desde : 22/06/2010
Mensagens : 4205
Pontos : 5693

http:///.../#

Ir para o topo Ir para baixo

Tópico resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por King Gz; 30.11.11 8:10

O código funcionou, mas com centenas de falhas, como por exemplo:

Seta Você está logado e aparece para você fazer o login
Seta Você clica para abrir e não abre
Seta Imagem passa um pouco do tamanho da página

Etc ...

Se alguem conseguir arrumar este código ajudará bastante pessoas Muito feliz

Mais de qualquer forma - Pezzi[+1]
King Gz;

King Gz;
Super Membro

Membro desde : 20/11/2011
Mensagens : 1827
Pontos : 2487

http://www.gamezerbrasil.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por cyllaz 01.12.11 19:54

UP, função muito interesante ^^
avatar

cyllaz
Membro

Membro desde : 28/11/2009
Mensagens : 890
Pontos : 1258

http://sparquitetura.livreforum.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por Ace 02.12.11 12:54

Olá,

Adicione o seguinte código em um widget, predefinido para apenas administradores verem (pois ai não atrapalha a navegação dos demais)

Código:
 <script>
var nnome = "{USERNAME}" ;
if ( nnome != "Convidado"){
document.write(' <style> ');
document.write(' #loginn{display:none!important;} ');
document.write(' </style> ');
}</script>


<!-- The CSS -->
<link rel="stylesheet" href="http://web-kreation.com/demos/login_form_mootools_1.2/fx.slide.css" type="text/css" media="screen" />
<style>
#login {
overflow: visible;
height: auto;
-webkit-transition: margin-top 0.5s ease-in-out 0s;
-moz-transition: margin-top 0.5s ease-in-out 0s;
-o-transition: margin-top 0.5s ease-in-out 0s;
transition: margin-top 0.5s ease-in-out 0s;

}

/* Login Panel */
#top {
background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_top.jpg) repeat-x 0 0;}

#top ul.login {
background: url(http://img18.imageshack.us/img18/3017/loginrw.png) no-repeat right 0;}

#top ul.login li.left {
background: url(http://img41.imageshack.us/img41/3439/loginlc.png) no-repeat left 0;}

#top ul.login li {
background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_m.jpg) repeat-x 0 0;}

/*Login*/
/* toggle effect - show/hide login*/
#login {
background: #1E1E1E;}

#login .loginContent input:focus.field {
background: #545454;}

#login .loginContent input.button_login {
background: transparent url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_login.jpg) no-repeat 0 0;}

#login .loginClose a {
background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right 0;}

#login .loginClose a:hover {
background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/button_close.jpg) no-repeat right -20px;}
</style>

<!-- Login --><div id="loginn" style="display: block;position: absolute;left: 0px;top: 0px;width: 100%;"><div id="login" style="margin-top:-105px;"><div class="loginContent">

<form action="/login.forum" method="post" enctype="multipart/form-data" name="form_login" id="form_login2">

<label for="log"><b>Username: </b></label>
<input name="username" size="23" class="field" maxlength="25" type="text" style="clear: both;" />

<label for="pwd"><b>Password:</b></label>
<input name="password" class="field" size="23" maxlength="25" type="password" style="clear: both;" />

<input class="menuoption button_login" type="submit" name="login" value=" " />

<input type="hidden" name="redirect" value="" />

</form><div class="left">

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

</div><div class="right">Não é um membro? <a href="/profile.forum?mode=register">Registar-me</a> | <a class="gensmall" href="/profile.forum?mode=sendpassword"> Recuperar Senha</a></div>

</div><div class="loginClose"><a href="#" id="closeLogin" onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')? '-105px' : '0px');">Fechar Painel</a></div>

</div>


<!-- /login --><div id="container"><div id="top">

<!-- login -->

<ul class="login">

<li class="left"> </li>

<li>Olá Visitante!</li>

<li>|</li>

<li><a id="toggleLogin" href="#" onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')? '-105px' : '0px');">Entrar</a></li>

</ul> <!-- / login -->

</div> <!-- / top --><div class="clearfix"></div>
</div>



</div>

Atenciosamente!
Ace

Ace
Membro Entusiasta
Membro Entusiasta

Membro desde : 06/07/2011
Mensagens : 8881
Pontos : 11607

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta
  • 0

Tópico resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por Dury 02.12.11 13:38

uzumaki minato escreveu:UP, função muito interesante ^^
Somente o autor pode dar UP na sua questão Uzumaki! Por favor, não cometa novamente esse erro.

Autor, eu suponho que seja esse o código:
Código:
<style>clear{clear:both;height:0;line-height:0}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.clearfix{height:1%;display:block}* html .clearfix{height:1%}.tab{background:url(http://files3.tugatech.com.pt/slidelogin/images/tab_b.png) repeat-x 0 0;height:42px;position:relative;top:0;z-index:999}.tab ul.login{display:block;position:relative;float:right;clear:right;height:42px;width:auto;font-weight:700;line-height:42px;right:150px;color:#FFF;font-size:80%;text-align:center;margin:0}.tab ul.login li.left{background:url(http://files3.tugatech.com.pt/slidelogin/images/tab_l.png) no-repeat left 0;height:42px;width:30px;display:block;float:left;margin:0;padding:0}.tab ul.login li.right{background:url(http://files3.tugatech.com.pt/slidelogin/images/tab_r.png) no-repeat left 0;height:42px;width:30px;display:block;float:left;margin:0;padding:0}.tab ul.login li{text-align:left;display:block;float:left;height:42px;background:url(http://files3.tugatech.com.pt/slidelogin/images/tab_m.png) repeat-x 0 0;padding:0 6px}.tab ul.login li a{color:#15ADFF}.tab .sep{color:#414141}.tab a.open,.tab a.close{height:20px;line-height:20px!important;padding-left:30px!important;cursor:pointer;display:block;width:100px;position:relative;top:11px}.tab a.open{background:url(http://files3.tugatech.com.pt/slidelogin/images/bt_open.png) no-repeat left 0}.tab a.close{background:url(http://files3.tugatech.com.pt/slidelogin/images/bt_close.png) no-repeat left 0}.tab a:hover.open{background:url(http://files3.tugatech.com.pt/slidelogin/images/bt_open.png) no-repeat left -19px}.tab a:hover.close{background:url(http://files2.tugatech.com.pt/slidelogin/images/bt_close.png) no-repeat left -19px}#toppanel{position:absolute;top:0;width:100%;z-index:999;text-align:center;margin-left:auto;margin-right:auto}#panel{width:100%;height:270px;color:#999;background:#272727;overflow:hidden;position:relative;z-index:3;display:none}#panel h1{font-size:1.6em;color:#FFF;margin:0;padding:5px 0 10px}#panel h2{font-size:1.2em;color:#FFF;margin:0;padding:10px 0 5px}#panel p{margin:5px 0;padding:0}#panel a{text-decoration:none;color:#15ADFF}#panel a-lost-pwd{display:block;float:left}#panel .content{width:960px;padding-top:15px;text-align:left;font-size:.85em;margin:0 auto}#panel .content .left{width:280px;float:left;border-left:1px solid #333;padding:0 15px}#panel .content .right{border-right:1px solid #333}#panel .content form{margin:0 0 10px}#panel .content label{float:left;padding-top:8px;clear:both;width:280px;display:block}#panel .content input.field{border:1px #1A1A1A solid;background:#414141;margin-right:5px;margin-top:4px;width:200px;color:#FFF;height:16px}#panel .content input:focus.field{background:#545454}#panel .content input.bt_login,#panel .content input.bt_register{display:block;float:left;clear:left;height:24px;text-align:center;cursor:pointer;border:none;font-weight:700;margin:10px 0}#panel .content input.bt_login{width:74px;background:transparent url(http://files2.tugatech.com.pt/slidelogin/images/bt_login.png) no-repeat 0 0}#panel .content input.bt_register{width:94px;color:#FFF;background:transparent url(http://files2.tugatech.com.pt/slidelogin/images/bt_register.png) no-repeat 0 0}#panel .lost-pwd{display:block;float:left;clear:right;font-size:.95em;text-decoration:underline;padding:15px 5px 0}.tab ul.login li a:hover,#panel a:hover{color:#FFF}</style>

<script type="text/javascript" src="http://forumactif.forumeiros.com/11887.js"></script>

<div id="toppanel"><div id="panel"><div class="content clearfix"><div class="left"><h1>Bem vindo ao TugaTech</h1><p class="grey">Seja bem vindo ao TugaTech, o Fórum Nacional de Tecnologias e Informática.<br>Introduza os dados de login nos campos ao lado ou registe-se no fórum.</p></div><div class="left"> <form action="http://tugatech.com.pt/login.forum" method="post" name="form_login"><h1>Login</h1><label class="grey" for="log">Username:</label><input name="username" size="20" maxlength="25" type="text"><label class="grey" for="pwd">Password:</label><input name="password" size="20" maxlength="25" type="password"><div class="clear"></div><input name="redirect" value="" type="hidden"><input name="query" value="" type="hidden"><input type="submit" name="login" value="Login" class="bt_login"/><a class="lost-pwd" href="http://tugatech.com.pt/profile.forum?mode=sendpassword">Perdeu a password?</a></form></div><div class="left right"> <h1>Não é membro do TugaTech?</h1>Ainda não é membro do TugaTech? Registe-se clicando no botão em baixo.<br><input type="submit" name="submit" value="Registar" class="bt_register" onclick="window.location='http://tugatech.com.pt/profile.forum?mode=register';"/></form></div></div></div>  <div class="tab"><ul class="login"><li class="left"> </li><li>Login/Registo</li><li class="sep">|</li><li id="toggle"><a id="open" class="open" href="#">Abrir</a><a id="close" style="display: none;" class="close" href="#">Fechar</a></li><li class="right"> </li></ul> </div> </div> <a id="top" name="top" accesskey="t"></a>
Dury

Dury
Membro Entusiasta
Membro Entusiasta

Membro desde : 21/01/2009
Mensagens : 6708
Pontos : 8829

https://shiftactive.blogspot.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por cyllaz 02.12.11 14:43

uzumaki minato escreveu:
Somente o autor pode dar UP na sua questão Uzumaki! Por favor, não cometa novamente esse erro.

Opa, desculpe, dessa eu não sabia, achei que para não criarmos topicos repetidos, poderiamos participar igualmente dos ja existentes...

Obrigado, o codigo funcionou perfeitamente, é só editar agora ^^
avatar

cyllaz
Membro

Membro desde : 28/11/2009
Mensagens : 890
Pontos : 1258

http://sparquitetura.livreforum.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por Dury 02.12.11 15:21

Não se preocupe uzumaki, você tem o direito de participar deste tópico, assim como o autor também pode participar do seu, futuramente. Mas o que não é permitido são Ups sem que o autor faça, depois de 24 horas da última mensagem.

Até mais!
Piscada
Dury

Dury
Membro Entusiasta
Membro Entusiasta

Membro desde : 21/01/2009
Mensagens : 6708
Pontos : 8829

https://shiftactive.blogspot.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por Pixoyo 03.12.11 1:01

Olá Jeffrey, esse código que você postou não aparece o campo de nome de usuário e senha... Em choque
Pixoyo

Pixoyo
**

Membro desde : 21/10/2011
Mensagens : 56
Pontos : 98

http://expert.forum.st/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por Dury 03.12.11 1:05

Olá,

Desculpe, mas terá que construir. Este código contém direitos do autor, logo eu pelo menos não consegui capturar conjunto o código os dados de dentro do painel flutuante. Aconselho que entre em contato com administrador e tente negociar com ele.

Alerta: Copiem o Jquery passado na página:
http://forumactif.forumeiros.com/11887.js
Aplique o código na página JS do seu fórum de preferencia em todas as páginas, pois o código pode ser excluído sem aviso prévio!
Dury

Dury
Membro Entusiasta
Membro Entusiasta

Membro desde : 21/01/2009
Mensagens : 6708
Pontos : 8829

https://shiftactive.blogspot.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por Pixoyo 03.12.11 1:10

era problema com o css do fórum, mudei o tema e agora o painel está funcionando... Valeu Jeffrey! Positivo
Pixoyo

Pixoyo
**

Membro desde : 21/10/2011
Mensagens : 56
Pontos : 98

http://expert.forum.st/

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