Como coloco isso no meu forum ?

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

Resolvido Como coloco isso no meu forum ?

Mensagem por Heero em 28/12/12, 06:58 pm

Qual é minha questão:
Ae eu queria saber como eu coloco um painel de login e de se registrar no topo do meu forum assim.

http://i.imgur.com/ywt9n.png <<

http://i.imgur.com/hAk8J.png <--

Se puderem ajudar .

Link do forum que tirei os prints. : http://forum-caminhoneiros.forumbrasil.net/forum#

Vlw !

Endereço do meu fórum:
http://heerocheats.forumeiros.com

Versão do fórum:
INVISION


Última edição por Heero em 29/12/12, 01:11 am, editado 1 vez(es)
avatar

Heero
Usuário avançado

Masculino
Inscrito dia : 03/12/2012
Mensagens : 373
Pontos Ativos : 504

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

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Sennior em 28/12/12, 07:03 pm

avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Heero em 28/12/12, 07:09 pm

Amigo eu quero um igual o da imagem , este ai , deste tutorial nao me agradou.
avatar

Heero
Usuário avançado

Masculino
Inscrito dia : 03/12/2012
Mensagens : 373
Pontos Ativos : 504

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

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Holmes em 28/12/12, 07:28 pm

Saudações,

Coloque esse HTML em um Widget:
Código:
<style>#rep-mail-bar{font-size:11px;height:25px;left:0;position:fixed;top:0;width:100%;z-index:999}.tab{background:url(http://i.imgur.com/fDQkE.png) repeat-x 0 0;height:22px;position:relative;top:0;z-index:999}.tab ul.login{clear:right;color:#fff;display:block;float:right;font-size:80%;font-weight:700;height:42px;line-height:42px;margin:0;position:relative;right:150px;text-align:center;width:auto}.tab ul.login li.left{background:url(http://i.imgur.com/XwNu2.png) no-repeat left 0;display:block;float:left;height:42px;margin:0;padding:0;width:30px}.tab ul.login li.right{background:url(http://i.imgur.com/QmQzs.png) no-repeat left 0;display:block;float:left;height:42px;margin:0;padding:0;width:30px}.tab ul.login li{background:url(http://i.imgur.com/PAFBM.png) repeat-x 0 0;display:block;float:left;height:42px;padding:0 6px;text-align:left}.tab ul.login li a{color:#15ADFF}.tab ul.login li a:hover{color:#fff}.tab .sep{color:#414141}.tab a.close,.tab a.open{cursor:pointer;display:block;height:20px;line-height:20px!important;padding-left:30px!important;position:relative;top:11px;width:120px}.tab a.open{background:url(http://i.imgur.com/NWFec.png) no-repeat left 0}.tab a.close{background:url(http://i.imgur.com/GGiBD.png) no-repeat left 0}.tab a:hover.open{background:url(http://i.imgur.com/mboPc.png) no-repeat left -19px}.tab a:hover.close{background:url(http://i.imgur.com/xztqF.png) no-repeat left -19px}#toppanel{margin-left:auto;margin-right:auto;position:absolute;text-align:center;top:0;width:100%;z-index:999}#panel{background:#272727;color:#999;display:none;height:210px;overflow:hidden;position:relative;width:100%;z-index:3}.content{background-color:white}</style><div id="toppanel"><div id="panel" style="display: none; "><div class="content clearfix"><div class="left"><h1>Desenvolvido por Max Kyle | Fórum - Caminhoneiros na Estrada</h1><h2>Por favor, registre e faça login para participar do fórum</h2>      <p class="grey">Fórum melhor vizualizado em <a href="http://www.mozilla.com/en-US/products/download.html?product=firefox-3.0.10&os=win&lang=en-US" onmouseover="showtip('Baixar Firefox ..!');" onmouseout="hidetip();" target="_blank"><img src="http://i43.servimg.com/u/f43/17/63/07/30/ff1011.png"></a> e <a href="http://www.google.com/chrome?hl=br" onmouseover="showtip('Baixar Google Chrome ..!');" onmouseout="hidetip();" target="_blank"><img src="http://i43.servimg.com/u/f43/17/63/07/30/gc1010.png"></a><br>com uma resolução de 1024x768 ou superior. <br></p></div><div class="left"><form action="/login?redirect=/" method="post" name="form_login" id="login-vds"><h1 class="padlock">Entrar</h1><label class="grey" for="log">Nome de Utilizador:</label><input class="field" id="log" type="text" size="10" name="username"><label class="grey" for="pwd">Senha:</label><input class="field" id="pwd" type="password" size="10" name="password"><input id="bt_login" class="bt_login" type="submit" name="login" value="Entrar"><label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever">  Lembra de min</label><div class="clear"></div></form><script type="text/javascript">//<![CDATA[
$(function(){$('#login-vds').attr('action','/login?redirect='+this.location.pathname);});//]]></script></div><div class="left right"><form action="/register?agreed=true&step=2" method="post"><h1>Registe-se rápido !</h1>            <label class="grey" for="signup">Nome de Utilizador : *</label><input class="field" type="text" id="username_reg" name="username" value="" size="25" maxlength="25"><label class="grey" for="email">Email: *</label><input class="field" type="text" name="email" id="email" size="23"><label class="grey" for="signup">Senha : *</label><input class="field" type="password" id="password_reg" name="password" value="" size="25" maxlength="25"><input type="submit" name="submit" value="Registe-se" class="bt_register"></form></div></div></div><!--
 /login --><!--
 Guia no topo | Fórum - Caminhoneiros NA. | Max Kyle -->  <div class="tab"><ul class="login"><li class="left"> </li><li>Fórum - Caminhoneiros na Estrada!</li><li class="sep">|</li><li id="toggle"><a id="open" class="open" href="#" style="display: block; ">Entrar | Registrar</a><a id="close" style="display: none; " class="close" href="#">Fechar</a>        </li><li class="right"> </li></ul> </div><!--
 / top --></div>

Coloque esse Javascript em todas as páginas:
Código:
$(document).ready(function(){$("#open").click(function(){$("div#panel").slideDown("slow")});$("#close").click(function(){$("div#panel").slideUp("slow")});$("#toggle a").click(function(){$("#toggle a").toggle()})});

Assombrosamente.


Última edição por Holmes em 28/12/12, 08:07 pm, editado 1 vez(es)
avatar

Holmes
Usuário avançado

Inscrito dia : 11/11/2012
Mensagens : 303
Pontos Ativos : 413

Ver perfil do usuário

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Heero em 28/12/12, 07:40 pm

Funcionou nao man.
avatar

Heero
Usuário avançado

Masculino
Inscrito dia : 03/12/2012
Mensagens : 373
Pontos Ativos : 504

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

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Holmes em 28/12/12, 07:45 pm

@Heero escreveu:Funcionou nao man.
Poderia ser mais especifico sobre o que não funcionou?
Nem chegou a aparecer?

Assombrosamente.
avatar

Holmes
Usuário avançado

Inscrito dia : 11/11/2012
Mensagens : 303
Pontos Ativos : 413

Ver perfil do usuário

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Heero em 28/12/12, 07:47 pm

Exatamente , fiz tudo como você pediu e nada apareceu.
avatar

Heero
Usuário avançado

Masculino
Inscrito dia : 03/12/2012
Mensagens : 373
Pontos Ativos : 504

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

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Holmes em 28/12/12, 07:48 pm

@Heero escreveu:Exatamente , fiz tudo como você pediu e nada apareceu.
Acabei de acessar seu fórum e seus Widgets estão desativados, antes estavam ativos.
Poderia colocar o código novamente em um Widget para que eu possa ver qual o problema?

Assombrosamente.
avatar

Holmes
Usuário avançado

Inscrito dia : 11/11/2012
Mensagens : 303
Pontos Ativos : 413

Ver perfil do usuário

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Heero em 28/12/12, 07:50 pm

Ok irei ativar novamente , colocar tudo novamente e vera que n e mentira.
avatar

Heero
Usuário avançado

Masculino
Inscrito dia : 03/12/2012
Mensagens : 373
Pontos Ativos : 504

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

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Holmes em 28/12/12, 07:52 pm

@Heero escreveu:Ok irei ativar novamente , colocar tudo novamente e vera que n e mentira.
Os Widgets continuam desativos.

Assombrosamente.
avatar

Holmes
Usuário avançado

Inscrito dia : 11/11/2012
Mensagens : 303
Pontos Ativos : 413

Ver perfil do usuário

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Heero em 28/12/12, 07:53 pm

ta ativado cara.
avatar

Heero
Usuário avançado

Masculino
Inscrito dia : 03/12/2012
Mensagens : 373
Pontos Ativos : 504

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

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Holmes em 28/12/12, 07:56 pm

Saudações,

Use esse código no Widget:
Código:
<style>#rep-mail-bar{font-size:11px;height:25px;left:0;position:fixed;top:0;width:100%;z-index:999}.tab{background:url(http://i.imgur.com/fDQkE.png) repeat-x 0 0;height:22px;position:relative;top:0;z-index:999}.tab ul.login{clear:right;color:#fff;display:block;float:right;font-size:80%;font-weight:700;height:42px;line-height:42px;margin:0;position:relative;right:150px;text-align:center;width:auto}.tab ul.login li.left{background:url(http://i.imgur.com/XwNu2.png) no-repeat left 0;display:block;float:left;height:42px;margin:0;padding:0;width:30px}.tab ul.login li.right{background:url(http://i.imgur.com/QmQzs.png) no-repeat left 0;display:block;float:left;height:42px;margin:0;padding:0;width:30px}.tab ul.login li{background:url(http://i.imgur.com/PAFBM.png) repeat-x 0 0;display:block;float:left;height:42px;padding:0 6px;text-align:left}.tab ul.login li a{color:#15ADFF}.tab ul.login li a:hover{color:#fff}.tab .sep{color:#414141}.tab a.close,.tab a.open{cursor:pointer;display:block;height:20px;line-height:20px!important;padding-left:30px!important;position:relative;top:11px;width:120px}.tab a.open{background:url(http://i.imgur.com/NWFec.png) no-repeat left 0}.tab a.close{background:url(http://i.imgur.com/GGiBD.png) no-repeat left 0}.tab a:hover.open{background:url(http://i.imgur.com/mboPc.png) no-repeat left -19px}.tab a:hover.close{background:url(http://i.imgur.com/xztqF.png) no-repeat left -19px}#toppanel{margin-left:auto;margin-right:auto;position:absolute;text-align:center;top:0;width:100%;z-index:999}#panel{background:#272727;color:#999;display:none;height:210px;overflow:hidden;position:relative;width:100%;z-index:3}</style><div id="rep-mail-bar"><div id="toppanel"><div id="panel" style="display: none; "><div class="content clearfix"><div class="left"><h1>Desenvolvido por Max Kyle | Fórum - Caminhoneiros na Estrada</h1><h2>Por favor, registre e faça login para participar do fórum</h2>      <p class="grey">Fórum melhor vizualizado em <a href="http://www.mozilla.com/en-US/products/download.html?product=firefox-3.0.10&os=win&lang=en-US" onmouseover="showtip('Baixar Firefox ..!');" onmouseout="hidetip();" target="_blank"><img src="http://i43.servimg.com/u/f43/17/63/07/30/ff1011.png"></a> e <a href="http://www.google.com/chrome?hl=br" onmouseover="showtip('Baixar Google Chrome ..!');" onmouseout="hidetip();" target="_blank"><img src="http://i43.servimg.com/u/f43/17/63/07/30/gc1010.png"></a><br>com uma resolução de 1024x768 ou superior. <br></p></div><div class="left"><form action="/login?redirect=/" method="post" name="form_login" id="login-vds"><h1 class="padlock">Entrar</h1><label class="grey" for="log">Nome de Utilizador:</label><input class="field" id="log" type="text" size="10" name="username"><label class="grey" for="pwd">Senha:</label><input class="field" id="pwd" type="password" size="10" name="password"><input id="bt_login" class="bt_login" type="submit" name="login" value="Entrar"><label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever">  Lembra de min</label><div class="clear"></div></form><script type="text/javascript">//<![CDATA[
$(function(){$('#login-vds').attr('action','/login?redirect='+this.location.pathname);});//]]></script></div><div class="left right"><form action="/register?agreed=true&step=2" method="post"><h1>Registe-se rápido !</h1>            <label class="grey" for="signup">Nome de Utilizador : *</label><input class="field" type="text" id="username_reg" name="username" value="" size="25" maxlength="25"><label class="grey" for="email">Email: *</label><input class="field" type="text" name="email" id="email" size="23"><label class="grey" for="signup">Senha : *</label><input class="field" type="password" id="password_reg" name="password" value="" size="25" maxlength="25"><input type="submit" name="submit" value="Registe-se" class="bt_register"></form></div></div></div><!--
 /login --><!--
 Guia no topo | Fórum - Caminhoneiros NA. | Max Kyle -->  <div class="tab"><ul class="login"><li class="left"> </li><li>Fórum - Caminhoneiros na Estrada!</li><li class="sep">|</li><li id="toggle"><a id="open" class="open" href="#" style="display: block; ">Entrar | Registrar</a><a id="close" style="display: none; " class="close" href="#">Fechar</a>        </li><li class="right"> </li></ul> </div><!--
 / top --></div></div>

Assombrosamente.
avatar

Holmes
Usuário avançado

Inscrito dia : 11/11/2012
Mensagens : 303
Pontos Ativos : 413

Ver perfil do usuário

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por DarkDoki em 28/12/12, 07:57 pm


DarkDoki
Nível 10

Masculino
Inscrito dia : 01/11/2011
Mensagens : 250
Pontos Ativos : 390

Ver perfil do usuário http://darkcheatsbr.com

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Heero em 28/12/12, 07:58 pm

Dark cliquei ai e nada apareceu , kd o tutorial ?
avatar

Heero
Usuário avançado

Masculino
Inscrito dia : 03/12/2012
Mensagens : 373
Pontos Ativos : 504

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

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Holmes em 28/12/12, 08:03 pm

@Heero escreveu:Dark cliquei ai e nada apareceu , kd o tutorial ?
Você utilizou o último código que eu lhe passei e não funcionou?

Assombrosamente.
avatar

Holmes
Usuário avançado

Inscrito dia : 11/11/2012
Mensagens : 303
Pontos Ativos : 413

Ver perfil do usuário

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Heero em 28/12/12, 08:04 pm

Agora sim , mais quando eu clico a aba desce e as coisas estao tudo desorganizadas.
avatar

Heero
Usuário avançado

Masculino
Inscrito dia : 03/12/2012
Mensagens : 373
Pontos Ativos : 504

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

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Holmes em 28/12/12, 08:06 pm

Saudações,

Use esse código no Widget:
Código:
<style>#rep-mail-bar{font-size:11px;height:25px;left:0;position:fixed;top:0;width:100%;z-index:999}.tab{background:url(http://i.imgur.com/fDQkE.png) repeat-x 0 0;height:22px;position:relative;top:0;z-index:999}.tab ul.login{clear:right;color:#fff;display:block;float:right;font-size:80%;font-weight:700;height:42px;line-height:42px;margin:0;position:relative;right:150px;text-align:center;width:auto}.tab ul.login li.left{background:url(http://i.imgur.com/XwNu2.png) no-repeat left 0;display:block;float:left;height:42px;margin:0;padding:0;width:30px}.tab ul.login li.right{background:url(http://i.imgur.com/QmQzs.png) no-repeat left 0;display:block;float:left;height:42px;margin:0;padding:0;width:30px}.tab ul.login li{background:url(http://i.imgur.com/PAFBM.png) repeat-x 0 0;display:block;float:left;height:42px;padding:0 6px;text-align:left}.tab ul.login li a{color:#15ADFF}.tab ul.login li a:hover{color:#fff}.tab .sep{color:#414141}.tab a.close,.tab a.open{cursor:pointer;display:block;height:20px;line-height:20px!important;padding-left:30px!important;position:relative;top:11px;width:120px}.tab a.open{background:url(http://i.imgur.com/NWFec.png) no-repeat left 0}.tab a.close{background:url(http://i.imgur.com/GGiBD.png) no-repeat left 0}.tab a:hover.open{background:url(http://i.imgur.com/mboPc.png) no-repeat left -19px}.tab a:hover.close{background:url(http://i.imgur.com/xztqF.png) no-repeat left -19px}#toppanel{margin-left:auto;margin-right:auto;position:absolute;text-align:center;top:0;width:100%;z-index:999}#panel{background:#272727;color:#999;display:none;height:210px;overflow:hidden;position:relative;width:100%;z-index:3}#panel .content{font-size:.85em;margin:0 auto;padding-top:15px;text-align:left;width:960px}#panel .content .left{border-left:1px solid #333;float:left;padding:0 15px;width:280px}#panel .content .right{border-right:1px solid #333}#panel .content form{margin:0 0 10px}#panel .content label{clear:both;display:block;float:left;padding-top:2px;width:280px}#panel .content input.field{background:#414141;border:1px #1A1A1A solid;color:#fff;height:16px;margin-right:5px;margin-top:4px;width:200px}#panel .content input:focus.field{background:#545454}#panel .content input.bt_login,#panel .content input.bt_register{border:none;clear:left;cursor:pointer;display:block;float:left;font-weight:700;height:24px;margin:10px 0;text-align:center}#panel .content input.bt_login{background:transparent url(http://i.imgur.com/6E0rz.png) no-repeat 0 0;width:74px}#panel .content input.bt_register{background:transparent url(http://i.imgur.com/sxtfY.png) no-repeat 0 0;color:#fff;width:94px}#panel .lost-pwd{clear:right;display:block;float:left;font-size:.95em;padding:15px 5px 0;text-decoration:underline}.content{background-color:white}</style><div id="rep-mail-bar"><div id="toppanel"><div id="panel" style="display: none; "><div class="content clearfix"><div class="left"><h1>Desenvolvido por Max Kyle | Fórum - Caminhoneiros na Estrada</h1><h2>Por favor, registre e faça login para participar do fórum</h2>      <p class="grey">Fórum melhor vizualizado em <a href="http://www.mozilla.com/en-US/products/download.html?product=firefox-3.0.10&os=win&lang=en-US" onmouseover="showtip('Baixar Firefox ..!');" onmouseout="hidetip();" target="_blank"><img src="http://i43.servimg.com/u/f43/17/63/07/30/ff1011.png"></a> e <a href="http://www.google.com/chrome?hl=br" onmouseover="showtip('Baixar Google Chrome ..!');" onmouseout="hidetip();" target="_blank"><img src="http://i43.servimg.com/u/f43/17/63/07/30/gc1010.png"></a><br>com uma resolução de 1024x768 ou superior. <br></p></div><div class="left"><form action="/login?redirect=/" method="post" name="form_login" id="login-vds"><h1 class="padlock">Entrar</h1><label class="grey" for="log">Nome de Utilizador:</label><input class="field" id="log" type="text" size="10" name="username"><label class="grey" for="pwd">Senha:</label><input class="field" id="pwd" type="password" size="10" name="password"><input id="bt_login" class="bt_login" type="submit" name="login" value="Entrar"><label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever">  Lembra de min</label><div class="clear"></div></form><script type="text/javascript">//<![CDATA[
$(function(){$('#login-vds').attr('action','/login?redirect='+this.location.pathname);});//]]></script></div><div class="left right"><form action="/register?agreed=true&step=2" method="post"><h1>Registe-se rápido !</h1>            <label class="grey" for="signup">Nome de Utilizador : *</label><input class="field" type="text" id="username_reg" name="username" value="" size="25" maxlength="25"><label class="grey" for="email">Email: *</label><input class="field" type="text" name="email" id="email" size="23"><label class="grey" for="signup">Senha : *</label><input class="field" type="password" id="password_reg" name="password" value="" size="25" maxlength="25"><input type="submit" name="submit" value="Registe-se" class="bt_register"></form></div></div></div><!--
 /login --><!--
 Guia no topo | Fórum - Caminhoneiros NA. | Max Kyle -->  <div class="tab"><ul class="login"><li class="left"> </li><li>Fórum - Caminhoneiros na Estrada!</li><li class="sep">|</li><li id="toggle"><a id="open" class="open" href="#" style="display: block; ">Entrar | Registrar</a><a id="close" style="display: none; " class="close" href="#">Fechar</a>        </li><li class="right"> </li></ul> </div><!--
 / top --></div></div>

Assombrosamente.


Última edição por Holmes em 28/12/12, 08:08 pm, editado 1 vez(es)
avatar

Holmes
Usuário avançado

Inscrito dia : 11/11/2012
Mensagens : 303
Pontos Ativos : 413

Ver perfil do usuário

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Player Will em 28/12/12, 08:07 pm

Olá,

Adicione esse codigo em sua folha css..
Código:
#rep-mail-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  height: 25px;
  font-size: 11px;
  width: 100%;
  z-index: 999;
}
/* Panel Tab/button */
 
.tab {
    background: url(http://i.imgur.com/fDQkE.png) repeat-x 0 0;
  height: 22px;
  position: relative;
    top: 0;
    z-index: 999;
}
 
 
 
 
.tab ul.login {
  display: block;
  position: relative;
    float: right;
    clear: right;
    height: 42px;
  width: auto;
    font-weight: bold;
  line-height: 42px;
  margin: 0;
  right: 150px;
    color: white;
    font-size: 80%;
  text-align: center;
}
 
.tab ul.login li.left {
    background: url(http://i.imgur.com/XwNu2.png) no-repeat left 0;
    height: 42px;
  width: 30px;
  padding: 0;
  margin: 0;
    display: block;
  float: left;
}
 
.tab ul.login li.right {
    background: url(http://i.imgur.com/QmQzs.png) no-repeat left 0;
    height: 42px;
  width: 30px;
  padding: 0;
  margin: 0;
    display: block;
  float: left;
}
 
.tab ul.login li {
    text-align: left;
    padding: 0 6px;
  display: block;
  float: left;
  height: 42px;
    background: url(http://i.imgur.com/PAFBM.png) repeat-x 0 0;
}
 
.tab ul.login li a {
  color: #15ADFF;
}
 
.tab ul.login li a:hover {
  color: white;
}
 
.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;
  width: 120px;
}
 
.tab a.open {background: url(http://i.imgur.com/NWFec.png) no-repeat left 0;}
.tab a.close {background: url(http://i.imgur.com/GGiBD.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://i.imgur.com/mboPc.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://i.imgur.com/xztqF.png) no-repeat left -19px;}
/* sliding panel */
#toppanel {
    position: absolute;  /*Panel will overlap  content */
    /*position: relative;*/  /*Panel will "push" the content down */
    top: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
 
#panel {
  width: 100%;
  height: 210px;
  color: #999999;
  background: #272727;
  overflow: hidden;
  position: relative;
  z-index: 3;
  display: none;
}
 
#panel h1 {
  font-size: 1.6em;
  padding: 5px 0 10px;
  margin: 0;
  color: white;
}
 
#panel h2{
  font-size: 1.2em;
  padding: 10px 0 5px;
  margin: 0;
  color: white;
}
 
#panel p {
  margin: 5px 0;
  padding: 0;
}
 
#panel a {
  text-decoration: none;
  color: #15ADFF;
}
 
#panel a:hover {
  color: white;
}
 
#panel a-lost-pwd {
  display: block;
  float: left;
}
 
#panel .content {
  width: 960px;
  margin: 0 auto;
  padding-top: 15px;
  text-align: left;
  font-size: 0.85em;
}
 
#panel .content .left {
  width: 280px;
  float: left;
  padding: 0 15px;
  border-left: 1px solid #333;
}
 
#panel .content .right {
  border-right: 1px solid #333;
}
 
#panel .content form {
  margin: 0 0 10px 0;
}
 
#panel .content label {
  float: left;
  padding-top: 2px;
  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: white;
  height: 16px;
}
 
#panel .content input:focus.field {
  background: #545454;
}
 
/* BUTTONS */
/* Login and Register buttons */
#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: bold;
  margin: 10px 0;
}
 
#panel .content input.bt_login {
  width: 74px;
  background: transparent url(http://i.imgur.com/6E0rz.png) no-repeat 0 0;
}
 
#panel .content input.bt_register {
  width: 94px;
  color: white;
  background: transparent url(http://i.imgur.com/sxtfY.png) no-repeat 0 0;
}
 
#panel .lost-pwd {
  display: block;
  float:left;
  clear: right;
  padding: 15px 5px 0;
  font-size: 0.95em;
  text-decoration: underline;
}
 
 
.main .tieude .page-title{color:#fff!important;background:#fff;opacity:0.8}
.main .tieude {
height: 28px;
padding: 6px;
border: 4px solid
#DAD3D3;
-webkit-box-shadow: 0 2px 2px -2px
rgba(0, 0, 0, .52);
font-size: 12px;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-weight: 700;
background-color:
#DAD3D3;
color:
black;
}
.pun div, .pun td, .sig-line {
border-color: #
#DDD;
color: #
#DDD;
}
.main .tieude .page-title{padding: 5px;}.noidungthongbao{padding: 0px;height:27px!important}
 
a {
cursor: pointer;
color:
#3B5998;
text-decoration: none;
}

Crie uma pagina java script com o seguinte codigo:
Investimento: Em todas as paginas
Código:
$(document).ready(function() {
 
  // Expand Panel
  $("#open").click(function(){
      $("div#panel").slideDown("slow");
 
  }); 
 
  // Collapse Panel
  $("#close").click(function(){
      $("div#panel").slideUp("slow"); 
  });     
 
  // Switch buttons from "Log In | Register" to "Close Panel" on click
  $("#toggle a").click(function () {
      $("#toggle a").toggle();
  });     
     
});

Vá em templates> Geral> overall_header
procure por este código:
Código:
 <a id="top" name="top" accesskey="t"></a>

(se não encontrar nada apague os espaços do inicio do código)

Quando encontrar cole este código em cima:
Código:
 <!-- BEGIN switch_user_logged_out -->
  <div id="rep-mail-bar">
<div id="toppanel">
  <div id="panel" style="display: none; ">
      <div class="content clearfix">
        <div class="left">
            <h1>Desenvolvido por Max Kyle | AjudaFM</h1>
            <h2>Por favor, registre e faça login para participar do fórum</h2>     
            <p class="grey">Fórum melhor vizualizado em <a href="http://www.mozilla.com/en-US/products/download.html?product=firefox-3.0.10&os=win&lang=en-US" onmouseover="showtip('Baixar Firefox ..!');" onmouseout="hidetip();" target="_blank"><img src="http://i43.servimg.com/u/f43/17/63/07/30/ff1011.png"></a> e <a href="http://www.google.com/chrome?hl=br" onmouseover="showtip('Baixar Google Chrome ..!');" onmouseout="hidetip();" target="_blank"><img src="http://i43.servimg.com/u/f43/17/63/07/30/gc1010.png"></a><br>com uma resolução de 1024x768 ou superior. <br></p>
           
        </div>
        <div class="left">
           
                          <form action="/login?redirect=/" method="post" name="form_login" id="login-vds">
                <h1 class="padlock">Entrar</h1>
                            <label class="grey" for="log">Nome de Utilizador:</label>
 <input class="field" id="log" type="text" size="10" name="username">
<label class="grey" for="pwd">Senha:</label>
<input class="field" id="pwd" type="password" size="10" name="password">
 <input id="bt_login" class="bt_login" type="submit" name="login" value="Entrar">
 <label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever">  Lembra de min</label>
                <div class="clear"></div>
 </form>
 <script type="text/javascript">//<![CDATA[
$(function(){$('#login-vds').attr('action','/login?redirect='+this.location.pathname);});//]]></script>
 
           
        </div>
        <div class="left right">
                          <form action="/register?agreed=true&step=2" method="post">
              <h1>Registe-se rápido !</h1>           
              <label class="grey" for="signup">Nome de Utilizador : *</label>
<input class="field" type="text" id="username_reg" name="username" value="" size="25" maxlength="25">
              <label class="grey" for="email">Email: *</label>
              <input class="field" type="text" name="email" id="email" size="23">
                                        <label class="grey" for="signup">Senha : *</label>
<input class="field" type="password" id="password_reg" name="password" value="" size="25" maxlength="25">
 
              <input type="submit" name="submit" value="Registe-se" class="bt_register">
            </form>
        </div>
      </div>
  </div> <!-- /login --> 
 
    <!-- Guia no topo | AjudaFM | Max Kyle --> 
  <div class="tab">
      <ul class="login">
          <li class="left"> </li>
          <li>AjudaFM!</li>
        <li class="sep">|</li>
        <li id="toggle">
            <a id="open" class="open" href="#" style="display: block; ">Entrar | Registrar</a>
            <a id="close" style="display: none; " class="close" href="#">Fechar</a>       
        </li>
          <li class="right"> </li>
      </ul>
  </div> <!-- / top -->
 
</div>
  <!-- END switch_user_logged_out -->
avatar

Player Will
Nível 5

Masculino
Inscrito dia : 17/12/2012
Mensagens : 42
Pontos Ativos : 60

Ver perfil do usuário http://www.exptech.com.br/forum

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Heero em 28/12/12, 08:11 pm

Man meu forum nao tem template '-' e invision
avatar

Heero
Usuário avançado

Masculino
Inscrito dia : 03/12/2012
Mensagens : 373
Pontos Ativos : 504

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

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Holmes em 28/12/12, 08:13 pm

@Heero escreveu:Man meu forum nao tem template '-' e invision
O código que eu te passei não funcionou? Sempre quando você responder após uma resposta diga se funcionou ou não, assim fico na dúvida se você viu minha resposta.

Até mais.
avatar

Holmes
Usuário avançado

Inscrito dia : 11/11/2012
Mensagens : 303
Pontos Ativos : 413

Ver perfil do usuário

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Heero em 28/12/12, 08:15 pm

Holmes eu respondi sim , FUNCIONOU mais quando eu cliquei a ABA desceu e estava tudo embaraçado dentro do painel.
avatar

Heero
Usuário avançado

Masculino
Inscrito dia : 03/12/2012
Mensagens : 373
Pontos Ativos : 504

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

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Holmes em 28/12/12, 08:29 pm

@Heero escreveu:Holmes eu respondi sim , FUNCIONOU mais quando eu cliquei a ABA desceu e estava tudo embaraçado dentro do painel.
Exatamente, se você verificar, você verá que eu já respondi a mensagem que você diz isso.

Assombrosamente.
avatar

Holmes
Usuário avançado

Inscrito dia : 11/11/2012
Mensagens : 303
Pontos Ativos : 413

Ver perfil do usuário

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Heero em 28/12/12, 08:31 pm

entao amigo eu susbistitiu o codigo q vc mando e continuou a msm coisa,
avatar

Heero
Usuário avançado

Masculino
Inscrito dia : 03/12/2012
Mensagens : 373
Pontos Ativos : 504

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

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Holmes em 28/12/12, 08:35 pm

Saudações,

Use esse código no Widget:
Código:
<style>#rep-mail-bar{font-size:11px;height:25px;left:0;position:fixed;top:0;width:100%;z-index:999}.tab{background:url(http://i.imgur.com/fDQkE.png) repeat-x 0 0;height:22px;position:relative;top:0;z-index:999}.tab ul.login{clear:right;color:#fff;display:block;float:right;font-size:80%;font-weight:700;height:42px;line-height:42px;margin:0;position:relative;right:150px;text-align:center;width:auto}.tab ul.login li.left{background:url(http://i.imgur.com/XwNu2.png) no-repeat left 0;display:block;float:left;height:42px;margin:0;padding:0;width:30px}.tab ul.login li.right{background:url(http://i.imgur.com/QmQzs.png) no-repeat left 0;display:block;float:left;height:42px;margin:0;padding:0;width:30px}.tab ul.login li{background:url(http://i.imgur.com/PAFBM.png) repeat-x 0 0;display:block;float:left;height:42px;padding:0 6px;text-align:left}.tab ul.login li a{color:#15ADFF}.tab ul.login li a:hover{color:#fff}.tab .sep{color:#414141}.tab a.close,.tab a.open{cursor:pointer;display:block;height:20px;line-height:20px!important;padding-left:30px!important;position:relative;top:11px;width:120px}.tab a.open{background:url(http://i.imgur.com/NWFec.png) no-repeat left 0}.tab a.close{background:url(http://i.imgur.com/GGiBD.png) no-repeat left 0}.tab a:hover.open{background:url(http://i.imgur.com/mboPc.png) no-repeat left -19px}.tab a:hover.close{background:url(http://i.imgur.com/xztqF.png) no-repeat left -19px}#toppanel{margin-left:auto;margin-right:auto;position:absolute;text-align:center;top:0;width:100%;z-index:999}#panel{background:#272727;color:#999;display:none;height:210px;overflow:hidden;position:relative;width:100%;z-index:3}#panel .content{font-size:.85em;margin:0 auto;padding-top:15px;text-align:left;width:960px}#panel .content .left{border-left:1px solid #333;float:left;padding:0 15px;width:280px}#panel .content .right{border-right:1px solid #333}#panel .content form{margin:0 0 10px}#panel .content label{clear:both;display:block;float:left;padding-top:2px;width:280px}#panel .content input.field{background:#414141;border:1px #1A1A1A solid;color:#fff;height:16px;margin-right:5px;margin-top:4px;width:200px}#panel .content input:focus.field{background:#545454}#panel .content input.bt_login,#panel .content input.bt_register{border:none;clear:left;cursor:pointer;display:block;float:left;font-weight:700;height:24px;margin:10px 0;text-align:center}#panel .content input.bt_login{background:transparent url(http://i.imgur.com/6E0rz.png) no-repeat 0 0;width:74px}#panel .content input.bt_register{background:transparent url(http://i.imgur.com/sxtfY.png) no-repeat 0 0;color:#fff;width:94px}#panel .lost-pwd{clear:right;display:block;float:left;font-size:.95em;padding:15px 5px 0;text-decoration:underline}.content{background-color:white}</style><div id="rep-mail-bar"><div id="toppanel"><div id="panel" style="display: none; "><div class="content clearfix"><div class="left"><h1>Desenvolvido por Max Kyle | Fórum - Caminhoneiros na Estrada</h1><h2>Por favor, registre e faça login para participar do fórum</h2>      <p class="grey">Fórum melhor vizualizado em <a href="http://www.mozilla.com/en-US/products/download.html?product=firefox-3.0.10&os=win&lang=en-US" onmouseover="showtip('Baixar Firefox ..!');" onmouseout="hidetip();" target="_blank"><img src="http://i43.servimg.com/u/f43/17/63/07/30/ff1011.png"></a> e <a href="http://www.google.com/chrome?hl=br" onmouseover="showtip('Baixar Google Chrome ..!');" onmouseout="hidetip();" target="_blank"><img src="http://i43.servimg.com/u/f43/17/63/07/30/gc1010.png"></a><br>com uma resolução de 1024x768 ou superior. <br></p></div><div class="left"><form action="/login?redirect=/" method="post" name="form_login" id="login-vds"><h1 class="padlock">Entrar</h1><label class="grey" for="log">Nome de Utilizador:</label><input class="field" id="log" type="text" size="10" name="username"><label class="grey" for="pwd">Senha:</label><input class="field" id="pwd" type="password" size="10" name="password"><input id="bt_login" class="bt_login" type="submit" name="login" value="Entrar"><label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever">  Lembra de min</label><div class="clear"></div></form><script type="text/javascript">//<![CDATA[
$(function(){$('#login-vds').attr('action','/login?redirect='+this.location.pathname);});//]]></script></div><div class="left right"><form action="/register?agreed=true&step=2" method="post"><h1>Registe-se rápido !</h1>            <label class="grey" for="signup">Nome de Utilizador : *</label><input class="field" type="text" id="username_reg" name="username" value="" size="25" maxlength="25"><label class="grey" for="email">Email: *</label><input class="field" type="text" name="email" id="email" size="23"><label class="grey" for="signup">Senha : *</label><input class="field" type="password" id="password_reg" name="password" value="" size="25" maxlength="25"><input type="submit" name="submit" value="Registe-se" class="bt_register"></form></div></div></div><!--
 /login --><!--
 Guia no topo | Fórum - Caminhoneiros NA. | Max Kyle -->  <div class="tab"><ul class="login"><li class="left"> </li><li>Fórum - Caminhoneiros na Estrada!</li><li class="sep">|</li><li id="toggle"><a id="open" class="open" href="#" style="display: block; ">Entrar | Registrar</a><a id="close" style="display: none; " class="close" href="#">Fechar</a>        </li><li class="right"> </li></ul> </div><!--
 / top --></div></div>

Assombrosamente.
avatar

Holmes
Usuário avançado

Inscrito dia : 11/11/2012
Mensagens : 303
Pontos Ativos : 413

Ver perfil do usuário

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Heero em 28/12/12, 08:44 pm

Olhe como ficou ,

COmo mudo a cor do fundo disso ai ? e coloco um cinza claro ?

Do lado do registre-se rapido tem uma linha e um espaço em branco e possivel removelo ?
avatar

Heero
Usuário avançado

Masculino
Inscrito dia : 03/12/2012
Mensagens : 373
Pontos Ativos : 504

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

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Holmes em 28/12/12, 08:47 pm

Saudações,

Use esse código no Widget:
Código:
<style>#rep-mail-bar{font-size:11px;height:25px;left:0;position:fixed;top:0;width:100%;z-index:999}.tab{background:url(http://i.imgur.com/fDQkE.png) repeat-x 0 0;height:22px;position:relative;top:0;z-index:999}.tab ul.login{clear:right;color:#fff;display:block;float:right;font-size:80%;font-weight:700;height:42px;line-height:42px;margin:0;position:relative;right:150px;text-align:center;width:auto}.tab ul.login li.left{background:url(http://i.imgur.com/XwNu2.png) no-repeat left 0;display:block;float:left;height:42px;margin:0;padding:0;width:30px}.tab ul.login li.right{background:url(http://i.imgur.com/QmQzs.png) no-repeat left 0;display:block;float:left;height:42px;margin:0;padding:0;width:30px}.tab ul.login li{background:url(http://i.imgur.com/PAFBM.png) repeat-x 0 0;display:block;float:left;height:42px;padding:0 6px;text-align:left}.tab ul.login li a{color:#15ADFF}.tab ul.login li a:hover{color:#fff}.tab .sep{color:#414141}.tab a.close,.tab a.open{cursor:pointer;display:block;height:20px;line-height:20px!important;padding-left:30px!important;position:relative;top:11px;width:120px}.tab a.open{background:url(http://i.imgur.com/NWFec.png) no-repeat left 0}.tab a.close{background:url(http://i.imgur.com/GGiBD.png) no-repeat left 0}.tab a:hover.open{background:url(http://i.imgur.com/mboPc.png) no-repeat left -19px}.tab a:hover.close{background:url(http://i.imgur.com/xztqF.png) no-repeat left -19px}#toppanel{margin-left:auto;margin-right:auto;position:absolute;text-align:center;top:0;width:100%;z-index:999}#panel{background:#272727;color:#999;display:none;height:210px;overflow:hidden;position:relative;width:100%;z-index:3}#panel .content{font-size:.85em;margin:0 auto;padding-top:15px;text-align:left;width:960px}#panel .content .left{border-left:1px solid #333;float:left;padding:0 15px;width:280px}#panel .content .right{border-right:1px solid #333}#panel .content form{margin:0 0 10px}#panel .content label{clear:both;display:block;float:left;padding-top:2px;width:280px}#panel .content input.field{background:#414141;border:1px #1A1A1A solid;color:#fff;height:16px;margin-right:5px;margin-top:4px;width:200px}#panel .content input:focus.field{background:#545454}#panel .content input.bt_login,#panel .content input.bt_register{border:none;clear:left;cursor:pointer;display:block;float:left;font-weight:700;height:24px;margin:10px 0;text-align:center}#panel .content input.bt_login{background:transparent url(http://i.imgur.com/6E0rz.png) no-repeat 0 0;width:74px}#panel .content input.bt_register{background:transparent url(http://i.imgur.com/sxtfY.png) no-repeat 0 0;color:#fff;width:94px}#panel .lost-pwd{clear:right;display:block;float:left;font-size:.95em;padding:15px 5px 0;text-decoration:underline}</style><div id="rep-mail-bar"><div id="toppanel"><div id="panel" style="display: none; "><div class="content clearfix"><div class="left"><h1>Desenvolvido por Max Kyle | Fórum - Caminhoneiros na Estrada</h1><h2>Por favor, registre e faça login para participar do fórum</h2>      <p class="grey">Fórum melhor vizualizado em <a href="http://www.mozilla.com/en-US/products/download.html?product=firefox-3.0.10&os=win&lang=en-US" onmouseover="showtip('Baixar Firefox ..!');" onmouseout="hidetip();" target="_blank"><img src="http://i43.servimg.com/u/f43/17/63/07/30/ff1011.png"></a> e <a href="http://www.google.com/chrome?hl=br" onmouseover="showtip('Baixar Google Chrome ..!');" onmouseout="hidetip();" target="_blank"><img src="http://i43.servimg.com/u/f43/17/63/07/30/gc1010.png"></a><br>com uma resolução de 1024x768 ou superior. <br></p></div><div class="left"><form action="/login?redirect=/" method="post" name="form_login" id="login-vds"><h1 class="padlock">Entrar</h1><label class="grey" for="log">Nome de Utilizador:</label><input class="field" id="log" type="text" size="10" name="username"><label class="grey" for="pwd">Senha:</label><input class="field" id="pwd" type="password" size="10" name="password"><input id="bt_login" class="bt_login" type="submit" name="login" value="Entrar"><label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever">  Lembra de min</label><div class="clear"></div></form><script type="text/javascript">//<![CDATA[
$(function(){$('#login-vds').attr('action','/login?redirect='+this.location.pathname);});//]]></script></div><div class="left right"><form action="/register?agreed=true&step=2" method="post"><h1>Registe-se rápido !</h1>            <label class="grey" for="signup">Nome de Utilizador : *</label><input class="field" type="text" id="username_reg" name="username" value="" size="25" maxlength="25"><label class="grey" for="email">Email: *</label><input class="field" type="text" name="email" id="email" size="23"><label class="grey" for="signup">Senha : *</label><input class="field" type="password" id="password_reg" name="password" value="" size="25" maxlength="25"><input type="submit" name="submit" value="Registe-se" class="bt_register"></form></div></div></div><!--
 /login --><!--
 Guia no topo | Fórum - Caminhoneiros NA. | Max Kyle -->  <div class="tab"><ul class="login"><li class="left"> </li><li>Fórum - Caminhoneiros na Estrada!</li><li class="sep">|</li><li id="toggle"><a id="open" class="open" href="#" style="display: block; ">Entrar | Registrar</a><a id="close" style="display: none; " class="close" href="#">Fechar</a>        </li><li class="right"> </li></ul> </div><!--
 / top --></div></div>

Assombrosamente.
avatar

Holmes
Usuário avançado

Inscrito dia : 11/11/2012
Mensagens : 303
Pontos Ativos : 413

Ver perfil do usuário

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Heero em 28/12/12, 08:51 pm

Pq o quadrado dos outro negocio de preencher estao amarelos e nao cinza ?

http://i.imgur.com/4ntml.png <--
avatar

Heero
Usuário avançado

Masculino
Inscrito dia : 03/12/2012
Mensagens : 373
Pontos Ativos : 504

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

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Holmes em 28/12/12, 09:00 pm

@Heero escreveu:Pq o quadrado dos outro negocio de preencher estao amarelos e nao cinza ?

http://i.imgur.com/4ntml.png <--
Não entendi, não encontrei nada amarelo.

Você se refere aos campos que estão brancos? Você quer que eles fiquem cinza?

Assombrosamente.


Última edição por Holmes em 28/12/12, 09:04 pm, editado 1 vez(es)
avatar

Holmes
Usuário avançado

Inscrito dia : 11/11/2012
Mensagens : 303
Pontos Ativos : 413

Ver perfil do usuário

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Heero em 28/12/12, 09:02 pm

Pra mim e amarelo mais se vc acha q e branco , se puder poem cinza pra eu ;D
avatar

Heero
Usuário avançado

Masculino
Inscrito dia : 03/12/2012
Mensagens : 373
Pontos Ativos : 504

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

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Heero em 28/12/12, 10:30 pm

UP
avatar

Heero
Usuário avançado

Masculino
Inscrito dia : 03/12/2012
Mensagens : 373
Pontos Ativos : 504

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

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Holmes em 28/12/12, 10:41 pm

Saudações,

Use esse código no Widget:
Código:
<style>#rep-mail-bar{font-size:11px;height:25px;left:0;position:fixed;top:0;width:100%;z-index:999}.tab{background:url(http://i.imgur.com/fDQkE.png) repeat-x 0 0;height:22px;position:relative;top:0;z-index:999}.tab ul.login{clear:right;color:#fff;display:block;float:right;font-size:80%;font-weight:700;height:42px;line-height:42px;margin:0;position:relative;right:150px;text-align:center;width:auto}.tab ul.login li.left{background:url(http://i.imgur.com/XwNu2.png) no-repeat left 0;display:block;float:left;height:42px;margin:0;padding:0;width:30px}.tab ul.login li.right{background:url(http://i.imgur.com/QmQzs.png) no-repeat left 0;display:block;float:left;height:42px;margin:0;padding:0;width:30px}.tab ul.login li{background:url(http://i.imgur.com/PAFBM.png) repeat-x 0 0;display:block;float:left;height:42px;padding:0 6px;text-align:left}.tab ul.login li a{color:#15ADFF}.tab ul.login li a:hover{color:#fff}.tab .sep{color:#414141}.tab a.close,.tab a.open{cursor:pointer;display:block;height:20px;line-height:20px!important;padding-left:30px!important;position:relative;top:11px;width:120px}.tab a.open{background:url(http://i.imgur.com/NWFec.png) no-repeat left 0}.tab a.close{background:url(http://i.imgur.com/GGiBD.png) no-repeat left 0}.tab a:hover.open{background:url(http://i.imgur.com/mboPc.png) no-repeat left -19px}.tab a:hover.close{background:url(http://i.imgur.com/xztqF.png) no-repeat left -19px}#toppanel{margin-left:auto;margin-right:auto;position:absolute;text-align:center;top:0;width:100%;z-index:999}#panel{background:#272727;color:#999;display:none;height:210px;overflow:hidden;position:relative;width:100%;z-index:3}#panel .content{font-size:.85em;margin:0 auto;padding-top:15px;text-align:left;width:960px}#panel .content .left{border-left:1px solid #333;float:left;padding:0 15px;width:280px}#panel .content .right{border-right:1px solid #333}#panel .content form{margin:0 0 10px}#panel .content label{clear:both;display:block;float:left;padding-top:2px;width:280px}#panel .content input.field{background:#414141;border:1px #1A1A1A solid;color:#fff;height:16px;margin-right:5px;margin-top:4px;width:200px}#panel .content input:focus.field{background:#545454}#panel .content input.bt_login,#panel .content input.bt_register{border:none;clear:left;cursor:pointer;display:block;float:left;font-weight:700;height:24px;margin:10px 0;text-align:center}#panel .content input.bt_login{background:transparent url(http://i.imgur.com/6E0rz.png) no-repeat 0 0;width:74px}#panel .content input.bt_register{background:transparent url(http://i.imgur.com/sxtfY.png) no-repeat 0 0;color:#fff;width:94px}#panel .lost-pwd{clear:right;display:block;float:left;font-size:.95em;padding:15px 5px 0;text-decoration:underline}#panel .left input{background-color:#414141!important}</style><div id="rep-mail-bar"><div id="toppanel"><div id="panel" style="display: none; "><div class="content clearfix"><div class="left"><h1>Desenvolvido por Max Kyle | Fórum - Caminhoneiros na Estrada</h1><h2>Por favor, registre e faça login para participar do fórum</h2>      <p class="grey">Fórum melhor vizualizado em <a href="http://www.mozilla.com/en-US/products/download.html?product=firefox-3.0.10&os=win&lang=en-US" onmouseover="showtip('Baixar Firefox ..!');" onmouseout="hidetip();" target="_blank"><img src="http://i43.servimg.com/u/f43/17/63/07/30/ff1011.png"></a> e <a href="http://www.google.com/chrome?hl=br" onmouseover="showtip('Baixar Google Chrome ..!');" onmouseout="hidetip();" target="_blank"><img src="http://i43.servimg.com/u/f43/17/63/07/30/gc1010.png"></a><br>com uma resolução de 1024x768 ou superior. <br></p></div><div class="left"><form action="/login?redirect=/" method="post" name="form_login" id="login-vds"><h1 class="padlock">Entrar</h1><label class="grey" for="log">Nome de Utilizador:</label><input class="field" id="log" type="text" size="10" name="username"><label class="grey" for="pwd">Senha:</label><input class="field" id="pwd" type="password" size="10" name="password"><input id="bt_login" class="bt_login" type="submit" name="login" value="Entrar"><label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever">  Lembra de min</label><div class="clear"></div></form><script type="text/javascript">//<![CDATA[
$(function(){$('#login-vds').attr('action','/login?redirect='+this.location.pathname);});//]]></script></div><div class="left right"><form action="/register?agreed=true&step=2" method="post"><h1>Registe-se rápido !</h1>            <label class="grey" for="signup">Nome de Utilizador : *</label><input class="field" type="text" id="username_reg" name="username" value="" size="25" maxlength="25"><label class="grey" for="email">Email: *</label><input class="field" type="text" name="email" id="email" size="23"><label class="grey" for="signup">Senha : *</label><input class="field" type="password" id="password_reg" name="password" value="" size="25" maxlength="25"><input type="submit" name="submit" value="Registe-se" class="bt_register"></form></div></div></div><!--
 /login --><!--
 Guia no topo | Fórum - Caminhoneiros NA. | Max Kyle -->  <div class="tab"><ul class="login"><li class="left"> </li><li>Fórum - Caminhoneiros na Estrada!</li><li class="sep">|</li><li id="toggle"><a id="open" class="open" href="#" style="display: block; ">Entrar | Registrar</a><a id="close" style="display: none; " class="close" href="#">Fechar</a>        </li><li class="right"> </li></ul> </div><!--
 / top --></div></div>

Assombrosamente.
avatar

Holmes
Usuário avançado

Inscrito dia : 11/11/2012
Mensagens : 303
Pontos Ativos : 413

Ver perfil do usuário

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por [S]herlock em 28/12/12, 10:49 pm

Olá Heero ,

Aceda em :

Painel de Controle :seta2: Visualização :seta2: Imagens e Cores :seta2: Cores :seta2: Folha de Estilho CSS


Adicione este código na folha :


Código:

#rep-mail-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  height: 25px;
  font-size: 11px;
  width: 100%;
  z-index: 999;
}
/* Panel Tab/button */
 
.tab {
    background: url(http://i.imgur.com/fDQkE.png) repeat-x 0 0;
  height: 22px;
  position: relative;
    top: 0;
    z-index: 999;
}
 
 
 
 
.tab ul.login {
  display: block;
  position: relative;
    float: right;
    clear: right;
    height: 42px;
  width: auto;
    font-weight: bold;
  line-height: 42px;
  margin: 0;
  right: 150px;
    color: white;
    font-size: 80%;
  text-align: center;
}
 
.tab ul.login li.left {
    background: url(http://i.imgur.com/XwNu2.png) no-repeat left 0;
    height: 42px;
  width: 30px;
  padding: 0;
  margin: 0;
    display: block;
  float: left;
}
 
.tab ul.login li.right {
    background: url(http://i.imgur.com/QmQzs.png) no-repeat left 0;
    height: 42px;
  width: 30px;
  padding: 0;
  margin: 0;
    display: block;
  float: left;
}
 
.tab ul.login li {
    text-align: left;
    padding: 0 6px;
  display: block;
  float: left;
  height: 42px;
    background: url(http://i.imgur.com/PAFBM.png) repeat-x 0 0;
}
 
.tab ul.login li a {
  color: #15ADFF;
}
 
.tab ul.login li a:hover {
  color: white;
}
 
.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;
  width: 120px;
}
 
.tab a.open {background: url(http://i.imgur.com/NWFec.png) no-repeat left 0;}
.tab a.close {background: url(http://i.imgur.com/GGiBD.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://i.imgur.com/mboPc.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://i.imgur.com/xztqF.png) no-repeat left -19px;}
/* sliding panel */
#toppanel {
    position: absolute;  /*Panel will overlap  content */
    /*position: relative;*/  /*Panel will "push" the content down */
    top: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
 
#panel {
  width: 100%;
  height: 210px;
  color: #999999;
  background: #272727;
  overflow: hidden;
  position: relative;
  z-index: 3;
  display: none;
}
 
#panel h1 {
  font-size: 1.6em;
  padding: 5px 0 10px;
  margin: 0;
  color: white;
}
 
#panel h2{
  font-size: 1.2em;
  padding: 10px 0 5px;
  margin: 0;
  color: white;
}
 
#panel p {
  margin: 5px 0;
  padding: 0;
}
 
#panel a {
  text-decoration: none;
  color: #15ADFF;
}
 
#panel a:hover {
  color: white;
}
 
#panel a-lost-pwd {
  display: block;
  float: left;
}
 
#panel .content {
  width: 960px;
  margin: 0 auto;
  padding-top: 15px;
  text-align: left;
  font-size: 0.85em;
}
 
#panel .content .left {
  width: 280px;
  float: left;
  padding: 0 15px;
  border-left: 1px solid #333;
}
 
#panel .content .right {
  border-right: 1px solid #333;
}
 
#panel .content form {
  margin: 0 0 10px 0;
}
 
#panel .content label {
  float: left;
  padding-top: 2px;
  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: white;
  height: 16px;
}
 
#panel .content input:focus.field {
  background: #545454;
}
 
/* BUTTONS */
/* Login and Register buttons */
#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: bold;
  margin: 10px 0;
}
 
#panel .content input.bt_login {
  width: 74px;
  background: transparent url(http://i.imgur.com/6E0rz.png) no-repeat 0 0;
}
 
#panel .content input.bt_register {
  width: 94px;
  color: white;
  background: transparent url(http://i.imgur.com/sxtfY.png) no-repeat 0 0;
}
 
#panel .lost-pwd {
  display: block;
  float:left;
  clear: right;
  padding: 15px 5px 0;
  font-size: 0.95em;
  text-decoration: underline;
}
 
 
.main .tieude .page-title{color:#fff!important;background:#fff;opacity:0.8}
.main .tieude {
height: 28px;
padding: 6px;
border: 4px solid
#DAD3D3;
-webkit-box-shadow: 0 2px 2px -2px
rgba(0, 0, 0, .52);
font-size: 12px;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-weight: 700;
background-color:
#DAD3D3;
color:
black;
}
.pun div, .pun td, .sig-line {
border-color: #
#DDD;
color: #
#DDD;
}
.main .tieude .page-title{padding: 5px;}.noidungthongbao{padding: 0px;height:27px!important}
 
a {
cursor: pointer;
color:
#3B5998;
text-decoration: none;
}

Agora , aceda em :

Painel de Controle :seta2: Módulos :seta2: Java Script e HTML'S :seta2: Códigos Java Script



Código:

$(document).ready(function() {
 
  // Expand Panel
  $("#open").click(function(){
      $("div#panel").slideDown("slow");
 
  }); 
 
  // Collapse Panel
  $("#close").click(function(){
      $("div#panel").slideUp("slow"); 
  });     
 
  // Switch buttons from "Log In | Register" to "Close Panel" on click
  $("#toggle a").click(function () {
      $("#toggle a").toggle();
  });     
     
});

Aceda novamente em :

Painel de Controle :seta2: Visualização :seta2: Templates :seta2: Geral


overall_header
Procure por este código:

Código:

    <a id="top" name="top" accesskey="t"></a>

(Se não encontrar nada apague os espaços do inicio do código)


Quando encontrar cole este código em cima:


Código:

 <!-- BEGIN switch_user_logged_out -->
  <div id="rep-mail-bar">
<div id="toppanel">
  <div id="panel" style="display: none; ">
      <div class="content clearfix">
        <div class="left">
            <h1>Desenvolvido por Max Kyle | AjudaFM</h1>
            <h2>Por favor, registre e faça login para participar do fórum</h2>     
            <p class="grey">Fórum melhor vizualizado em <a href="http://www.mozilla.com/en-US/products/download.html?product=firefox-3.0.10&os=win&lang=en-US" onmouseover="showtip('Baixar Firefox ..!');" onmouseout="hidetip();" target="_blank"><img src="http://i43.servimg.com/u/f43/17/63/07/30/ff1011.png"></a> e <a href="http://www.google.com/chrome?hl=br" onmouseover="showtip('Baixar Google Chrome ..!');" onmouseout="hidetip();" target="_blank"><img src="http://i43.servimg.com/u/f43/17/63/07/30/gc1010.png"></a><br>com uma resolução de 1024x768 ou superior. <br></p>
           
        </div>
        <div class="left">
           
                          <form action="/login?redirect=/" method="post" name="form_login" id="login-vds">
                <h1 class="padlock">Entrar</h1>
                            <label class="grey" for="log">Nome de Utilizador:</label>
 <input class="field" id="log" type="text" size="10" name="username">
<label class="grey" for="pwd">Senha:</label>
<input class="field" id="pwd" type="password" size="10" name="password">
 <input id="bt_login" class="bt_login" type="submit" name="login" value="Entrar">
 <label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever">  Lembra de min</label>
                <div class="clear"></div>
 </form>
 <script type="text/javascript">//<![CDATA[
$(function(){$('#login-vds').attr('action','/login?redirect='+this.location.pathname);});//]]></script>
 
           
        </div>
        <div class="left right">
                          <form action="/register?agreed=true&step=2" method="post">
              <h1>Registe-se rápido !</h1>           
              <label class="grey" for="signup">Nome de Utilizador : *</label>
<input class="field" type="text" id="username_reg" name="username" value="" size="25" maxlength="25">
              <label class="grey" for="email">Email: *</label>
              <input class="field" type="text" name="email" id="email" size="23">
                                        <label class="grey" for="signup">Senha : *</label>
<input class="field" type="password" id="password_reg" name="password" value="" size="25" maxlength="25">
 
              <input type="submit" name="submit" value="Registe-se" class="bt_register">
            </form>
        </div>
      </div>
  </div> <!-- /login --> 
 
    <!-- Guia no topo | AjudaFM | Max Kyle --> 
  <div class="tab">
      <ul class="login">
          <li class="left"> </li>
          <li>AjudaFM!</li>
        <li class="sep">|</li>
        <li id="toggle">
            <a id="open" class="open" href="#" style="display: block; ">Entrar | Registrar</a>
            <a id="close" style="display: none; " class="close" href="#">Fechar</a>       
        </li>
          <li class="right"> </li>
      </ul>
  </div> <!-- / top -->
 
</div>
  <!-- END switch_user_logged_out -->

Pronto . Só salvar e publicar .

OBS : Para aparecer , precisa estar deslogado no fórum .

Créditos : AjudaFM
avatar

[S]herlock
Usuário avançado

Masculino
Inscrito dia : 18/07/2012
Mensagens : 399
Pontos Ativos : 597

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

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Heero em 28/12/12, 11:23 pm

Holmes , ficou um quadrado cinza atraz dos dois botoes .'' Entrar '' e o '' Registrar-se'' ..
avatar

Heero
Usuário avançado

Masculino
Inscrito dia : 03/12/2012
Mensagens : 373
Pontos Ativos : 504

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

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Heero em 28/12/12, 11:24 pm

HugoPimenta meu forum e INVISION nao tem como acessar as opções do template.
avatar

Heero
Usuário avançado

Masculino
Inscrito dia : 03/12/2012
Mensagens : 373
Pontos Ativos : 504

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

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Heero em 29/12/12, 12:28 am

up
avatar

Heero
Usuário avançado

Masculino
Inscrito dia : 03/12/2012
Mensagens : 373
Pontos Ativos : 504

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

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Heero em 29/12/12, 01:10 am

Resolvido PODE FECHAR O TOPICO
avatar

Heero
Usuário avançado

Masculino
Inscrito dia : 03/12/2012
Mensagens : 373
Pontos Ativos : 504

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

Resolvido Re: Como coloco isso no meu forum ?

Mensagem por Heero em 29/12/12, 01:11 am

Resolvido PODE FECHAR O TOPICO
avatar

Heero
Usuário avançado

Masculino
Inscrito dia : 03/12/2012
Mensagens : 373
Pontos Ativos : 504

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

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