السلام عليكم ورحمة الله وبركاته
الدرس الثاني لتعدليل مكان تسجيل الدخول
والان سنعمل الكود الخاص بتسجيل دخول الاعضاء
لكي يظهر بشكل جميل ومميز
لذا سندخل لوحة تحكم المنتدى
ونبحث عن قالب
Navbar
وبعدها نبحث عن هذا الكود وننسخه ونضعه في الفرونت بيج
وبعدها نحذفه من القالب , ونسجل القالب
كود PHP:
كود:
<if condition="$show['member']">
كود PHP:
كود:
<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_user_navbar"><input type="checkbox" name="user" value="1" tabindex="103" id="cb_user_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']">
كود PHP:
كود:
<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>
<script type="text/javascript"> vBmenu.register("notifications"); </script>
<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>
<else />
<!-- login form -->
<form action="login.php" 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"></script>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0" id="table37">
<tr>
<td class="smallfont" nowrap>
<img border="0" src="images/user.gif" width="16" height="16">
</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_user_navbar">
<input type="checkbox" name="user" value="1" tabindex="103" id="cb_user_navbar" accesskey="c" checked />$vbphrase[remember_me]</label></td>
</tr>
<tr>
<td class="smallfont" nowrap="nowrap">
<img border="0" src="images/pass.gif" width="16" height="16">
</td>
<td>
<input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" accesskey="p" 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 -->
</if>
وهذا هو شكله الحالي
والان سنطور الكود لكي يصبح بشكل أفقي وجميل
عن طريق وضع هذا الكود بدل السابق
كود PHP:
كود:
<if condition="$show['member']">
<div class="smallfont">
<table border="0" width="100%" dir="rtl" cellspacing="0" cellpadding="0">
<tr>
<td width="230"><strong>
<phrase 1="$bbuserinfo[username]" 2="member.php?$session[sessionurl]u=$bbuserinfo[userid]">
$vbphrase[welcome_x_link_y]</phrase></strong></td>
<td><a href="usercp.php$session[sessionurl_q]">
<img border="0" src="images/usercp.gif" width="16" height="16" alt="لوحة تحكمي"></a></td>
<td><a href="private.php">
<img border="0" src="images/msg.gif" width="16" height="16" alt="رسائلي الخاصة"></a></td>
<td>
<a href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]"><img border="0" src="images/logout.gif" width="16" height="16"></a></td>
</tr>
</table></div>
<else />
<!-- login form -->
<form action="login.php" 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"></script>
<table border="0" width="100%" dir="rtl" cellspacing="0" cellpadding="2">
<tr>
<td width="110"><img border="0" src="images/user.gif" width="16" height="16"> <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 width="110"><img border="0" src="images/pass.gif" width="16" height="16"> <input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" accesskey="p" tabindex="102" /></td>
<td width="20"> <input type="checkbox" name="user" value="1" tabindex="103" id="cb_user_navbar" accesskey="c" checked /></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 -->
</if>
وسيكون شكله كالتالي
والان كما ترون فلقد اصبح شكل التصميم افقي ومميز جدا برايي
لهذا لنركبه الان بالتصميم
لذا لنعود الان الى الفرونت بيج , ونفتح الصفحة التي عملنا فيها التصميم
وبعدها لو تلاحظ الكود التالي كما بالصورة
عليك ان تقوم بحذفه لكي يصبح الكود فقط كالتالي
images/xxx.gif
الان لنعود الى صفحة التصميم
ونضغط على الخانة الوسط في الجدول
وندخل على صفحة الاكواد بالضغط على code
وبعدها كما تلاحظون , نظلل الكود التالي
ونضع بدلا منه , الكود الاخير الافقي لتسجيل الدخول
كود PHP:
كود:
<if condition="$show['member']">
كود PHP:
كود:
<div class="smallfont">
<table border="0" width="100%" dir="rtl" cellspacing="0" cellpadding="0">
<tr>
<td width="230"><strong>
<phrase 1="$bbuserinfo[username]" 2="member.php?$session[sessionurl]u=$bbuserinfo[userid]">
$vbphrase[welcome_x_link_y]</phrase></strong></td>
<td><a href="usercp.php$session[sessionurl_q]">
<img border="0" src="images/usercp.gif" width="16" height="16" alt="لوحة تحكمي"></a></td>
<td><a href="private.php">
<img border="0" src="images/msg.gif" width="16" height="16" alt="رسائلي الخاصة"></a></td>
<td>
<a href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]"><img border="0" src="images/logout.gif" width="16" height="16"></a></td>
</tr>
</table></div>
<else />
<!-- login form -->
<form action="login.php" 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"></script>
<table border="0" width="100%" dir="rtl" cellspacing="0" cellpadding="2">
<tr>
<td width="110"><img border="0" src="images/user.gif" width="16" height="16"> <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 width="110"><img border="0" src="images/pass.gif" width="16" height="16"> <input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" accesskey="p" tabindex="102" /></td>
<td width="20"> <input type="checkbox" name="user" value="1" tabindex="103" id="cb_user_navbar" accesskey="c" checked /></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 -->
</if>
والان نكون 100% انهينا عمل الكود والتصميم وتحضيره بالفرونت بيج
الان ننسخ كود الصفحة كاملا
ونفتح صفحة جديدة , وكما فعلنا بالسابق , نحذف محتوى اكواد تلك الصفحة الجديدة
وبعدها نضيف الكود التالي اولا
كود PHP:
كود:
<div style="position: absolute; width: 400px; height: 100px; z-index: 1; left: 20px; top: 0px" id="layer1">
كود PHP:
وهذا الكود عمله هو كأنه لير لكي يكون فوق الصور
والان نضيف الكود الخاص بالتصميم وتسجيل الدخول داخل الكود هذا (اللير)
لكي يصبح الكود هكذا
كود PHP:
كود:
<div style="position: absolute; width: 400px; height: 100px; z-index: 1; left: 20px; top: 0px" id="layer1">
كود PHP:
كود:
<table border="0" width="100%" dir="rtl" cellspacing="0" cellpadding="0" background="images/fox_02.jpg"> <tr> <td> <img border="0" src="images/fox_03.jpg" width="26" height="40"></td> <td width="100%"> <if condition="$show['member']"> <div class="smallfont"> <table border="0" width="100%" dir="rtl" cellspacing="0" cellpadding="0"> <tr> <td width="230"><strong> <phrase 1="$bbuserinfo[username]" 2="member.php?$session[sessionurl]u=$bbuserinfo[userid]"> $vbphrase[welcome_x_link_y]</phrase></strong></td> <td><a href="usercp.php$session[sessionurl_q]"> <img border="0" src="images/usercp.gif" width="16" height="16" alt="لوحة تحكمي"></a></td> <td><a href="private.php"> <img border="0" src="images/msg.gif" width="16" height="16" alt="رسائلي الخاصة"></a></td> <td> <a href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]"><img border="0" src="images/logout.gif" width="16" height="16"></a></td> </tr> </table></div> <else /> <!-- login form --> <form action="login.php" 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"></script> <table border="0" width="100%" dir="rtl" cellspacing="0" cellpadding="2"> <tr> <td width="110"><img border="0" src="images/user.gif" width="16" height="16"> <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 width="110"><img border="0" src="images/pass.gif" width="16" height="16"> <input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" accesskey="p" tabindex="102" /></td> <td width="20"> <input type="checkbox" name="user" value="1" tabindex="103" id="cb_user_navbar" accesskey="c" checked /></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 --> </if></td> <td> <img border="0" src="images/fox_01.jpg" width="24" height="40"></td> </tr>
وفي النهاية انسخ الكود كاملا
وضعه في اخر قالب الهيدر
وستحصلون على
هذا للزائر
وهذا للعضو
في اعلى المنتدى
اما بالنسبة للصور
فكل ما عليك عمله هو تحميل هذا الملف
التحميل
من المرفقات
ورفع الصور الي فيه داخل مجلد الصور الرئيسية images
وبهذا اكون انهيت شرحي
ان شاء الله اعجبكم شرحي المفصل والمتواضع
المهندس ابوبكر الحمادي
المفضلات