السلام عليكم ورحمه الله وبركاته الدرس اليوم يتكلم عن شرح تغير مكان تسجيل الدخول في الاستايل الجانبي درس استايل الجانبي لاخونا Solar Attack حفظه الله درس تصميم استايل بهيدر جانبي بلغة Css مع Solar Attack كل شي موجود في المرفقات من كواد وصور الدرس و .. الخ

 مثال علي الدرس :

 اضغط علي الصورة للرؤية بشكل مكبر :

نبدأ الدرس :

اولا قم بحذف هذا الكود من النافبار
رمز PHP:

<if condition="$show['member']">
    <td class="alt2" nowrap="nowrap">
    <div class="smallfont">
        <strong><phrase 1="$bbuserinfo[username]" 2="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[welcome_x_link_y]</phrase></strong><br />
        <phrase 1="$pmbox[lastvisitdate]" 2="$pmbox[lastvisittime]">$vbphrase[last_visited_x_at_y]</phrase>

        <if condition="$show['notifications']">
            <div><span id="notifications"><a href="usercp.php$session[sessionurl_q]">$vbphrase[your_notifications]:</a> <strong>$notifications_total</strong></span></div>
            <if condition="$show['popups']">
                <script type="text/javascript"> vBmenu.register("notifications"); </script>
            <else />
                <script type="text/javascript" src="clientscript/vbulletin_notifications_nopopups.js?v=$vboptions[simpleversion]"></script>
                <script type="text/javascript"> vBulletin.register_control("vB_Notifications_NoPopups", "notifications");  </script>
            </if>
        <else /><if condition="$show['pmstats']">
            <div><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]">$vbphrase[private_messages_nav]</phrase></div>
        </if></if>

        <if condition="$show['pmwarning']"><div><strong><phrase 1="$vbphrase[pmpercent_nav_compiled]">$vbphrase[your_pm_box_is_x_full]</phrase></strong></div></if>
    </div>
    </td>
<else />
    <td class="alt2" nowrap="nowrap" style="padding:0px">
        <!-- login form -->
        <form action="login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">



        <script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>
        <table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
        <tr>
            <td class="smallfont" style="white-space: nowrap;"><label for="navbar_username">$vbphrase[username]</label></td>
            <td><input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="$vbphrase[username]" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td>
            <td class="smallfont" nowrap="nowrap"><label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" />$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" name="vb_login_password" id="navbar_password" size="10" tabindex="102" /></td>
            <td><input type="submit" class="button" value="$vbphrase[log_in]" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /></td>
        </tr>
        </table>
        <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>
        <!-- / login form -->

 ثم نتبع الصور :

 اضغط علي الصورة للرؤية بشكل مكبر :

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

رمز PHP:

<if condition="$show['member']">
<div class="login">
    <div class="log">
    <div class="smallfont">
        <strong><phrase 1="$bbuserinfo[username]"  2="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[welcome_x_link_y]</phrase></strong><br  />
        <phrase 1="$pmbox[lastvisitdate]" 2="$pmbox[lastvisittime]">$vbphrase[last_visited_x_at_y]</phrase>
  
        <if condition="$show['notifications']">
            <div><span id="notifications"><a  href="usercp.php$session[sessionurl_q]">$vbphrase[your_notifications]:</a>   <strong>$notifications_total</strong></span></div>
            <if condition="$show['popups']">
                <script type="text/javascript"> vBmenu.register("notifications"); </script>
            <else />
                <script type="text/javascript"  src="clientscript/vbulletin_notifications_nopopups.js?v=$vboptions[simpleversion]"></script>
                <script type="text/javascript">  vBulletin.register_control("vB_Notifications_NoPopups",  "notifications");  </script>
            </if>
        <else /><if condition="$show['pmstats']">
            <div><phrase 1="$vbphrase[unread_x_nav_compiled]"  2="$vbphrase[total_x_nav_compiled]"  3="$session[sessionurl_q]">$vbphrase[private_messages_nav]</phrase></div>
        </if></if>
  
        <if  condition="$show['pmwarning']"><div><strong><phrase  1="$vbphrase[pmpercent_nav_compiled]">$vbphrase[your_pm_box_is_x_full]</phrase></strong></div></if>
    </div>
    </div>
    </div>
  
<else />
  
<div class="login">
    <div class="log">
        <!-- login form -->
        <form action="login.php?do=login" method="post"  onsubmit="md5hash(vb_login_password, vb_login_md5password,  vb_login_md5password_utf, $show[nopasswordempty])">
        <script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>
        <table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
        <tr>
            <td><input type="text" class="bginput1"  style="font-size: 11px" name="vb_login_username" id="navbar_username"  size="10" accesskey="u" tabindex="101" value="$vbphrase[username]"  onfocus="if (this.value == '$vbphrase[username]') this.value = '';"  /></td>
        </tr>
        <tr>
            <td><input type="password" class="bginput2"  style="font-size: 11px" name="vb_login_password" id="navbar_password"  size="10" tabindex="102" /></td>
        </tr>
        <tr>
            <td class="smallfont" nowrap="nowrap">
            <input style="vertical-align:middle;" type="submit"  class="button_l" value="" tabindex="104"  title="$vbphrase[enter_username_to_login_or_register]" accesskey="s"  />
            <input style="vertical-align:middle;" type="checkbox"  name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar"  accesskey="c" /></td>
        </tr>
        </table>
        <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>
        <!-- / login form -->
  
    </div>
</div>
  
</if> 


بعد وضع الكود نروح على تعاريف css رئيسي ونضع هذا الكود

رمز PHP:

.login {
    background:url(free-des/login.jpg) no-repeat;
    float:right;
    height:221px;
    position:fixed;
    right:0;
    width:176px;
    margin-top:210px;
    z-index:9999;
}
.log {
    position:absolute;
    top:102px;
    right:1px;
    color:#FFF;
    margin-right:3px;
    padding-right:1px;
    padding-left:10px;
}
.bginput1 {
    background:url(free-des/bginput.jpg) no-repeat top center;
    height:34px;
    width:157px;
    font:12px Tahoma, Geneva, sans-serif;
    text-align:center;
    color:#6a5d44;
    border:none;
}
.bginput2 {
    background:url(free-des/bginput.jpg) no-repeat top center;
    height:34px;
    width:157px;
    font:12px Tahoma, Geneva, sans-serif;
    text-align:center;
    color:#6a5d44;
    border:none;
}
.button_l {
    background:url(free-des/button.jpg) no-repeat top center;
    height:32px;
    width:102px;
    border:none;
    cursor:pointer;
}
.smallfont {
    font:12px tahoma;
} 


 تطبيق الدرس :

بعد ما طبقنا الي بالصورة الان نيجي لشرح تعريفات css والان موجود ثلاث صور وشرح تغير مسار الصور الصور في المرفقات ملاحظة: تقدر تغير تصميم الصور بما يناسب موقعك نتابع الصور

 المرفقات :

  

انتهي

---

 

http://www.traidnt.net/vb/traidnt1913362

---

 :

       

• شرح تصميم استايل متعدد الالوان درس كامل فيديو احترف تصميم الاستايل حصريا علي ترايدنت
• دورة شاملة تصميم استايل الى مرحلة التركيب
• درس تغيير لون خلفية كل من ( الاعلانات - المواضيع المثبته -المنقولة -المحذوفة وغيرها)
• درس تحسين شكل التوزيعة الأولى و الثانية
• شرح تأطير الصوره الرمزيه+عمل صورة رمزيه افتراضيه لجميع الاعضاء بالcss وتأطيرها
• شرح تأطير قالب postbit_legacy
• دورة تصميم الواجهات .. الحلقة الثامنة .. تركيب أقسام الواجهة
• دورة تصميم الواجهات .. الحلقة السابعة .. تركيب الواجهة على الفرونت بيج
• دورة تصميم الواجهات .. الحلقة السادسة .. تقطيع صور الأقسام (القوائم)
• دورة تصميم الواجهات .. الحلقة الخامسة .. تصميم صور الأقسام (القوائم)