[Resolvido] Login e sair como nesse site

Boa tarde!
Pessoal veja se é possível adicionar,
Gostaria de inserir esse tipo de login em meu fórum (Invision).
Link: http://web-kreation.com/demos/login_form_mootools_1.2/

Aguardo respostas, espero que alguém possa me ajudar!

acho que não há como fazer isto .

Olá,
Lamento, mais como ja foi dito acima isto ainda não é possivel, mais faça um sugestão.
Até mais.

Olá Mah!

Estive a adaptar o código, e fiz para ele funcionar em fóruns, ele funciona na "Mensagem na Home page", para ir lá faça assim:

Vá em:

>>> Painel de Controle >>> Visualização >> Home Page >> Geral > Mensagem na Home page > Conteúdo da mensagem

E coloque o seguinte código:
Código:

Código: <!-- The main style sheet -->      <link rel="stylesheet" href="http://web-kreation.com/demos/login_form_mootools_1.2/style.css" type="text/css" media="screen" /> <!-- The CSS -->     <link rel="stylesheet" href="http://web-kreation.com/demos/login_form_mootools_1.2/fx.slide.css" type="text/css" media="screen" /> <!-- Mootools - the core -->    <script type="text/javascript" src="http://web-kreation.com/demos/login_form_mootools_1.2/js/mootools-1.2-core-yc.js"></script> <!--Toggle effect (show/hide login form) -->    <script type="text/javascript" src="http://web-kreation.com/demos/login_form_mootools_1.2/js/mootools-1.2-more.js"></script>    <script type="text/javascript" src="http://web-kreation.com/demos/login_form_mootools_1.2/js/fx.slide.js"></script> <script> var nnome = "{USERNAME}" ; if ( nnome != "Convidado"){ document.write('   <style>   '); document.write('   #loginn{display:none!important;}   '); document.write('   </style>   '); } </script>    <!-- Login -->    <div id="loginn" style="display: block;position: absolute;left: 0px;top: 0px;width: 100%;">    <div id="login">       <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">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="#">Entrar</a></li>          </ul> <!-- / login -->       </div> <!-- / top -->         <div class="clearfix"></div>   </div>

E então clique em "Salvar".

Espero ter lhe ajudado Mah!
Byte

---

PS: Fiquem a vontade para modificar o código para poder aparecer em todas as páginas, eu estou um pouco cansado pois aqui já é tarde ( ), boa noite e boa sorte para todos que quiserem continuar o meu trabalho! Desculpem não ter feito isso ainda

Sim funciona!
Obrigada Byte, mas me diga uma coisa, caso eu queira alterar as imagens que aparecem como devo fazer?

Aguardo sua resposta.

Byte poderia fazer também para phpbb3 ?

Pois testei assim e não deu...

Abraços.

Desculpem-me pessoal, havia esquecido de fechar uma div, o que estragava o layout do PHPBB3, aqui o código ajeitado (recomendo colocar este, pois no outro mesmo que não aparecesse havia um erro):

Código:

Código: <!-- The CSS -->    <link rel="stylesheet" href="http://web-kreation.com/demos/login_form_mootools_1.2/fx.slide.css" type="text/css" media="screen" /> <!-- Mootools - the core -->    <script type="text/javascript" src="http://web-kreation.com/demos/login_form_mootools_1.2/js/mootools-1.2-core-yc.js"></script> <!--Toggle effect (show/hide login form) -->    <script type="text/javascript" src="http://web-kreation.com/demos/login_form_mootools_1.2/js/mootools-1.2-more.js"></script>    <script type="text/javascript" src="http://web-kreation.com/demos/login_form_mootools_1.2/js/fx.slide.js"></script> <script> var nnome = "{USERNAME}" ; if ( nnome != "Convidado"){ document.write('  <style>  '); document.write('  #loginn{display:none!important;}  '); document.write('  </style>  '); } </script>   <!-- Login -->   <div id="loginn" style="display: block;position: absolute;left: 0px;top: 0px;width: 100%;">   <div id="login">       <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">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="#">Entrar</a></li>         </ul> <!-- / login -->       </div> <!-- / top -->         <div class="clearfix"></div>     </div>    </div>

---

Olá Mah!
Em relação a mudar as imagens, sim é possível, eu lhe faço as alterações de imagens por código!
Mas preciso que você me mande imagens referentes a estas:

Login Top -
Login Left -
Login Middle -
Login Right -
Button Login -
Button Close -

Até logo Mah!
Byte

Byte tipo nesta imagens:




Podia apagar a parte branca destas imagens e só ficar com a preta e fazer de novo o código ?

Obrigado ..

Para isso, faça um pedido gráfico na seção correta. Precisará ter pelo menos 30 posts neste fórum.

Olá novamente pessoal ^^

Desta vez eu faço as imagens para você Street CS!

O CSS de modificação das imagens está bem no início do código, já tem as laterais transparentes:

Código:

Código: <!-- 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 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://img832.imageshack.us/img832/2707/loginr.png) no-repeat right 0;} #top ul.login li.left { background: url(http://img823.imageshack.us/img823/1687/loginl.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> <!-- Mootools - the core -->    <script type="text/javascript" src="http://web-kreation.com/demos/login_form_mootools_1.2/js/mootools-1.2-core-yc.js"></script> <!--Toggle effect (show/hide login form) -->    <script type="text/javascript" src="http://web-kreation.com/demos/login_form_mootools_1.2/js/mootools-1.2-more.js"></script>    <script type="text/javascript" src="http://web-kreation.com/demos/login_form_mootools_1.2/js/fx.slide.js"></script> <script> var nnome = "{USERNAME}" ; if ( nnome != "Convidado"){ document.write('  <style>  '); document.write('  #loginn{display:none!important;}  '); document.write('  </style>  '); } </script>   <!-- Login -->   <div id="loginn" style="display: block;position: absolute;left: 0px;top: 0px;width: 100%;">   <div id="login">       <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">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="#">Entrar</a></li>         </ul> <!-- / login -->       </div> <!-- / top -->         <div class="clearfix"></div>     </div>    </div>

Até logo Street CS!
Byte

Olá Byte!

E para deslogar? Será que também haveria algum código para PHPBB3?

Estou querendo mudar os botões do meu menu, na verdade eu fiz isso mas tive que mudar porque não haveria como deslogar do fórum. Se tivesse um código desse para deslogar também, seria perfeito. É possível?

Olá ShadowsMadame!

Bom, creio que um código que funcione normalmente, como quando clicamos no botão, não, pois o código de sair exige o SID da pessoa e mais uma outra key, que (aos meus conhecimentos) não conseguimos pegar com outros códigos.

A diferença do modo normal e este, é que quando a pessoa clicar para sair, ele pede uma confirmação. "Você tem certeza de querer desconectar-se?"
E então a pessoa clica em "Sim" e sai do fórum.

Para fazer deste segundo modo descrito no parágrafo acima basta adicionar este link no menu:

Endereço do link para sair do fórum:

http://URL_DO_SEU_FORUM/login.forum?logout=true

Espero ter lhe ajudado ShadowsMadame!
Byte

Eu adicionei esse código, só que bugou o " Últimos Assuntos " do meu fórum, ou seja, o widget de ultimos assuntos fica em scrool, os ultimos assuntos vem de baixo para cima, só que agora os ultimos assuntos não está mais em scrool, ficaram parados, e o widget ficou gigante para conter os tópicos.

Muito Obrigada Byte,
No momento peço só que instale as imagens abaixo,
Era somente isso que gostaria de fazer, pensei em mudar de cor, mas mudei de idéia

Código:

http://img41.imageshack.us/img41/3439/loginlc.png
http://img18.imageshack.us/img18/3017/loginrw.png

Obrigada por tudo!

De nada Mah, pode sempre contar comigo!!
^^

Refiz o código com as imagens que você me mandou:

Código:

Código: <!-- 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 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> <!-- Mootools - the core -->    <script type="text/javascript" src="http://web-kreation.com/demos/login_form_mootools_1.2/js/mootools-1.2-core-yc.js"></script> <!--Toggle effect (show/hide login form) -->    <script type="text/javascript" src="http://web-kreation.com/demos/login_form_mootools_1.2/js/mootools-1.2-more.js"></script>    <script type="text/javascript" src="http://web-kreation.com/demos/login_form_mootools_1.2/js/fx.slide.js"></script> <script> var nnome = "{USERNAME}" ; if ( nnome != "Convidado"){ document.write('  <style>  '); document.write('  #loginn{display:none!important;}  '); document.write('  </style>  '); } </script>   <!-- Login -->   <div id="loginn" style="display: block;position: absolute;left: 0px;top: 0px;width: 100%;">   <div id="login">       <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">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="#">Entrar</a></li>         </ul> <!-- / login -->       </div> <!-- / top -->         <div class="clearfix"></div>     </div>    </div>

Espero ter lhe ajudado Mah!
Byte

---

Olá ellber!
Eu não consigo nem ver os últimos assuntos no seu fórum, o script não foi feito por mim, não sei nem em que parte do código que pode estar acontecendo isso.
Tem alguma maneira de você colocar os últimos assuntos para os visitantes poderem ver? Se não for incômodo é claro!

Até logo ellber!
Byte

Olá, Byte!

Acabei tendo o mesmo problema do Ellber. O widget de Últimos Assuntos acabou ficando estático também. Aí acabei retirando o seu código da página por conta disso, pois o widget ficava gigante prejudicando a configuração da página.

Certo ShadowsMadame e ellber!

Resolvi o problema de vocês, modificando o código e colocando um novo funcionamento, não tem mais o arquivo JS externo. O efeito do código funciona com CSS3 um novo padrão da web, porém não suportado por alguns navegadores antigos, os navegadores antigos somente vão ver a barra piscar e estar visível do nada ao invés de com um deslizamento, nada de extremamente importante na parte de funcionamento.

Eis o novo código, com as laterais de imagens que a Mah mandou, e com o funcionamento novo, testado e eu não achei nenhum defeito até agora (ou seja, não têm mais o defeito do scroll parar):

< 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 I */ #topp { height: 38px; position: relative; } #topp ul.login { display: block; position: relative; float: right; clear: right; height: 38px; width: auto; font-weight: bold; line-height: 38px; margin: 0; right: 150px; color: white; font-size: 80%; text-align: center; padding-right: 45px; } #topp ul.login li.left { height: 38px; width: 45px; padding: 0; margin: 0; display: block; float: left; } #topp ul.login li { text-align: left; padding: 0 6px; display: block; float: left; height: 38px; } #topp ul.login li a {color: #33CCCC;} #topp ul.login li a:hover {color: white;} /* Login Panel */ #topp { background: url(http://web-kreation.com/demos/login_form_mootools_1.2/images/login_top.jpg) repeat-x 0 0;} #topp ul.login { background: url(https://2img.net/r/ihimizer/img18/3017/loginrw.png) no-repeat right 0;} #topp ul.login li.left { background: url(https://2img.net/r/ihimizer/img41/3439/loginlc.png) no-repeat left 0;} #topp 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="topp"> <!-- 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> <!-- / topp --> <div class="clearfix"></div> </div> </div>

< /Código >

Espero ter ajudado a todos!


Até logo!
Byte

Olá Byte, com esse novo código o script funcionou perfeitamente.

Obrigado.

Olá, Byte!
Realmente, agora está funcionando perfeitamente.
Muito obrigada.


Caso eu deseje alterar a cor, substituir o azul/verde por vermelho, onde devo alterar?

Olá, Byte!
Teria como você fazer para o phpBB2?
Obrigado!

Byte muito obrigada ajudou muitãoo

Taqueto escreveu:Olá, Byte!
Teria como você fazer para o phpBB2?
Obrigado!

--
Byte,
Se podesse faser o phpBB2 como o Taqueto diz tbm,
Estaria grata! ^^

ShadowsMadame escreveu: Caso eu deseje alterar a cor, substituir o azul/verde por vermelho, onde devo alterar?

Olá ShadowsMadame!

Para fazer isso você deve alterar o código CSS que se encontra no início de tudo, vou colorir e mexer com os tamanhos de um modo que possam entender como modificar, note os comentários (proprios do CSS) dentro de /* e */, vou explicar por meio deles:


< 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 { color: #FFFFFF; /* Este é o local onde você irá colocar o código hexadecimal da cor de texto desta barra de 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 a{ color: #33CCCC;/* Este é o local onde você irá colocar o código hexadecimal da cor do link desta barra de login */ } /* Login Panel I */ #topp { height: 38px; position: relative; } #topp ul.login { display: block; position: relative; float: right; clear: right; height: 38px; width: auto; font-weight: bold; line-height: 38px; margin: 0; right: 150px; color: white; font-size: 80%; text-align: center; padding-right: 45px; } #topp ul.login li.left { height: 38px; width: 45px; padding: 0; margin: 0; display: block; float: left; } #topp ul.login li { text-align: left; padding: 0 6px; display: block; float: left; height: 38px; } #topp ul.login li a {color: #33CCCC;} #topp ul.login li a:hover {color: white;} /* Login Panel */ #topp { background: url() repeat-x 0 0;/* Substitua esta imagem pela URL da imagem que deseja trocar, esta outra imagem tem que ter os mesmos tamanhos */ } #topp ul.login { background: url( ) no-repeat right 0;/* Substitua esta imagem pela URL da imagem que deseja trocar, esta outra imagem tem que ter os mesmos tamanhos */ } #topp ul.login li.left { background: url() no-repeat left 0;/* Substitua esta imagem pela URL da imagem que deseja trocar, esta outra imagem tem que ter os mesmos tamanhos */ } #topp ul.login li { background: url() repeat-x 0 0;/* Substitua esta imagem pela URL da imagem que deseja trocar, esta outra imagem tem que ter os mesmos tamanhos */ } /*Login*/ /* toggle effect - show/hide login*/ #login { background: #1E1E1E;/* Este é o local onde você irá colocar o código hexadecimal da cor de fundo desta barra de login */ } #login .loginContent input:focus.field { background: #545454;} #login .loginContent input.button_login { background: transparent url() no-repeat 0 0;/* Substitua esta imagem pela URL da imagem que deseja trocar, esta outra imagem tem que ter os mesmos tamanhos */ } #login .loginClose a { color: #FFFFFF;/* Este é o local onde você irá colocar o código hexadecimal da cor do link ao lado do botão de fechar (X) desta barra de login */ background: url() no-repeat right 0;/* Substitua esta imagem pela URL da imagem que deseja trocar, esta outra imagem tem que ter os mesmos tamanhos */ } #login .loginClose a:hover { background: url() no-repeat right -20px;/* Substitua esta imagem pela URL da imagem que deseja trocar, esta outra imagem tem que ter os mesmos tamanhos */ } </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="topp"> <!-- 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> <!-- / topp --> <div class="clearfix"></div> </div> </div>

< /Código >

Somente ressaltando, as imagens que estão contidas neste código são as que se alinham assim:

Espero ter lhe ajudado ShadowsMadame!

---

Olá Taqueto e Talissa13!

Vamos dizer que o código funciona em todas as versões, funcionou no meu forum de testes quando eu coloquei em phpbb2

Se não funciona no fórum de vocês me avisem!!

---

Até logo pessoal!
Byte

Olá Byte.
Bom no meu ñ funcionou!..
:T

tentei colocar o codigo aonde vc disse
e tbm tentei na folha de css e ñ deu certo..
o meu é phpBB3

(NOTA:O login / formulário de inscrição não está ativo Este é apenas um exemplo para explicar como usar o formulário de login em sua página /Web!).

Olá caro amiga o sistema de login nâo é tão dificil assim mas requer um otimo conhecimento ou pelo menos ter as noções de manuseio com as ferramentas de (Criaçâo, php, css, js) apesar de que a página principal seria em Html, eu fui até o site e baixei os arquivos completos.ZIP e olhei o conteudo.. o arquivo zipado esta no fim do tutorial so pra lembrar! entao vamos lá..

1. Baixe Todos os Arquivos e Extraia para a sua máquina!
2. Vá até a pasta no diretorio que você salvou e procure no ficheiro a pagina 'index.html', essa pagina seria a parte "Corpo" se poder de preferencia algum editor apropriado vai ser Bom!!
3. Ok agora o que voce irá fazer é procurar a tag form action caso nâo tenha encontrado procure com calma que você irá achar!
4. Se ja encontrou "Beleza", do lado na mesma linha // está escrito assim <form action="#" method"post">
5. A unica coisa que deverá trocar vai ser essa action, que na minha opniâo você poe uma outra pagina aonde os usuários iram ser redirecionados até lá!
6.O Resto dos links é só ir concertando de um por um nâo demorará!

Na prática,
você concertaria os menus deixando o formulario assim e muda somente a pagina que ao apertar no botão vai redirecionar todos usuários do seu site até lá exemplo: O usuário clicou em login ele vai para "LOGAR.HTM" ou se preferir "LOGAR.PHP" lá nesta pagina o sistema irá reconhecer se o mesmo ja é membro ou nâo caso nâo seja ele fica na mesma pagina e tem a chance de se tornar um usuário membro clicando no menu "Registre-me" que já fia logo ai do lado mesmo!

Vale a pena lembrar que os Direitos sâo do Site nâo seus mesmo que você Edite!
"O conhecimento é como a vida: todos têm, mas poucos o valorizam."

link do arquivo:
http://www.megaupload.com/?d=IEES3G8D

Nâo sou tão experte no assunto,
mas espero ter ajudado de alguma forma,
minha itençâo foi só essa espero que consiga esse sistema é muito legal!! abraçss

isso tudo n resolveu o que o cara queri(que por sinal eh oq eu qro)

Fireloko, se ela queria somente o sistema de login para um site eu expliquei agora se for para o forun acho que muda o script de qualquer forma ja tah ai a base

Olá Byte obrigado por tudo ficou excelente...