شبكة ديفي نت التطويرية

شبكة متخصصة بعالم التطوير والبرمجه والتصميم وكل مايتعلق بجديد عالم النت

الدخول

اهلا وسهلا بكم في شبكتنا

اهلا ومرحبا بك اخي واختي الزوار الكرام .. نرحب بكم في عائلة شبكة ديفي نت التطويرية .. يسعدنا اختياركم لموقعنا وان شاء الله سنقدم لكم الافضل .. تم تجديد الشبكة بنجاح .. الاستايل الجديد مازال قيد التطوير ولا أحلل سرقته ابداً

  • المواضيع الأخيرة

أفضل 10 أعضاء في هذا الأسبوع
لا يوجد مستخدم
أفضل 10 أعضاء في هذا الشهر
لا يوجد مستخدم

تغيير نمط شكل الدخول والتسجيل لشكل تويتر

شبكة ديفي نت التطويرية | Deve-Net :: تطوير منتديات vBulletin :: شروحات واضافات
شاطر
استعرض الموضوع التالياستعرض الموضوع السابق
نشر بتاريخ :- 16-10-2013    من طرف :: انور سوفت
انور سوفت
بلدي : الجزائر
مساهماتي : 4283
التسجيل : 26/05/2013
عــمري : 62

تغيير نمط شكل الدخول والتسجيل لشكل تويتر

السلام عليكم ورحمه الله


أحبــآب و أعضـــآء شبكة ديفي نت التطويرية


اليوم أقدم لكم شرحا مفصلا عن كيفية



تغير شكل الدخول العادي للمنتدى الى شكل تويتر

والطريقه تنفع لمنتديات vb 4.0.0 وما فوق

التعديل على 3 قوالب

اولا نرفع المجلد login الى مجلد المنتدى الرئيسي

الخطوه 2

التعديل على القوالب

القالب الاول "additional.css"

نضيف في نهايته


كود PHP:
الكود:

#container { 
    float:left; 
    margin:0 auto; 
    position: relative; 
} 
 
a img { 
    border-width:0;  
} 
#topnav { 
    padding:10px 0px 12px; 
    font-size:11px; 
    line-height:23px; 
    text-align:left; 
} 
#topnav a.signin { 
    background:#0d3156; 
    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:#15579b; 
    *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 { 
    position:relative; 
    margin-right:3px; 
} 
 
a.signin span { 
    background-image:url("./login/images/toggle_down_light.png"); 
    background-repeat:no-repeat; 
    background-position:100% 50%; 
    padding:4px 0 6px 16px; 
} 
 
#topnav a.register { 
    background:#0d3156; 
    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:#15579b; 
    *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 { 
    position:relative; 
    margin-right:0px; 
} 
 
a.register span { 
    background-image:url("./login/images/register_light.png"); 
    background-repeat:no-repeat; 
    background-position:100% 50%; 
    padding:4px 0 6px 16px; 
} 
 
 
 
#topnav a.menu-open { 
    background:#0d3156!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-topright:5px; 
    -moz-border-radius-bottomright:5px; 
    -moz-border-radius-bottomleft:5px; 
    -webkit-border-top-left-radius:5px; 
    -webkit-border-bottom-left-radius:5px; 
    -webkit-border-bottom-right-radius:5px; 
    display:none; 
   /* background-color:#0d3156; */ 
    background:url(login/images/login_back.png) #0d3156 repeat-x; 
    position:absolute; 
    width:210px; 
    z-index:100; 
    border:1px transparent; 
    text-align:right; 
    padding:12px; 
    top: 24.5px;  
    left: 0px;  
    margin-top:5px; 
    margin-left: 0px; 
    *margin-left: -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 #0d3156; 
    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:#0d3156; 
    border:1px solid #fff; 
    color:#fff; 
    text-shadow:0 -1px 0 #39d; 
    padding:4px 10px 5px; 
    font-size:11px; 
    margin:0 0 0 5px; 
    font-weight:bold; 
} 
#signin_submit::-moz-focus-inner { 
padding:0; 
border:0; 
} 
#signin_submit:hover, #signin_submit:focus { 
    background-position:0 -5px; 
    cursor:pointer; 
} 



الخطوه 3

افتح القالب "header"


كود PHP:
الكود:

<div id="toplinks" class="toplinks"> 
        <vb:if condition="$show['member']"> 
            <ul class="isuser"> 
                <li><a href="login.php?{vb:raw session.sessionurl}do=logout&amp;logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a></li> 
                <vb:if condition="$show['registerbutton']"> 
                <li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li> 
                </vb:if> 
                <li><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase control_panel}</a></li> 
                <li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li> 
                <vb:if condition="$notifications_total"> 
                <li class="popupmenu notifications" id="notifications"> 
                    <a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a> 
                    <ul class="popupbody popuphover"> 
                        {vb:raw notifications_menubits} 
                    </ul> 
                </li> 
                <vb:else /> 
                <li class="popupmenu nonotifications" id="nonotifications"> 
                    <a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a> 
                    <ul class="popupbody popuphover"> 
                        <li>{vb:rawphrase no_new_messages}</li> 
                        <li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li> 
                    </ul> 
                </li> 
                </vb:if> 
                <li class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li> 
            </ul> 
            {vb:raw template_hook.header_userinfo} 
            <vb:comment><p>{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}}</p></vb:comment> 
        <vb:else /> 
            <ul class="nouser"> 
            <vb:if condition="$show['registerbutton']"> 
                <li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li> 
            </vb:if> 
                <li><a rel="help" href="faq.php{vb:raw session.sessionurl_q}">{vb:rawphrase help}</a></li> 
                <li> 
            <script type="text/**********" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script> 
            <form action="login.php?{vb:raw session.sessionurl}do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})"> 
                <fieldset id="logindetails" class="logindetails"> 
                    <div> 
                        <div> 
                    <input type="text" class="textbox default-value" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" onfocus="if (this.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>'){this.value=''; this.style.color='black';}" onblur="if (this.value == '') {this.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>'; this.style.color='#828282';}"/> 
                    <input type="password" class="textbox default-value" tabindex="102" name="vb_login_password" id="navbar_password" size="10" onfocus="this.style.color='black';" /> 
                    <input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" /> 
                        </div> 
                    </div> 
                </fieldset> 
                <div id="remember" class="remember"> 
                    <label for="cb_******user_navbar"><input type="checkbox" name="******user" value="1" id="cb_******user_navbar" class="cb_******user_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label> 
                </div> 
 
                <input type="hidden" name="s" value="{vb:raw session.sessionhash}" /> 
                <input type="hidden" name="securitytoken" value="{vb:raw 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> 
                </li> 
            </ul> 
        </vb:if> 
    </div> 


واستبدلها ب


كود PHP:
الكود:

 
<div id="toplinks" class="toplinks"> 
        <vb:if condition="$show['member']"> 
            <ul class="isuser"> 
                <li><a href="login.php?{vb:raw session.sessionurl}do=logout&amp;logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a></li> 
                <vb:if condition="$show['registerbutton']"> 
                <li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li> 
                </vb:if> 
                <li><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase control_panel}</a></li> 
                <li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li> 
                <vb:if condition="$notifications_total"> 
                <li class="popupmenu notifications" id="notifications"> 
                    <a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a> 
                    <ul class="popupbody popuphover"> 
                        {vb:raw notifications_menubits} 
                    </ul> 
                </li> 
                <vb:else /> 
                <li class="popupmenu nonotifications" id="nonotifications"> 
                    <a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a> 
                    <ul class="popupbody popuphover"> 
                        <li>{vb:rawphrase no_new_messages}</li> 
                        <li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li> 
                    </ul> 
                </li> 
                </vb:if> 
                <li class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li> 
            </ul> 
            {vb:raw template_hook.header_userinfo} 
            <vb:comment><p>{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}}</p></vb:comment> 
        </vb:if> 
    </div> 



الخطوه 4

افتح القالب "navbar"


كود PHP:
الكود:

<div class="body_wrapper"> 



اضف بعدها:


كود PHP:
الكود:

<vb:if condition="$show['guest']"> 
<script src="login/**********s/jquery.js" type="text/**********"></script> 
<script type="text/**********"> 
        $(********).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(); 
                } 
            });             
 
        }); 
</script> 
 
<script type="text/**********" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script> 
 
<div id="container"> 
  <div id="topnav" class="topnav"> لديك حساب؟ <a href="login" 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?{vb:raw 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="دخول" accesskey="s" /> 
        <input id="cb_******user_navbar" type="checkbox" accesskey="c" tabindex="103" value="1" name="******user" checked="checked"/> 
        <label for="cb_******user_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="{vb:raw session.sessionhash}" /> 
 
 
                <input type="hidden" name="securitytoken" value="{vb:raw 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> 
</vb:if> 


وانتــــــــهــــــــيــــــــنا


و في الأخير تقبلـــوآ تحيات أخوكم : أنــــور زيآيـــة
17 
مُشاطرة هذه المقالة على:reddit

الردود

H.A.SS.A.N
رد: تغيير نمط شكل الدخول والتسجيل لشكل تويتر
الأربعاء 16 أكتوبر 2013, 4:09 pmH.A.SS.A.N
شرح ولا ارووووع

سلمت يداك
اخي الغالي

الله لا يحرمنا من ابداعك المتواصل
انور سوفت
رد: تغيير نمط شكل الدخول والتسجيل لشكل تويتر
الأربعاء 16 أكتوبر 2013, 4:19 pmانور سوفت
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

استعرض الموضوع التالياستعرض الموضوع السابق
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
اتصل بنا