(درس) شرح تغيير مكان تسجيل الدخول والرسائل الخاصة بشكل مميز بلغة css

مرحبا بكل اعضاء وزوار مرسى الفي بي /ترايدنت
الكرام اهلا ومرحبا بكم في درس متواضع بلغة css
لغة العصر
اليوم اقدم فكرة مميزة جدا في تغيير مكان تسجيل الدخول بالمنتدى
قام باستخدامها في استايلة الرمضاني الاخ المميزقناص جوبا والان نطرح لكم كيف تم عملها

لنبدأ ع البركة

1- قم باستخدام برنامج الفوتوشوب في تصميم شكل كالاتي وهو شكل بسيط كل حسب مايريد

طبعا الشكل تم تصميمة طبقا للاستايل الافتراضي

تابع معي

2-صمم شكل مربع دخول كالاتي

وليكونا اثنين كهذا الشكل
3-صمم زر مكتو ب علية دخول الاعضاء او تسجيل او كما تريد وهذا مثال

وكل هذي اشكال بسيطة يمكن لمصصم ما تعديلها حسب استايلة او حسب ان يتم

والان دخلنا لللجد ركز معايا وهات دماغك وتعال معايا
دلوقتي هنعدل عكود الدخول في الناف بار

اول خطوة ادخل لوحة التحكم وهات الناف بار وتعال تابع الصورة

ودا الشكل العام للناف بار في الفرونت

قم بنسخ من اول الجزء المحدد في الصورة

اومن اول هذا الكود في السطر 22

رمز PHP:

<if condition="$show['member']"> 

لغاية السطر 68
او الكود

رمز PHP:

<!-- / login form -->
    </td>
</if> 

الموضح بالصورة



ليصبح بالشكل الاتي

الان لعبة الاكواد المفضلة لدي
استعد الان نقوم بالتعديل وكتابة الاكواد الخاصة وتعديل الناف بار .
نبدا اول قم بتغيير اسماء الصور كما بالشكل


نرجع للكود اللى اخدناه من النافبار في الفرونت بيج تيجي لصفحة التعليمات البرمجية
اللى هو بهذا الشكل
<

رمز 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 -->
    </td>
</if> 

استبدل هذ القالب بهذا الكود المعدل

رمز 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
عشان تظهر بالشكل المطلوب

تابع معايا هنقوم بكام خطوة للتجهيز اولا

تابع الصور
افتح متغيرات الاستايل
وتابع

خيارات css



الان في خيارات cssالاضافية اضف هذي الاكواد

تذكر انني اعمل ع الاستايل الافتراضي

عشان مسار الصور

رمز PHP:

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

بالصور



لتصبح النتيجة النهائية كالاتي
وان شاء الله تكون مميزة واعجبتكم

اخواني شوف الصور





وفي النهاية ارجو ان اكون قد وفقت في الشرح
فان اصبت فتوفيق من الله
وان اخفقت فمن نفسى والشيطان

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

شكر و اهدء خاص للاخوة
css/خادم الاسلام /قناص جوبا/فيروس خائف