تغير شكل الدخول مثل موقع تويتر للنسخه 3.8

o1-1o.com

عضو جديد
25 مارس 2010
4
0
0
تغير شكل الدخول مثل موقع تويتر للنسخه 3.8
شاهدت طريقه لجعل تسجيل الدخول مثل تويتر للنسخه 4.0

وأعجبتني كثيراً

والحمد لله قدرت اعدل عليها لتعمل على النسخه 3.8


هذا راح يكون الشكل



وعند الضغط علي دخول , سوف تنزل قائمة مندسلة لتضع فيها الاسم والرقم السري .



لمشاهدة مثال

هنا

http://www.3shag.o1-1o.com

طريقة التركيب

حمل الملف المرفق باسم 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.3shag.o1-1o.com

لتحميل الصور

هنا

تحياتي لكم
 
التعديل الأخير بواسطة المشرف:

o1-1o.com

عضو جديد
25 مارس 2010
4
0
0
تحياتي لكم

اعتذر على النسيان

الملف في المرفقات
 

المرفقات

  • login.zip
    26.6 KB · المشاهدات: 233