Σύνδεση σε Popup [PunBB]

Γεια σας.
σήμερα θα σας δείξω πως να κάνετε σύνδεση σε Popup
Όπως αυτό
[Πρέπει να είστε εγγεγραμμένοι και συνδεδεμένοι για να δείτε αυτή την εικόνα.]
Μπαίνετε
Admin Panel >> Εμφάνιση >> Εικόνες και χρώματα >> Χρώματα >> CSS Stylesheet
και βάζετε τον παρακάτω κώδικα

Κώδικας:

        #login102sa21 .login-submit {
          display: block;
          border-bottom: 0px solid #d9832e;
          border-left: 1px solid #d9832e;
          border-right: 1px solid #d9832e;
          border-radius: 3px;
          margin: 15px auto;
          background: #db852e;
          border-top: 1px solid #ad6823;
          color: #ffffff;
          text-shadow:0px -1px 0px #ad6823;
          cursor: pointer;
          padding: 5px 10px;
        }

        #login102sa21 .login-submit:hover {
        opacity: 0.7;
        }

        input[type="text"] {
        border-radius: 0px;
        border: 1px solid #363636;
        background:#292929;
        height: 28px;
        color: #b5b5b5;
        }

        input[type="password"] {
        border-radius: 0px;
        border: 1px solid #363636;
        background:#292929;
        height: 28px;
        color: #b5b5b5;
        }

        input[type="text"]:focus {
        border-radius: 0px;
        box-shadow: inset 0 3px 5px #524C4C;
        border: 1px solid #787878;
        background-color:#4a4a4a;
        height: 28px;
        color: #f7f7f7;
        }

        input[type="password"]:focus {
        border-radius: 0px;
        box-shadow: inset 0 3px 5px #524C4C;
        border: 1px solid #787878;
        background-color:#4a4a4a;
        height: 28px;
        color: #f7f7f7;
        }


        #backgroundlogin12sa {
          position: fixed;
          top: 0px;
          left: 0px;
          min-height: 101%;
          width: 100%;
          background-color: #000;
          opacity: 0.7;
          filter:Alpha(opacity=70);
          z-index: 999;
        }

        #login102sa21 {
          background: #1a1a1a;
          color: #777;
          left: 25%;
          position: fixed;
          top: 30%;
          width: 616px;
          z-index: 999;
          font-family: sans-serif;
          border:6px solid #0f0f0f;
          color: #bababa;
          border-radius: 7px;
        }

        #login102sa21 h1 {
          background-image: url("http://i73.servimg.com/u/f73/18/10/58/17/iii_ii33.jpg");
          background-position: left 50%;
          background-repeat: repeat-x;
          margin-top: 0;
          padding: 8px 10px;
          text-align: left;
          border-bottom: 1px solid #383838;
        }

        #login102sa21 form {
          margin: 13px auto;
          width: 90%;
        }

        #login102sa21 img.closebutton {
          float: right;
          margin: 10px;
          background: url('http://i74.servimg.com/u/f74/18/07/77/20/iii_ii11.jpg') no-repeat 0 -20px;
          width: 13px;
          height: 13px;
          cursor: pointer;
        }

μετά μπαίνετε
Admin Panel >> Εμφάνιση >> Πρότυπα >> Γενική Διαχείριση >> overall_header
ψάχνετε τον παρακάτω κώδικα και τον διαγράφεται

Κώδικας:

</div>
              <div id="pun-head">
                  <div id="pun-navlinks">
                    <ul class="clearfix">
                        <li>{GENERATED_NAV_BAR}</li>
                    </ul>
                  </div>

μετά ψάχνετε αυτόν τον κώδικα

Κώδικας:

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

και βάζετε αυτόν τον κώδικα ακριβώς από πάνω

Κώδικας:

  <!-- BEGIN switch_user_logged_out -->
              <div id="pun-head">
                  <div id="pun-navlinks">
                    <ul class="clearfix">
                        <li><a href="/login"><img src="http://i15.servimg.com/u/f15/17/34/84/29/key11.png" border="0" alt="" /> Σύνδεση</a> <a href="/register"><img src="http://i73.servimg.com/u/f73/18/10/58/17/user_r10.png" border="0" alt="" /> Εγγραφή</a></li>
                    </ul>
                  </div>
              </div>
<!-- END switch_user_logged_out -->
  <!-- BEGIN switch_user_logged_in -->
                <div id="pun-head">
                  <div id="pun-navlinks">
                    <ul class="clearfix">
                        <li><a href="/privmsg?folder=inbox"><img src="http://hitskin.com/themes/19/59/13/i_icon_mini_message.png" border="0" alt="" /> </a> <a href="/login?logout"><img src="http://hitskin.com/themes/19/59/13/i_icon_mini_logout.png" border="0" alt="" /> Αποσύνδεση</a></li>
                    </ul>
                  </div>
              </div>
  <!-- END switch_user_logged_in -->

μετά ψάχνετε αυτόν τον κώδικα

Κώδικας:

<img src="http://i15.servimg.com/u/f15/17/34/84/29/key11.png" border="0" alt="" /> Σύνδεση

και τον κάνετε

Κώδικας:

<span id="loginclickbutton12" onclick="login102sa21();"><a hsardaeftests=""><img src="http://i15.servimg.com/u/f15/17/34/84/29/key11.png" border="0" alt="" /> Σύνδεση</span>
        <div id="backgroundlogin12sa" onclick="login102sa21()" style="display:none"></div>
        <div id="login102sa21" style="display:none">
          <img src="http://i74.servimg.com/u/f74/18/07/77/20/iii_ii11.jpg" class="closebutton" width="13px" height="13px" onclick="login102sa21();"/>
          <h1><font color="bababa">Είσοδος</font></h1>
          <form action="/login.forum" method="post">
            <ul>
              <label><span class="genmed">Όνομα χρήστη:</span>
                  <input type="text" name="username" size="25" /></label> &nbsp;
      <label><span class="genmed">Κωδικός:</span>
                  <input type="password" name="password" size="25" /></label> &nbsp;
            </ul>
            <div style="clear:left"></div>
            <input type="submit" class="login-submit" name="login" value="Είσοδος" />
            <input name="redirect" type="hidden" value="">
          </form>
          </div>

μετά ψάχνετε τον παρακάτω κώδικα και τον διαγράφεται

Κώδικας:

<a href="/login">

μετά μπαίνετε
Admin Panel >> Λειτουργικές Μονάδες >> Διαχείριση κωδικών Javascript >> Create a new javascript
Title * :Login Pup
Placement :In all the pages
Javascript Code * :

Κώδικας:

function login102sa21() {
          var x = document.getElementById('login102sa21'); 
          if (x.style.display == 'none') {
              jQuery(x).add('#backgroundlogin12sa').fadeIn('slow');
              var r = x.getElementsByTagName('form')[0].redirect;
              r.value = window.location.href;
          }
          else {
              jQuery(x).add('#backgroundlogin12sa').fadeOut('slow');
          }
        }
        jQuery(function(){ if(document.getElementById('login')) document.getElementById('loginclickbutton12').style.display = 'none'; });

έτοιμο