طريقة عمل لوحة دخول الاعضاء للجيل الثالث css

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

--------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------

العبره هنا ليست في طريقة التصميم وانما بالتوزيع واهم شي في هذا التوزيع هو الامر

position: absolute;

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

اوامر التحكم التالية

top: 12px;
left: 26px;

--------------------------------------------------------------------------------------

حيث ان امر top كلما ازداد الرقم الذي بجانبه يتوجه التصميم نحو الاسفل
والامر left كلما ازدادت نسبة الرقم بجانبه يتوجه التصميم نحو اليمن

الان نبدأ بسم الله الرحمن الرحيم
قم بالدخول على قالب النافبار
وقم بحزف هذا الكود منة

<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">
        
        <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>
        
    </td>
</if>

--------------------------------------------------------------------------------------

ثم حفظ للقالب

--------------------------------------------------------------------------------------

الان قالب تسجيل الدخول جاهز ولا يحتاج للتعديل

<if condition="$show['member']">
<td class="alt2" nowrap="nowrap">
<div id="login2">
<div class="wellcom">
<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>
</div>
<else />
<div id="login">
<td class="alt2" nowrap="nowrap" style="padding:0px">
<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="namelogin" 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><input type="checkbox" class="remember" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" /></td>
</tr>
<tr>
   <td><input type="password" class="passlogin" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" tabindex="102" /></td>

        <td><input type="image" src="login/login-button.png" class="login-button" tabindex="104" value="" 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>
</td>
</if>
</div>

--------------------------------------------------------------------------------------

يفضل وضعه في الهيدر

--------------------------------------------------------------------------------------

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

يعني فيها شريط ادخال الاسم والرقم السري وفيها زر تسجيل الدخول اوكي

--------------------------------------------------------------------------------------

كود تعاريف css الخاص بالصورة يحتاج للتعديل حسب ما تحب وهو مشروح بالتفصيل

#login{
background: url(login/login1.png) no-repeat;/*مسار الصورة*/
width:238px;/*عرض الصورة بنسبة بكسل*/
height: 132px;/*ارتفاع الصورة بسبة بكسل*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
top: 40px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 133px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
}

--------------------------------------------------------------------------------------

الان نحتاج لتصميم صورة شفافة لكي تعوض عن مكان اسم العضو والباسوورد بالشكل التالي لكن شفافة

هذه الصورة سوف تستخدم لادخال معلومات اسم العضو والباسوورد

--------------------------------------------------------------------------------------

تعاريف css الخاصة بمنطقة ادخال الاسم

.namelogin{
background: url(login/name-pass.png) no-repeat;/*مسار الصورة*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
top: 12px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 26px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
width:143px;/*عرض الصورة بنسبة بكسل*/
height: 15px;/*ارتفاع الصورة بسبة بكسل*/
border: 0px;/*الحواف تفضل ان تكون صفر*/
}

--------------------------------------------------------------------------------------

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

.passlogin{
background: url(login/name-pass.png) no-repeat;/*مسار الصورة*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
top: 36px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 26px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
width:143px;/*عرض الصورة بنسبة بكسل*/
height: 15px;/*ارتفاع الصورة بسبة بكسل*/
border: 0px;/*الحواف تفضل ان تكون صفر*/
}

--------------------------------------------------------------------------------------

الان نأتي الى علامة تذكرني التعاريف الخاصة بيها

.remember{/*علامة تذكرني*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
top: 97px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 0px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
width:15px;/*عرض يفضل عدم التلاعب به*/
height: 15px;/*ارتفاع يفضل عدم التلاعب به*/
}

--------------------------------------------------------------------------------------

الان تبقى زر الدخول وهنا نصمم صورة شفافة تعوض الزر
التعاريف الخاصة بيها

.login-button{/*هذه الصورة لاتحتوي على مسار مسارها داخل القالب*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
top: 76px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 26px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
width:57px;/*عرض الصورة بنسبة بكسل*/
height: 22px;/*ارتفاع الصورة بسبة بكسل*/
}

--------------------------------------------------------------------------------------

مسار هذه الصور لايكون في التعاريف وانما في القالب الي ارفقته في البداية ابحث عن

اسفلها تجد كود فيه هذا

هذا مسار الصورة

--------------------------------------------------------------------------------------

الان اكملنا تسجيل الدخول لكن بعد ما ندخل
نحتاج الى صورة نفس الاولى لكن مفرغة

--------------------------------------------------------------------------------------
التعاريف الخاصة بيها

#login2{
background: url(login/login2.png) no-repeat;/*مسار الصورة*/
width:238px;/*عرض الصورة بنسبة بكسل*/
height: 132px;/*ارتفاع الصورة بسبة بكسل*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
top: 40px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 133px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
}

--------------------------------------------------------------------------------------

تبقى الان شي واحد وهو الكتابة التي تضهر اهلا وسهلا بك فلان اخر زيارة كانت في تاريخ........ الخ
هذه التعاريف الخاصه فيها اذا اردت تحريكها او ما شابه

.wellcom{/*هذا الامر يختص بكلام الترحيب والرسائل الخاصة يضهر بعد الدخول*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
width:200px;/*عرض الصورة بنسبة بكسل*/
top: 10px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 30px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
}

--------------------------------------------------------------------------------------

الى هنا انتهى العمل على لوحة الدخول اتمنى ان اكون قد قدمت ما ينفع
ملاحظة ممكن ان نصمم صورة مفرغة ونجعل صور التعويض( الشفافة ) الى صور فعلية لكني رأيت الى ان من خلال
تصميم لوحة كامله ممكن التنويع من خلال وضع ايقونات او صور تجميليله او روابط اخرى
اتمنى لكم التوفيق
صاحب الموضوع الاستاذ عمر العانى - م . ق من ترايد نت