تسجيل الدخول مثل تويتر بتقنيةcss

السلام عليكم ورحمة الله وبركاته
بسم الله الرحمن الرحيم
مسائـكـم / صباحـكـم سعادهـ وفرح يارب
كيفكم اعضاء حزن العشاق
عساكم بخير
اليوم حبيت نشوف جديدتطويرالمنتدى

ندخل قالب navbar للستايل المراد التعديل عليه
ثم نبحث عن

كود PHP
<!-- login form -->
<form action="login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">
<****** type="****/**********" src="client******/vbulletin_md5.js?v=$vboptions[simpleversion]"></******>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
<tr>
<td class="smallfont" style="white-space: nowrap;"><label for="navbar_user****">$vbphrase[user****]</label></td>
<td><input type="****" class="bginput" style="font-size: 11px" ****="vb_login_user****" id="navbar_user****" size="10" accesskey="u" tabin***="101" value="$vbphrase[user****]" **********if (this.value == '$vbphrase[user****]') this.value = '';" /></td>
<td class="smallfont" nowrap="nowrap"><label for="cb_ieuser_navbar">
<input type="checkbox" ****="ieuser" value="1" tabin***="103" id="cb_ieuser_navbar" accesskey="c" checked />$vbphrase[remember_me]</label></td>
</tr>
<tr>
<td class="smallfont"><label for="navbar_password">$vbphrase[password]</label></td>
<td><input type="password" class="bginput" style="font-size: 11px" ****="vb_login_password" id="navbar_password" size="10" tabin***="102" /></td>
<td><input type="submit" class="button" value="$vbphrase[log_in]" tabin***="104" title="$vbphrase[enter_user****_to_login_or_register]" accesskey="s" /></td>
</tr>
</table>
<input type="hidden" ****="s" value="$session[sessionhash]" />
<input type="hidden" ****="securitytoken" value="$bbuserinfo[securitytoken]" />
<input type="hidden" ****="do" value="login" />
<input type="hidden" ****="vb_login_md5password" />
<input type="hidden" ****="vb_login_md5password_utf" />
</form>
<!-- / login form -->




نحذف ما بين الكودين


كود PHP
<!-- / login form -->


نضع هذا الكود بدل الي حذفناه


كود PHP
<if condition="$show['guest']">
<****** src="login/**********s/jquery.js" type="****/**********"></******>
<****** type="****/**********">
$(********).ready(function() {
$(".signin").click(function(e) {
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("menu-open");
});
$("fieldset#signin_menu").mouseup(function() {
return false
});
$(********).mouseup(function(e) {
if($(e.target).parent("a.signin").length==0) {
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});
});
</******>
<****** type="****/**********" src="client******/vbulletin_md5.js?v=$vboptions[simpleversion]"></******>


<div id="container">
<div id="topnav" class="topnav"> هل لديك حساب <a href="login.php" class="signin"><span>دخول</span></a> <a href="./register.php" class="register"><span>التسجيل</span></a> </div>
<fieldset id="signin_menu">
<form method="post" id="signin" action="login.php?$session[sessionurl]do=login" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})">
<label for="user****">الاسم</label>
<input id="navbar_user****" type="****" value="" tabin***="101" accesskey="u" ****="vb_login_user****" />
</p>
<p>
<label for="password">الرقم السري</label>
<input id="navbar_password" type="password" value="" tabin***="102" accesskey="u" ****="vb_login_password" />
</p>
<p class="remember">
<input type="submit" id="signin_submit" value="دخول" tabin***="104" title="Login" accesskey="s" />
<input id="cb_ieuser_navbar" type="checkbox" accesskey="c" tabin***="103" value="1" ****="ieuser" checked="checked"/>
<label for="cb_ieuser_navbar">تذكرني ؟</label>
</p>
<p class="forgot"> <a href="./login.php?do=lostpw">نسيت الرقم السري ؟</a> </p>
<p class="forgot-user****"> <A title="لا تنسى ان تضع بريدك في الرسالة."
href="./sendmessage.php">نسيت اسم العضوية ؟</A> </p>
<input type="hidden" ****="s" value="$session[sessionhash]" />

<input type="hidden" ****="securitytoken" value="$bbuserinfo[securitytoken]" />
<input type="hidden" ****="do" value="login" />
<input type="hidden" ****="vb_login_md5password" />
<input type="hidden" ****="vb_login_md5password_utf" />
</form>
</fieldset>
</div>
</if>




نضع الاكواد التاليه
ضع في اخر تعاريف CSS الإضافية/Additional CSS Definitions


كود PHP
/* ***** login ***** */
#container {
float:right;
margin:0 auto;
position: relative;
}
a img {
border-*****:0;
}
#topnav {
padding:10px 0px 12px;
font-size:11px;
line-******:23px;
****-align:right;
}
#topnav a.signin {
background:#ED8522;
padding:4px 6px 6px;
****-decoration:none;
font-weight:bold;
color:#fff;
-***kit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
*background:transparent url("./login/images/signin-nav-bg-ie.png") no-repeat 0 0;
*padding:4px 12px 6px;
}

#topnav a.signin:hover {
background:#F59A41;
*background:transparent url("./login/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 span {
background-image:url("./login/images/toggle_down_light.png");
background-repeat:no-repeat;
padding:4px 16px 6px 0;
}

#topnav a.register {
background:#ED8522;
padding:4px 6px 6px;
****-decoration:none;
font-weight:bold;
color:#fff;
-***kit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
*background:transparent url("./login/images/signin-nav-bg-ie.png") no-repeat 0 0;
*padding:4px 12px 6px;
}

#topnav a.register:hover {
background:#F59A41;
*background:transparent url("./login/images/signin-nav-bg-hover-ie.png") no-repeat 0 0;
*padding:4px 12px 6px;
}
#topnav a.register, #topnav a.register:hover {
*background-position:0 3px!important;
}
a.register span {
background-repeat:no-repeat;
background-position:100% 50%;
padding:4px 16px 6px 0;
}
#topnav a.menu-open {
background:#ED8522!important;
color:#fff!important;
outline:none;
}
#small_signup {
display:inline;
float:none;
line-******:23px;
margin:25px 0 0;
*****:170px;
}
a.signin.menu-open span {
background-image:url("./login/images/toggle_up_light.png");
color:#fff;
}
#signin_menu {
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-***kit-border-top-left-radius:5px;
-***kit-border-bottom-left-radius:5px;
-***kit-border-bottom-right-radius:5px;
display:none;
/* background-color:#ED8522; */
background:url(login/images/login_back.png) #ED8522 repeat-x;
position:absolute;
*****:210px;
z-in***:100;
border:1px transparent;
****-align:left;
padding:12px;
top: 24.5px;
right: 0px;
margin-top:5px;
margin-right: 0px;
*margin-right: -1px;
color:#fff;
font-size:11px;
}
#signin_menu input[type=****], #signin_menu input[type=password] {
display:block;
-moz-border-radius:4px;
-***kit-border-radius:4px;
border:1px solid #ED8522;
background:url(login/images/field_back.png) repeat-x;
font-size:13px;
margin:0 0 5px;
padding:5px;
*****:203px;
}
#signin_menu p {
margin:0;
}
#signin_menu a {
color:#fff;
}
#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:#fff!important;
}
#signin_menu p a:hover {
****-decoration:underline;
}
#signin_submit {
-moz-border-radius:4px;
-***kit-border-radius:4px;
background-color:#ED8522;
border:1px solid #fff;
color:#fff;
****-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;
}
/* ***** login ***** */




بعد ذلك نقوم برفع الملف المرفق الى مجلد منتداك الرئيسي
ليكون بهذا الشكل
vb/login


اضافتي على الموضوع: يمكنك التعديل على مسارات الصور في
اكواد css وجعل الصور داخل مجلد الصور للستايل لكي تكون النتيجه
في كل استايل نصممه لا اضافه نضعها بعد تركيب الستايل