vBulletin Twitter Login Panel Entegresi

Selamlar,
Çok araştırmama rağmen bulamamıştım bunun gibi bir paylaşım bende bir twitter login panel tasarımını vBulletine uyarlıyım dedim
Yararlandığım Kaynak : aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/
Öncelikle şunları indirip ftp deki yerlerine atalım
http://www.box.net/shared/ye9y3j1kvs
Daha sonra kodlarımızı yerleştirmeye başlayalım

İlk olarak şu kodları header'e ekleyin ,

<script src="javascripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function() {

            $(".signin").click(function(e) {
                e.preventDefault();
                $("fieldset#signin_menu").toggle();
                $(".signin").toggleClass("menu-open");
            });

            $("fieldset#signin_menu").mouseup(function() {
                return false
            });
            $(document).mouseup(function(e) {
                if($(e.target).parent("a.signin").length==0) {
                    $(".signin").removeClass("menu-open");
                    $("fieldset#signin_menu").hide();
                }
            });            

        });
</script>

Daha sonra uyarladığımız kodu,

<if condition="$show['guest']">
<!-- login form -->
<div id="container" align="right">
  <div id="topnav" class="topnav"> Üye değil misiniz ? <a href="/register.php" name="Kayıt Ol!">Kayıt Olun.</a> <a href="#" class="signin"><span>Giriş</span></a> </div>
  <fieldset id="signin_menu">
    <form method="post" id="signin" action="login.php?do=login" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">
        <script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>
      <label for="username">Kullanıcı Adı</label>
      <input id="username" name="vb_login_username" value="$vbphrase[username]" title="username" tabindex="102" accesskey="u" type="text" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" />
      </p>
      <p>
        <label for="password">Şifre</label>
        <input id="password" name="vb_login_password" value="$vbphrase[log_in]" title="password" tabindex="102" type="password">
      </p>
      <p class="remember">
        <input id="signin_submit" value="$vbphrase[log_in]" tabindex="6" type="submit">
        <label for="remember"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" />$vbphrase[remember_me]</label>
      </p>
      
      <p class="forgot-username"> <a id=forgot_username_link 
title="Eğer parolanızı veya kullanıcı adınızı unuttuysanız tıklayınız." 
href="/login.php?do=lostpw">Şifreni mi unuttun ?</a> </p>
<input type="hidden" name="s" value="$session[sessionhash]" />
		<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
		<input type="hidden" name="do" value="login" />
		<input type="hidden" name="vb_login_md5password" />
		<input type="hidden" name="vb_login_md5password_utf" />
    </form>
<if condition="$show['guest']">
<!-- fbconnect -->
<center>
<span class="fbconnect" style="height:21px">
<img src="http://static.ak.fbcdn.net/images/loaders/indicator_white_small.gif" alt="Connect with Facebook" />
</span>
</center>
<!-- / fbconnect -->
</if>

istediğimiz yere ekleyelim.

daha sonra aşağıda vermiş olduğum css kodlarını ilave css bölümüne ekleyelim.

#container {
    width:780px;
    margin:0 auto;
    position: relative;
}

#content {
    width:520px;
    min-height:500px;
}
a:link, a:visited {
    color:#27b;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a img {
    border-width:0;
}
#topnav {
    padding:10px 0px 12px;
    font-size:11px;
    line-height:23px;
    text-align:right;
}
#topnav a.signin {
    background:#88bbd4;
    padding:4px 6px 6px;
    text-decoration:none;
    font-weight:bold;
    color:#fff;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    *background:transparent url("images/signin-nav-bg-ie.png") no-repeat 0 0;
    *padding:4px 12px 6px;
}
#topnav a.signin:hover {
    background:#59B;
    *background:transparent url("images/signin-nav-bg-hover-ie.png") no-repeat 0 0;
    *padding:4px 12px 6px;
}
#topnav a.signin, #topnav a.signin:hover {
    *background-position:0 3px!important;
}

a.signin {
    position:relative;
    margin-left:3px;
}
a.signin span {
    background-image:url("images/toggle_down_light.png");
    background-repeat:no-repeat;
    background-position:100% 50%;
    padding:4px 16px 6px 0;
}
#topnav a.menu-open {
    background:#ddeef6!important;
    color:#666!important;
    outline:none;
}
#small_signup {
    display:inline;
    float:none;
    line-height:23px;
    margin:25px 0 0;
    width:170px;
}
a.signin.menu-open span {
    background-image:url("images/toggle_up_dark.png");
    color:#789;
}
#signin_menu {
    -moz-border-radius-topleft:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    display:none;
    background-color:#ddeef6;
    position:absolute;
    width:210px;
    z-index:100;
    border:1px transparent;
    text-align:left;
    padding:12px;
    top: 24.5px; 
    right: 0px; 
    margin-top:5px;
    margin-right: 0px;
    *margin-right: -1px;
    color:#789;
    font-size:11px;
}

#signin_menu input[type=text], #signin_menu input[type=password] {
    display:block;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border:1px solid #ACE;
    font-size:13px;
    margin:0 0 5px;
    padding:5px;
    width:203px;
}
#signin_menu p {
    margin:0;
}
#signin_menu a {
    color:#6AC;
}
#signin_menu label {
    font-weight:normal;
}
#signin_menu p.remember {
    padding:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete {
    clear:both;
    margin:5px 0;
}
#signin_menu p a {
    color:#27B!important;
}
#signin_submit {
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    background:#39d url('images/bg-btn-blue.png') repeat-x scroll 0 0;
    border:1px solid #39D;
    color:#fff;
    text-shadow:0 -1px 0 #39d;
    padding:4px 10px 5px;
    font-size:11px;
    margin:0 5px 0 0;
    font-weight:bold;
}
#signin_submit::-moz-focus-inner {
padding:0;
border:0;
}
#signin_submit:hover, #signin_submit:focus {
    background-position:0 -5px;
    cursor:pointer;
}

İşlem tamamdır