Como fazer um painel de login igual a esse?

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

Resolvido Como fazer um painel de login igual a esse?

Mensagem por Pixoyo em Sex 25 Nov 2011 - 14: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:




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

Versão do meu fórum:
PHPBB3
avatar

Pixoyo
Nível 5

Masculino
Inscrito dia : 21/10/2011
Mensagens : 56
Pontos Ativos : 98

Ver perfil do usuário http://expert.forum.st/

Resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por webpixel em Seg 28 Nov 2011 - 8:49

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

webpixel
Nível 5

Masculino
Inscrito dia : 28/11/2011
Mensagens : 59
Pontos Ativos : 82

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

Resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por Pixoyo em Seg 28 Nov 2011 - 16:50

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

é da forumeiros sim...

alguém sabe e pode ajudar? Triste
avatar

Pixoyo
Nível 5

Masculino
Inscrito dia : 21/10/2011
Mensagens : 56
Pontos Ativos : 98

Ver perfil do usuário http://expert.forum.st/

Resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por ZombieW em Ter 29 Nov 2011 - 11: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! ^^
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1273
Pontos Ativos : 1798

Ver perfil do usuário http://www.perfectteam.org
  • 0

Resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por Lexus em Ter 29 Nov 2011 - 11: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.
avatar

Lexus
Super usuário

Masculino
Inscrito dia : 22/06/2010
Mensagens : 4205
Pontos Ativos : 5692

Ver perfil do usuário http:///.../#

Resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por King Gz; em Qua 30 Nov 2011 - 5: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]
avatar

King Gz;
Membro do Fórum

Masculino
Inscrito dia : 20/11/2011
Mensagens : 1827
Pontos Ativos : 2486

Ver perfil do usuário http://www.gamezerbrasil.com/

Resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por cyllaz em Qui 1 Dez 2011 - 16:54

UP, função muito interesante ^^

cyllaz
Usuário destaque

Masculino
Inscrito dia : 28/11/2009
Mensagens : 890
Pontos Ativos : 1258

Ver perfil do usuário http://sparquitetura.livreforum.com/

Resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por Ace em Sex 2 Dez 2011 - 9: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!
avatar

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8880
Pontos Ativos : 11604

Ver perfil do usuário http://ajuda.forumeiros.com
  • 0

Resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por Dury em Sex 2 Dez 2011 - 10: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>
avatar

Dury
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 21/01/2009
Mensagens : 6708
Pontos Ativos : 8827

Ver perfil do usuário

Resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por cyllaz em Sex 2 Dez 2011 - 11: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 ^^

cyllaz
Usuário destaque

Masculino
Inscrito dia : 28/11/2009
Mensagens : 890
Pontos Ativos : 1258

Ver perfil do usuário http://sparquitetura.livreforum.com/

Resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por Dury em Sex 2 Dez 2011 - 12: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
avatar

Dury
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 21/01/2009
Mensagens : 6708
Pontos Ativos : 8827

Ver perfil do usuário

Resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por Pixoyo em Sex 2 Dez 2011 - 22:01

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

Pixoyo
Nível 5

Masculino
Inscrito dia : 21/10/2011
Mensagens : 56
Pontos Ativos : 98

Ver perfil do usuário http://expert.forum.st/

Resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por Dury em Sex 2 Dez 2011 - 22: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!
avatar

Dury
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 21/01/2009
Mensagens : 6708
Pontos Ativos : 8827

Ver perfil do usuário

Resolvido Re: Como fazer um painel de login igual a esse?

Mensagem por Pixoyo em Sex 2 Dez 2011 - 22:10

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

Pixoyo
Nível 5

Masculino
Inscrito dia : 21/10/2011
Mensagens : 56
Pontos Ativos : 98

Ver perfil do usuário http://expert.forum.st/

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