Como fazer um painel de login igual a esse?

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

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

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

é da forumeiros sim...

alguém sabe e pode ajudar?

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! ^^

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.

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

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

Etc ...

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

Mais de qualquer forma - Pezzi[+1]

UP, função muito interesante ^^

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!

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>

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 ^^

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!

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

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!

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