Login Pop Up Button Header Forumotion PunBB - LGForum Style Login

Mau Punya Login Pop Up Button header Kayak gini di Forum PunBB Forumotion ?


Kalo mau ikutin step step berikut ya gan! 
menggabungkan CSS, HTML, jQuery and Javascript

Yuk Menuju Admin Panel -> Display -> Colors -> CSS Stylesheet
Tambahkan Code Ini !

Code:

#LGoverlay {
  position: fixed;
  top: 0px;
  left: 0px;
  min-height: 101%;
  width: 100%;
  background-color: #000;
  opacity: 0.7;
  filter:Alpha(opacity=70);
  z-index: 999;
}
#LGlogin {
  background: #EEE;
  color: #777;
  left: 25%;
  position: fixed;
  top: 30%;
  width: 50%;
  z-index: 999;
  box-shadow: 10px 10px 40px black;
  -moz-box-shadow: 10px 10px 40px black;
  -webkit-box-shadow: 10px 10px 40px black;
  font-family: sans-serif;
  text-shadow: 0px 1px 1px white;
  color: #666;
}
#LGlogin h1 {
  background: #CCC;
  margin-top: 0;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #888;
}
#LGlogin form {
   margin: 10px auto;
   width: 90%;
}
#LGlogin img.closebutton {
  float: right;
  margin: 10px;
  background: url('http://i45.servimg.com/u/f45/16/95/07/69/bt_clo10.png') no-repeat 0 -20px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
#LGlogin img.closebutton:hover {background: url('http://i45.servimg.com/u/f45/16/95/07/69/bt_clo10.png') 0 0px;}
#LGlogin ul {
  list-style-type: none;
}
#LGlogin ul li {
  float: left;
  width: 50%;
  font-size: 1.2em;
}
#LGlogin li input {
  padding: 4px;
  background: #fff;
  border: 1px solid #CCC;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}
#LGlogin .login-submit {
  display: block;
  margin: 15px auto;
  background: #CCC;
  border: 1px solid;
  color: #666;
  padding: 5px 10px;
  font-weight: bold;
  text-shadow: 0px 1px 1px #fff;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  cursor: pointer;
}
#LGlogin .login-submit:hover {
  color: #AAA;   
}
#LGloginbtn {
  background: #CCC;
  border: 1px solid;
  color: #555;
  font-weight: bold;
  font-size: 1.4em;
  padding: 10px 30px;
  position: fixed;
  right: 10px;
  text-shadow: 0 1px 1px white;
  top: 5px;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  box-shadow: 4px 8px 25px #444;
  -webkit-box-shadow: 4px 8px 25px #444;
  -moz-box-shadow: 4px 8px 25px #444;
  cursor: pointer;
}
#LGloginbtn:hover {
  color: #888; 
}

Oke setelah itu save lalu ganti menuju Announcement atau Widget . atau tambahkan di overall header atau overall footer template. pilih salah satu saya sarankan ke announcement aja.
Ini HTMLnya

Code:

<div id="LGoverlay" onclick="LGlogin()" style="display:none"></div>
<div id="LGloginbtn" onclick="LGlogin();">Log In</div>
<div id="LGlogin" style="display:none">
  <img src="http://2img.net/i/fa/empty.gif" class="closebutton" width="20px" height="20px" onclick="LGlogin();"/>
  <h1>Log In</h1>
  <form action="/login.forum" method="post">
    <ul>
      <li><label for="username">Username</label></li>
      <li><input type="text" name="username" size="25" /></li>
      <li><label for="password">Password</label></li>
      <li><input type="password" name="password" size="25" /></li>
      <li>Remember me?</li>
      <li><input type="checkbox" name="autologin" checked="checked" /></li>
    </ul>
    <div style="clear:left"></div>
    <input type="submit" class="login-submit" name="login" value="Log in" />
    <input name="redirect" type="hidden" value="">
  </form>
</div>

Save , dan lanjut sekarang ke JavaScriptnya klik Javascript management dan buat baru Javascript and pilih in all pages(semua halaman).
lalu copy kode dibawah ini :

Code:

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

Oke done , akhirnya selesai juga deh gan semoga bermanfaat postingan ane tentang Login Pop up Forumotion Header - LGStyle Forum Login 

Source: