[Resolvido] Login e sair como nesse site

Mah às 19h37
23
Oct
2010
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!
Responder
1 KakáBrasil, em 23/10/2010 às 21h52
acho que não há como fazer isto .
2 Nicker, em 24/10/2010 às 00h12
Olá,
Lamento, mais como ja foi dito acima isto ainda não é possivel, mais faça um sugestão. Rindo
Até mais.
3 Byte, em 24/10/2010 às 05h58
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 ( Não ), boa noite e boa sorte para todos que quiserem continuar o meu trabalho! Desculpem não ter feito isso ainda
4 Mah, em 24/10/2010 às 20h51
Sim funciona!
Obrigada Byte, mas me diga uma coisa, caso eu queira alterar as imagens que aparecem como devo fazer?

Aguardo sua resposta.
5 Street CS, em 24/10/2010 às 23h29
Byte poderia fazer também para phpbb3 ?

Pois testei assim e não deu...

Abraços.
6 Byte, em 25/10/2010 às 00h55
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
7 Street CS, em 25/10/2010 às 21h03
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 ..
8 Epic Eric, em 25/10/2010 às 22h14
Para isso, faça um pedido gráfico na seção correta. Precisará ter pelo menos 30 posts neste fórum.
9 Byte, em 26/10/2010 às 03h44
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
10 HeLL (ShadowsMadame), em 26/10/2010 às 07h30
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?
11 Byte, em 26/10/2010 às 18h39
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
12 Loki, em 26/10/2010 às 19h40
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.
13 Mah, em 26/10/2010 às 23h59
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 Muito feliz

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




Obrigada por tudo!
14 Byte, em 27/10/2010 às 02h22
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
15 HeLL (ShadowsMadame), em 27/10/2010 às 02h50
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.
16 Byte, em 28/10/2010 às 21h16
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(http://img18.imageshack.us/img18/3017/loginrw.png) no-repeat right 0;}

#topp ul.login li.left {
background: url(http://img41.imageshack.us/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!
De bem com a vida

Até logo!
Byte
17 Loki, em 28/10/2010 às 21h48
Olá Byte, com esse novo código o script funcionou perfeitamente.

Obrigado.
18 HeLL (ShadowsMadame), em 30/10/2010 às 00h22
Olá, Byte!
Realmente, agora está funcionando perfeitamente.
Muito obrigada.
Muito feliz

Caso eu deseje alterar a cor, substituir o azul/verde por vermelho, onde devo alterar?
Feliz
19 Taqueto, em 30/10/2010 às 00h46
Olá, Byte!
Teria como você fazer para o phpBB2?
Obrigado!
20 Talissa Andr., em 30/10/2010 às 21h46
Byte muito obrigada ajudou muitãoo
Temas similares
Login e sair como do site
Qual é esse código que diz Olá Convidado, Entre http://img823.imageshack.us/img823/365/neuhm.png Possa-me pasasr o código e me dizer aonde coloca?
Sair do login...
Olá Pessoal, eu montei um site e com a ajuda de vocês do suporte eu consegui fazer o que eu tanto queria, que era colocar o widget do Login do Fórum no meu web site para que quando as pessoas acessassem o login por lá seriam imediatamente redirecionadas a
Como por o widget login no meu site???
bom a minha home do forum eh do webnode(outro sxite) eu keria colocar akele widget de fazer login ke tem no dforum colocar no wwebnoded tem como???
12
Veja também
more_less
Informaciones

27 Respostas Para el tema :
"[Resolvido] Login e sair como nesse site"

Este tema a sido visto 2232 veces.

Último mensaje escrito :
23/10/2010 às 19h37 por "Mah"