[Resolvido] Login e sair como nesse site

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

Resolvido [Resolvido] Login e sair como nesse site

Mensagem por Mah em 23/10/10, 03:37 pm

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!


Última edição por Mah em 26/10/10, 07:53 pm, editado 1 vez(es)
avatar

Mah
Nível 4

Feminino
Inscrito dia : 27/03/2010
Mensagens : 31
Pontos Ativos : 73

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

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por KakáBrasil em 23/10/10, 05:52 pm

acho que não há como fazer isto .
avatar

KakáBrasil
Nível 2

Masculino
Inscrito dia : 23/10/2010
Mensagens : 12
Pontos Ativos : 21

Ver perfil do usuário http://halloweentown.forume.biz/

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por Nicker em 23/10/10, 08:12 pm

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

Nicker
Usuário destaque

Masculino
Inscrito dia : 04/05/2010
Mensagens : 549
Pontos Ativos : 780

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

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por Byte em 24/10/10, 01:58 am

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
avatar

Byte
Membro do Fórum

Masculino
Inscrito dia : 12/02/2009
Mensagens : 1272
Pontos Ativos : 2341

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

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por Mah em 24/10/10, 04:51 pm

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

Aguardo sua resposta.
avatar

Mah
Nível 4

Feminino
Inscrito dia : 27/03/2010
Mensagens : 31
Pontos Ativos : 73

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

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por Street CS em 24/10/10, 07:29 pm

Byte poderia fazer também para phpbb3 ?

Pois testei assim e não deu...

Abraços.
avatar

Street CS
Nível 3

Masculino
Inscrito dia : 09/09/2010
Mensagens : 19
Pontos Ativos : 29

Ver perfil do usuário http://csstreet.foro.bz/

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por Byte em 24/10/10, 08:55 pm

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
avatar

Byte
Membro do Fórum

Masculino
Inscrito dia : 12/02/2009
Mensagens : 1272
Pontos Ativos : 2341

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

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por Street CS em 25/10/10, 05:03 pm

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 ..
avatar

Street CS
Nível 3

Masculino
Inscrito dia : 09/09/2010
Mensagens : 19
Pontos Ativos : 29

Ver perfil do usuário http://csstreet.foro.bz/

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por Epic Eric em 25/10/10, 06:14 pm

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

Epic Eric
Nível 8

Masculino
Inscrito dia : 31/08/2010
Mensagens : 144
Pontos Ativos : 183

Ver perfil do usuário http://narutorpglife.co.cc/

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por Byte em 25/10/10, 11:44 pm

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
avatar

Byte
Membro do Fórum

Masculino
Inscrito dia : 12/02/2009
Mensagens : 1272
Pontos Ativos : 2341

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

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por HeLL (ShadowsMadame) em 26/10/10, 03:30 am

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?
avatar

HeLL (ShadowsMadame)
Nível 3

Feminino
Inscrito dia : 19/01/2009
Mensagens : 23
Pontos Ativos : 35

Ver perfil do usuário http://rockandrollclan.team-forum.net/

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por Byte em 26/10/10, 02:39 pm

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
avatar

Byte
Membro do Fórum

Masculino
Inscrito dia : 12/02/2009
Mensagens : 1272
Pontos Ativos : 2341

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

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por Loki em 26/10/10, 03:40 pm

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.
avatar

Loki
Nível 10

Masculino
Inscrito dia : 30/12/2009
Mensagens : 291
Pontos Ativos : 388

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

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por Mah em 26/10/10, 07:59 pm

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

Mah
Nível 4

Feminino
Inscrito dia : 27/03/2010
Mensagens : 31
Pontos Ativos : 73

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

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por Byte em 26/10/10, 10:22 pm

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
avatar

Byte
Membro do Fórum

Masculino
Inscrito dia : 12/02/2009
Mensagens : 1272
Pontos Ativos : 2341

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

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por HeLL (ShadowsMadame) em 26/10/10, 10:50 pm

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.
avatar

HeLL (ShadowsMadame)
Nível 3

Feminino
Inscrito dia : 19/01/2009
Mensagens : 23
Pontos Ativos : 35

Ver perfil do usuário http://rockandrollclan.team-forum.net/

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por Byte em 28/10/10, 05:16 pm

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


Última edição por Byte em 16/12/10, 01:15 pm, editado 2 vez(es)
avatar

Byte
Membro do Fórum

Masculino
Inscrito dia : 12/02/2009
Mensagens : 1272
Pontos Ativos : 2341

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

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por Loki em 28/10/10, 05:48 pm

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

Obrigado.
avatar

Loki
Nível 10

Masculino
Inscrito dia : 30/12/2009
Mensagens : 291
Pontos Ativos : 388

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

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por HeLL (ShadowsMadame) em 29/10/10, 08:22 pm

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
avatar

HeLL (ShadowsMadame)
Nível 3

Feminino
Inscrito dia : 19/01/2009
Mensagens : 23
Pontos Ativos : 35

Ver perfil do usuário http://rockandrollclan.team-forum.net/

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por Taqueto em 29/10/10, 08:46 pm

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

Taqueto
Nível 8

Masculino
Inscrito dia : 08/09/2010
Mensagens : 149
Pontos Ativos : 216

Ver perfil do usuário http://kingscross.forumeiro.com/

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por Talissa Andr. em 30/10/10, 05:46 pm

Byte muito obrigada ajudou muitãoo

Talissa Andr.
Usuário destaque

Feminino
Inscrito dia : 28/10/2010
Mensagens : 834
Pontos Ativos : 1130

Ver perfil do usuário

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por Talissa Andr. em 30/10/10, 06:12 pm

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

Talissa Andr.
Usuário destaque

Feminino
Inscrito dia : 28/10/2010
Mensagens : 834
Pontos Ativos : 1130

Ver perfil do usuário

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por Byte em 30/10/10, 10:19 pm

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


Última edição por Byte em 16/12/10, 01:20 pm, editado 2 vez(es)
avatar

Byte
Membro do Fórum

Masculino
Inscrito dia : 12/02/2009
Mensagens : 1272
Pontos Ativos : 2341

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

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por Talissa Andr. em 30/10/10, 10:24 pm

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

Talissa Andr.
Usuário destaque

Feminino
Inscrito dia : 28/10/2010
Mensagens : 834
Pontos Ativos : 1130

Ver perfil do usuário

Resolvido Respondendo a sua pergunta fiz um tuto ver aii

Mensagem por The Vingator em 31/10/10, 01:47 pm

(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 Positivo
avatar

The Vingator
Nível 2

Masculino
Inscrito dia : 29/09/2008
Mensagens : 8
Pontos Ativos : 19

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

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por Fireloko em 31/10/10, 06:57 pm

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

Fireloko
Nível 5

Masculino
Inscrito dia : 30/10/2010
Mensagens : 50
Pontos Ativos : 98

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

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por The Vingator em 02/11/10, 04:05 pm

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
avatar

The Vingator
Nível 2

Masculino
Inscrito dia : 29/09/2008
Mensagens : 8
Pontos Ativos : 19

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

Resolvido Re: [Resolvido] Login e sair como nesse site

Mensagem por Street CS em 02/11/10, 06:42 pm

Olá Byte obrigado por tudo ficou excelente... Feliz
avatar

Street CS
Nível 3

Masculino
Inscrito dia : 09/09/2010
Mensagens : 19
Pontos Ativos : 29

Ver perfil do usuário http://csstreet.foro.bz/

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