شاهدت طريقه لجعل تسجيل الدخول مثل تويتر للنسخه 4.0
هنا المثال للنسخه الرابعه
http://www.max-times.com/vb/index.php?styleid=10
وأعجبتني كثيراً
والحمد لله قدرت اعدل عليها لتعمل على النسخه 3.8
هذا راح يكون الشكل
وعند الضغط علي دخول , سوف تنزل قائمة مندسلة لتضع فيها الاسم والرقم السري .
طريقة التركيب
حمل الملف المرفق باسم login
وفك الضغط عنه بتلاقي مجلد باسم login قم برفعه كاملاً لمجلد منتداك
يعني يكون علي الشكل التالي
/vb/login/
التعديل الاول
ضع في اخر تعاريف CSS الإضافية/Additional CSS Definitions
التعديل الثاني
اختر المكان اللذي تريد اضافته فيه سواء header او الـnavbar
وضع التالي كما يحلو لك
وتمتع بشكل تسجيل الدخول الجميل , الشبية بموقع تويتر
لمشاهدة مثال
هنا
http://www.max-times.com/vb/index.php?styleid=10
تحياتي لكم
هنا المثال للنسخه الرابعه
http://www.max-times.com/vb/index.php?styleid=10
وأعجبتني كثيراً
والحمد لله قدرت اعدل عليها لتعمل على النسخه 3.8
هذا راح يكون الشكل
وعند الضغط علي دخول , سوف تنزل قائمة مندسلة لتضع فيها الاسم والرقم السري .
طريقة التركيب
حمل الملف المرفق باسم login
وفك الضغط عنه بتلاقي مجلد باسم login قم برفعه كاملاً لمجلد منتداك
يعني يكون علي الشكل التالي
/vb/login/
التعديل الاول
ضع في اخر تعاريف CSS الإضافية/Additional CSS Definitions
كود:
/* ***** login ***** */
#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;
}
/* ***** login ***** */
التعديل الثاني
اختر المكان اللذي تريد اضافته فيه سواء header او الـnavbar
وضع التالي كما يحلو لك
كود:
<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_cookieuser_navbar" type="checkbox" accesskey="c" tabindex="103" value="1" name="cookieuser" checked="checked"/>
<label for="cb_cookieuser_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>
وتمتع بشكل تسجيل الدخول الجميل , الشبية بموقع تويتر
لمشاهدة مثال
هنا
http://www.max-times.com/vb/index.php?styleid=10
تحياتي لكم