Pop-login personilizado

Qual é minha questão:
Gostaria de colocar assim o Pop-Login como mostra a print.

Medidas que eu tomei para corrigir o problema:
Nenhuma.

Links e imagens do meu problema:




Endereço do meu fórum:
www.forum-firto.forumeiros.com

Versão do meu fórum:
PHPBB3

Bote o link do site que faz isso assim a vai ser melhor de responder isso Por favor edite:editar:

Olá, leia este tutorial
https://ajuda.forumeiros.com/t12181-
Cordialmente.

MateusV. escreveu:Olá, leia este tutorial
https://ajuda.forumeiros.com/t12181-
Cordialmente.

Mas eu queria igual a este; http://playforum.com.br/

Olá, aqui esta o codigo

Código:

<!-- login -->
 
        <ul class="login">
 
        <li class="left"> </li>
 
        <li><a id="toggleLogin" href="#" onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')? '-100px' : '0px');">Painel de Usuário</a></li>
 
        </ul> <!-- / login -->
 
        </div> <!-- / topp --><div class="clearfix"></div>
        </div></p></div>
<div id="show">
         <div id="fade"></div><div class="popup_block">
<script type="text/javascript" src="http://whispers.com.br/public/min/index.php?ipbv=32006&amp;charset=ISO-8859-1&amp;f=public/js/ipb.js,cache/lang_cache/3/ipb.lang.js,public/js/ips.hovercard.js,public/js/ips.quickpm.js,public/js/ips.board.js" charset="ISO-8859-1"></script>
<script type="text/javascript" src="http://whispers.com.br/public/style_images/Spectrum/js/ipbforumskins.js"></script>
<script type="text/javascript" src="http://whispers.com.br/public/min/index.php?ipbv=32006&amp;g=js"></script>
               <div class="popup">
                  <a href="#" id="sos32popup"><img src="http://whispers.com.br/public/style_extra/popup/icon_close.png" class="cntrl" title="Fechar" onClick="checkClick(event)"></a>
                        <h3>Bem Vindo ao <b>Play</b></h3>
                        <p></p><div style="text-align: center;"><span rel="lightbox"><img src="http://i40.tinypic.com/nmj9ec.png" alt="Imagem Postada" class="bbc_img"></span></div><div style="text-align: center;">   <br>
   <br>
Você acabou de entrar no site oficial do Play Fórum, seja bem vindo. Aqui você verá varios conteúdos e novidades super legais
   <br>
   O cadastro é gratuito e leva pouco tempo para ser preenchido.<br>
   Durante o cadastro, será requerida uma conta de e-mail válida. Isto é importante para evitar quaisquer transtornos.</div><br><br>
                     <center><a href="http://playforum.com.br/register" title="Cadastre-se">Registre-se Agora!</a> </center>
                  <p></p><br>
                        <h3>Já está Cadatrado? Faça o Login!</h3>
      <form action="/login" method="post" name="form_login" id="login">

                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
                     <tbody><tr>
                        <td width="100%" align="right">
                           <div align="center">
                           <b>Usuário:</b> <input name="username" id="username" type="text" class="input_text" size="15">
                           <b>Senha:</b> <input id="password" name="password" type="password" class="input_text" size="15">
                           <input type="submit" name="login" tabindex="6" value="Login" class="input_submit">
                           </div>
                        </td>
                     </tr>
                  </tbody></table>
               </form></div>
            </div></div></div></div></div></div>

Cordialmente.

Coloco isso aonde ?

Olá, leia o tutorial.
Cordialmente.

No meu fórum não esta funcionando

Gostei do Login!! Queroo esse código Também!

Aqui esse não funcionou!

Olá, por favor para cada duvida criem um topico proprio, mas deixo aqui este codigo

Código:

                        </ol>
                    <ul id="secondary_links" class="ipsList_inline right">
                       
               
                       
                       
                    </ul>
                </div><div class="guestMessage">
                   <strong>Bem Vindo ao Play</strong><br>
                    Aqui você podera postar em vários conteudos do fórum, participar da Zone Games, area de Entretenimento e entre outras, se você ainda não é registrado se registre, se você ja é apenas faça o login no site para poder estar participando do fórum.
                </div>
<br><br>
<center><iframe src="/h3-h36" scrolling="no" width="506" height="410" frameborder="0" marginheight="0" marginwidth="0"></iframe></center>
 <!-- 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{padding-top:0px;width:790px;height:100px;}
 
        #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: 50px;width: 100%;"><div id="login" style="margin-top:-100px;"><div class="loginContent">
 
 
 
 
        <table  style="width:100%;"  border="0">
        <tr>
 
        <td style="text-align:center;">
        <table border="0">
        <tr>
 
        <td>
        <script>
        jQuery(document).ready(function(){
          jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
              link = jQuery('.panel dl:first img', data).attr('src');
              if(link){
                jQuery('#avatar').html('<img src="'+link+'" align="left" width="60" height="80">');
              }else{
                jQuery('#avatar').html('');
              }
          });
        });
        </script><div id="avatar"><center><img src="http://i53.tinypic.com/1e1fex.gif"></center></div>
        </td>
 
        <td>
        <span style="font-size: 1.2em;">
        <font size="4"><a href="http://pwn3dmods.forumbrasil.net/profile.forum?mode=viewprofile&amp;u=283">{USERNAME}</a></font>
 
        <b>Mensagens:</b> {USERCOUNTPOST}
        </span>
        </td>
 
        </tr>
        </table>
        </td>
 
 
 
        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Alterar</b>
 
        <a href="../profile.forum?mode=editprofile&amp;page_profil=informations">Informações</a>
 
        <a href="../profile.forum?mode=editprofile&amp;page_profil=preferences">Preferências</a>
 
        <a href="../profile.forum?mode=editprofile&amp;page_profil=signature">Assinatura</a>
 
        <a href="../profile.forum?mode=editprofile&amp;page_profil=avatars">Avatar</a>
 
        </span>
        </td>
 
        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Ver</b>
 
        <a href="../profile.forum?mode=editprofile&amp;page_profil=friendsfoes">Amigos & ignorados</a>
 
        <a href="../search.forum?search_id=watchsearch">Tópicos supervisionados</a>
 
        <a href="../search.forum?search_id=draftsearch">Rascunhos</a>
 
        <a href="../search.forum?search_id=favouritesearch">Tópicos favoritos</a>
 
        <a href="../rpg_sheet_edit.forum">Ficha de personagem</a>
 
        </span>
        </td>
 
        <td style="text-align:center;">
        <span style="font-size: 1.2em;"><b>Tópicos & Mensagens</b>
 
        <a href="../msg.forum?folder=inbox">Mensagens Privadas</a>
 
        <a href="../search.forum?search_topics=Victor">Meus tópicos</a>
 
        <a href="../search.forum?search_id=egosearch">Tópicos que participa</a>
 
        <a href="../search.forum?search_author=Victor&show_results=posts">Minhas mensagens</a>
 
        <a href="../search.forum?search_id=newposts">Últimos tópicos</a>
 
        </span>
        </td>
 
        </tr>
        </table>
 
 
 
 
        </div>
 
        </div>
 
 
        <!-- /login --><div id="container"><div id="topp">
 
        <!-- login -->
 
        <ul class="login">
 
        <li class="left"> </li>
 
        <li><a id="toggleLogin" href="#" onclick="document.getElementById('login').style.marginTop=((document.getElementById('login').style.marginTop=='0px')? '-100px' : '0px');">Painel de Usuário</a></li>
 
        </ul> <!-- / login -->
 
        </div> <!-- / topp --><div class="clearfix"></div>
        </div></p></div>
<div id="show">
         <div id="fade"></div><div class="popup_block">
<script type="text/javascript" src="http://whispers.com.br/public/min/index.php?ipbv=32006&amp;charset=ISO-8859-1&amp;f=public/js/ipb.js,cache/lang_cache/3/ipb.lang.js,public/js/ips.hovercard.js,public/js/ips.quickpm.js,public/js/ips.board.js" charset="ISO-8859-1"></script>
<script type="text/javascript" src="http://whispers.com.br/public/style_images/Spectrum/js/ipbforumskins.js"></script>
<script type="text/javascript" src="http://whispers.com.br/public/min/index.php?ipbv=32006&amp;g=js"></script>
               <div class="popup">
                  <a href="#" id="sos32popup"><img src="http://whispers.com.br/public/style_extra/popup/icon_close.png" class="cntrl" title="Fechar" onClick="checkClick(event)"></a>
                        <h3>Bem Vindo ao <b>Play</b></h3>
                        <p></p><div style="text-align: center;"><span rel="lightbox"><img src="http://i40.tinypic.com/nmj9ec.png" alt="Imagem Postada" class="bbc_img"></span></div><div style="text-align: center;">   <br>
   <br>
Você acabou de entrar no site oficial do Play Fórum, seja bem vindo. Aqui você verá varios conteúdos e novidades super legais
   <br>
   O cadastro é gratuito e leva pouco tempo para ser preenchido.<br>
   Durante o cadastro, será requerida uma conta de e-mail válida. Isto é importante para evitar quaisquer transtornos.</div><br><br>
                     <center><a href="http://playforum.com.br/register" title="Cadastre-se">Registre-se Agora!</a> </center>
                  <p></p><br>
                        <h3>Já está Cadatrado? Faça o Login!</h3>
      <form action="/login" method="post" name="form_login" id="login">

                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
                     <tbody><tr>
                        <td width="100%" align="right">
                           <div align="center">
                           <b>Usuário:</b> <input name="username" id="username" type="text" class="input_text" size="15">
                           <b>Senha:</b> <input id="password" name="password" type="password" class="input_text" size="15">
                           <input type="submit" name="login" tabindex="6" value="Login" class="input_submit">
                           </div>
                        </td>
                     </tr>
                  </tbody></table>
               </form></div>
            </div></div></div></div></div></div><div id="emptyidright"></div></div></div></div></div><div id="page-footer"><div class="navbar">

Cordialmente.

Mas diga se é para colocar em Pagina de HTML,jS,CSS ou HomePage ....

Nao tendi bem o tutorial ...

Olá, você Cria uma pagina HTML personalizada, caso deseje mais informações leia.
https://ajuda.forumeiros.com/t12181-
Cordialmente.

Resolvido.