تغير شكل الدخول مثل موقع تويتر للنسخه 3.8
طريقة التركيب
حمل الملف المرفق باسم login
وفك الضغط عنه بتلاقي مجلد باسم login قم برفعه كاملاً لمجلد منتداك
يعني يكون علي الشكل التالي
/vb/login/
التعديل الاول
ضع في اخر تعاريف CSS الإضافية/Additional CSS Definitions
كود PHP:
#container {
float:right;
margin:0 auto;
position: relative;
}
a img {
border-width:0;
}
#topnav {
padding:10px 0px 12px;
font-size:11px;
line-height:23px;
text-align:right;
}
#topnav a.signin {
background:#ED8522;
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("./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;
text-decoration:none;
font-weight:bold;
color:#fff;
-webkit-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-height:23px;
margin:25px 0 0;
width: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;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
display:none;
/* background-color:#ED8522; */
background:url(login/images/login_back.png) #ED8522 repeat-x;
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:#fff;
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 #ED8522;
background:url(login/images/field_back.png) repeat-x;
font-size:13px;
margin:0 0 5px;
padding:5px;
width: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 {
text-decoration:underline;
}
#signin_submit {
-moz-border-radius:4px;
-webkit-border-radius:4px;
background-color:#ED8522;
border:1px solid #fff;
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;
التعديل الثاني
اختر المكان اللذي تريد اضافت خانات تسجيل الدخول فيه سواء header او الـnavbar
وضع التالي كما يحلو لك
كود PHP:
<if condition="$show['guest']">
<script src="login/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>
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>
<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="username">الاسم</label>
<input id="navbar_username" type="text" value="" tabindex="101" accesskey="u" name="vb_login_username" />
</p>
<p>
<label for="password">الرقم السري</label>
<input id="navbar_password" type="password" value="" tabindex="102" accesskey="u" name="vb_login_password" />
</p>
<p class="remember">
<input type="submit" id="signin_submit" value="دخول" tabindex="104" title="Login" accesskey="s" />
<input id="cb_*-**-**-**-*ieuser_navbar" type="checkbox" accesskey="c" tabindex="103" value="1" name="*-**-**-**-*ieuser" checked="checked"/>
<label for="cb_*-**-**-**-*ieuser_navbar">تذكرني ؟</label>
</p>
<p class="forgot"> <a href="./login.php?do=lostpw">نسيت الرقم السري ؟</a> </p>
<p class="forgot-username"> <A title="لا تنسى ان تضع بريدك في الرسالة."
href="./sendmessage.php">نسيت اسم العضوية ؟</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>
</fieldset>
</div>
</if>
الصور المرفقة:
https://www.fadaeyat.co/attachment.p...8&d=1315783600
login.zip (26.4 كيلوبايت
jydv a;g hg]o,g leg l,ru j,djv ggksoi 3>
تغير شكل الدخول مثل موقع تويتر للنسخه 3.
العرض المتطور
