abohmam
15-06-2009, 10:52 PM
بسم الله الرحمن الرحيم
السلام عليكم
كيف الحال اخواني؟
ان شاء الله بخير
اليوم حبيت اقدم لكم شرح خاص ومميز لكم
وجديد طبعا , حيث انني لم اجد شرح مشابه له بعد
وان شاء الله اكون ما اخطئت
المهم
شرحنا اليوم هو
كيفية تغيير مكان تسجيل الدخول + تصميم اطار خاص بها + عمل مكان مميز لاظهاره
لكي يصبح الشكل هذ
حيث سيكون هكذا هو شكلها الرائع باذن الله
هذا للزائر
http://up.fox4h.com//uploads/images/fox-53cb14aad3.gif
وهذا للعضو
http://up.fox4h.com//uploads/images/fox-0fbf8b3d42.gif
تابعو معي وسترون
كيف بالضبط
لنبد
سنبدا كبداية , في تصميم الاطار الذي سنضع فيه تسجيل الدخول للعضو
اولا نفتح الفوتوشوب
http://up.fox4h.com//uploads/images/fox-21ec9dc5f5.gif
وبعدها نفتح صفحة جديدة بحجم
300*40
http://up.fox4h.com//uploads/images/fox-a9213e849f.gif
وسيكون الشكل هكذا اذ
http://up.fox4h.com//uploads/images/fox-c011ad36d4.gif
الان في صفحة الليرات , نضغط على اللير مرتين
http://up.fox4h.com//uploads/images/fox-3cab083501.gif
لكي تظهر لنا هذه الصفحة
http://up.fox4h.com//uploads/images/fox-14b9453ae1.gif
ونضغط اوكي , وما عملناه هنا هو اننا جعلنا اللير قابل للتحكم والحذف
لكي نقدر نحذفه , فشكله الان سيكون كالتالي
http://up.fox4h.com//uploads/images/fox-88bb782785.gif
الان نعمل لير جديد عن طريق الضغط على
Shift + Ctrl + N
http://up.fox4h.com//uploads/images/fox-d7ef384e40.gif
وبعدها نحذف اللير السابق
والان نختار اداة رسم مربع ذو اطراف دائرية
http://up.fox4h.com//uploads/images/fox-e0da0fdf83.gif
ونرسم الان نصف مربع , اي هكذ
http://up.fox4h.com//uploads/images/fox-c8fc8dc7c9.gif
الان في صفحة الليرات , سنعمل تاثيرات قليلة على هذا المربع ,
لذا سنضغط كما في الصورة
http://up.fox4h.com//uploads/images/fox-26d77f850c.gif
ونعمل التاثيرات كالتالي وبالنسبة للون , فكود اللون هو #C4C4C4
http://up.fox4h.com//uploads/images/fox-5ebbea104b.gif
والان نضغط على تاثير Gradient Overlay ونعمل كما بالصورة
وبالنسبة لاكواد اللون , فهي #DFDFDF و #FFFFFF
ونضغط اوكي
http://up.fox4h.com//uploads/images/fox-8fb24b3970.gif
والان اصبح لدينا اطار سنضع فيه تسجيل دخول العضو وها هو شكله
http://up.fox4h.com//uploads/images/fox-a22fca4897.gif
والان سنقطعه عن طريق هذه الاداة
http://up.fox4h.com//uploads/images/fox-0a2d510267.gif
ونقطع التصميم كالتالي
http://up.fox4h.com//uploads/images/fox-78f2652c5f.gif
والان نضغط على
File >>> Save For Web
وبعدها نضغط على Save
ونحدد مسار التسجيل ونسجله
والان نذهب الى مسار الصور الذي سجلناهم
ونختار الصورة الثانية ونفتحها على الفوتوشوب
http://up.fox4h.com//uploads/images/fox-510cb6726e.gif
وبعدها نضغط على Image >>> Canvas Size
ونعمل كما بالصورة
http://up.fox4h.com//uploads/images/fox-08adac93b4.gif
ونضغط اوكي , ونسجل الصورة
وهكذا نكون انهينا 100% امر التصميم
والان نبدا في برنامج الفرونت بيج , لكي نجهز الكود
لذا سنفتح الفرونت بيج
http://up.fox4h.com//uploads/images/fox-bd01022a6e.gif
وندخل صفحة الاكواد , عن طريق الضغط على زر code
http://up.fox4h.com//uploads/images/fox-027e99e787.gif
ونحذف محتوى كل الصفحة التالية
http://up.fox4h.com//uploads/images/fox-3e8381be21.gif
والان نعود الى صفحة التصميم عن طريق الضغط على زر design
http://up.fox4h.com//uploads/images/fox-027e99e787.gif
والان نضيف جدول مكون من 3 خانات
http://up.fox4h.com//uploads/images/fox-2c27a14550.gif
ونضغط على الجدول بالزر الأيمن ونختار كما بالصورة
http://up.fox4h.com//uploads/images/fox-1537599e6e.gif
ونعمل الاعدادات كالتالي , مع العلم ان المربع الاحمر الاخير ,
يدل على الصورة الثانية والتي اعتبرناها نقطة التمدد
http://up.fox4h.com//uploads/images/fox-892c893682.gif
وسيصبح الشكل هكذ
http://up.fox4h.com//uploads/images/fox-26ba9c9174.gif
والان لنضيف الصورتان الاخرتان هكذ
http://up.fox4h.com//uploads/images/fox-9837f8f7ff.gif
ونختارهما ونضيفهم بالجدول
http://up.fox4h.com//uploads/images/fox-187f4a278b.gif
الان عند اضافتهم , سيكون الشكل هكذ
http://up.fox4h.com//uploads/images/fox-0b77007d14.gif
لذا كما بالصورة اعلاه , في مكان السهم , نضغط بالزر اليمين , ونختار الخيار التالي
http://up.fox4h.com//uploads/images/fox-15806786bc.gif
ونعمل الاعدادات كما بالصورة
http://up.fox4h.com//uploads/images/fox-2fd6e3fbbc.gif
وبعدها سيكون الشكل هكذ
http://up.fox4h.com//uploads/images/fox-ccec75febd.gif
وهكذا , نكون انهينا عمل الكود الخاص بالتصميم
والان سنعمل الكود الخاص بتسجيل دخول الاعضاء
لكي يظهر بشكل جميل ومميز
لذا سندخل لوحة تحكم المنتدى
ونبحث عن قالب
Navbar
وبعدها نبحث عن هذا الكود وننسخه ونضعه في الفرونت بيج
وبعدها نحذفه من القالب , ونسجل القالب
<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>
وهذا هو شكله الحالي
http://up.fox4h.com//uploads/images/fox-aa10d1ebac.gif
الان سنعمل تعديلات على الكود بحيث يكون مظهره اجمل اكثر
وسنبدا بالتالي
سنقوم بالبداية بحذف كلمة "اسم العضو" و "كلمة السر" واستبدالهم بصور
بوضح هذا الكود
<if condition="$show['member']">
<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_cookieuser_navbar">
<input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_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>
وهذا هو شكله الحالي
http://up.fox4h.com//uploads/images/fox-e75abc20ba.gif
والان سنطور الكود لكي يصبح بشكل أفقي وجميل
عن طريق وضع هذا الكود بدل السابق
<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="cookieuser" value="1" tabindex="103" id="cb_cookieuser_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>
وسيكون شكله كالتالي
http://up.fox4h.com//uploads/images/fox-0786436577.gif
والان كما ترون فلقد اصبح شكل التصميم افقي ومميز جدا برايي
لهذا لنركبه الان بالتصميم
لذا لنعود الان الى الفرونت بيج , ونفتح الصفحة التي عملنا فيها التصميم
وندخل صفحة الاكواد من هنا
http://up.fox4h.com//uploads/images/fox-027e99e787.gif
وبعدها لو تلاحظ الكود التالي كما بالصورة
http://up.fox4h.com//uploads/images/fox-019618ce13.gif
عليك ان تقوم بحذفه لكي يصبح الكود فقط كالتالي
images/xxx.gif
وسيصبح هكذ
http://up.fox4h.com//uploads/images/fox-63e9d2a015.gif
الان لنعود الى صفحة التصميم
http://up.fox4h.com//uploads/images/fox-027e99e787.gif
ونضغط على الخانة الوسط في الجدول
http://up.fox4h.com//uploads/images/fox-ccec75febd.gif
وندخل على صفحة الاكواد بالضغط على code هن
http://up.fox4h.com//uploads/images/fox-027e99e787.gif
وبعدها كما تلاحظون , نظلل الكود التالي
http://up.fox4h.com//uploads/images/fox-0700503a52.gif
ونضع بدلا منه , الكود الاخير الافقي لتسجيل الدخول
أي هذا الكود
<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="cookieuser" value="1" tabindex="103" id="cb_cookieuser_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% انهينا عمل الكود والتصميم وتحضيره بالفرونت بيج
الان ننسخ كود الصفحة كامل
ونفتح صفحة جديدة , وكما فعلنا بالسابق , نحذف محتوى اكواد تلك الصفحة الجديدة
وبعدها نضيف الكود التالي اول
<div style="position: absolute; width: 400px; height: 100px; z-index: 1; left: 20px; top: 0px" id="layer1">
</div>
وهذا الكود عمله هو كأنه لير لكي يكون فوق الصور
والان نضيف الكود الخاص بالتصميم وتسجيل الدخول داخل الكود هذا (اللير)
لكي يصبح الكود هكذ
<div style="position: absolute; width: 400px; height: 100px; z-index: 1; left: 20px; top: 0px" id="layer1">
<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="cookieuser" value="1" tabindex="103" id="cb_cookieuser_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>
</table>
</div>
وفي النهاية انسخ الكود كاملا
وضعه في اخر قالب الهيدر
وستحصلون على
هذا للزائر
http://up.fox4h.com//uploads/images/fox-53cb14aad3.gif
وهذا للعضو
http://up.fox4h.com//uploads/images/fox-0fbf8b3d42.gif
في اعلى المنتدى
اما بالنسبة للصور
فكل ما عليك عمله هو تحميل هذا الملف
http://up.fox4h.com//view.php?file=cf9d5f0e44
ورفع الصور الي فيه داخل مجلد الصور الرئيسية images
وبهذا اكون انهيت شرحي
ان شاء الله اعجبكم شرحي المفصل والمتواضع
تحياتي
خضر من فلسطين
منقول للفائدة
السلام عليكم
كيف الحال اخواني؟
ان شاء الله بخير
اليوم حبيت اقدم لكم شرح خاص ومميز لكم
وجديد طبعا , حيث انني لم اجد شرح مشابه له بعد
وان شاء الله اكون ما اخطئت
المهم
شرحنا اليوم هو
كيفية تغيير مكان تسجيل الدخول + تصميم اطار خاص بها + عمل مكان مميز لاظهاره
لكي يصبح الشكل هذ
حيث سيكون هكذا هو شكلها الرائع باذن الله
هذا للزائر
http://up.fox4h.com//uploads/images/fox-53cb14aad3.gif
وهذا للعضو
http://up.fox4h.com//uploads/images/fox-0fbf8b3d42.gif
تابعو معي وسترون
كيف بالضبط
لنبد
سنبدا كبداية , في تصميم الاطار الذي سنضع فيه تسجيل الدخول للعضو
اولا نفتح الفوتوشوب
http://up.fox4h.com//uploads/images/fox-21ec9dc5f5.gif
وبعدها نفتح صفحة جديدة بحجم
300*40
http://up.fox4h.com//uploads/images/fox-a9213e849f.gif
وسيكون الشكل هكذا اذ
http://up.fox4h.com//uploads/images/fox-c011ad36d4.gif
الان في صفحة الليرات , نضغط على اللير مرتين
http://up.fox4h.com//uploads/images/fox-3cab083501.gif
لكي تظهر لنا هذه الصفحة
http://up.fox4h.com//uploads/images/fox-14b9453ae1.gif
ونضغط اوكي , وما عملناه هنا هو اننا جعلنا اللير قابل للتحكم والحذف
لكي نقدر نحذفه , فشكله الان سيكون كالتالي
http://up.fox4h.com//uploads/images/fox-88bb782785.gif
الان نعمل لير جديد عن طريق الضغط على
Shift + Ctrl + N
http://up.fox4h.com//uploads/images/fox-d7ef384e40.gif
وبعدها نحذف اللير السابق
والان نختار اداة رسم مربع ذو اطراف دائرية
http://up.fox4h.com//uploads/images/fox-e0da0fdf83.gif
ونرسم الان نصف مربع , اي هكذ
http://up.fox4h.com//uploads/images/fox-c8fc8dc7c9.gif
الان في صفحة الليرات , سنعمل تاثيرات قليلة على هذا المربع ,
لذا سنضغط كما في الصورة
http://up.fox4h.com//uploads/images/fox-26d77f850c.gif
ونعمل التاثيرات كالتالي وبالنسبة للون , فكود اللون هو #C4C4C4
http://up.fox4h.com//uploads/images/fox-5ebbea104b.gif
والان نضغط على تاثير Gradient Overlay ونعمل كما بالصورة
وبالنسبة لاكواد اللون , فهي #DFDFDF و #FFFFFF
ونضغط اوكي
http://up.fox4h.com//uploads/images/fox-8fb24b3970.gif
والان اصبح لدينا اطار سنضع فيه تسجيل دخول العضو وها هو شكله
http://up.fox4h.com//uploads/images/fox-a22fca4897.gif
والان سنقطعه عن طريق هذه الاداة
http://up.fox4h.com//uploads/images/fox-0a2d510267.gif
ونقطع التصميم كالتالي
http://up.fox4h.com//uploads/images/fox-78f2652c5f.gif
والان نضغط على
File >>> Save For Web
وبعدها نضغط على Save
ونحدد مسار التسجيل ونسجله
والان نذهب الى مسار الصور الذي سجلناهم
ونختار الصورة الثانية ونفتحها على الفوتوشوب
http://up.fox4h.com//uploads/images/fox-510cb6726e.gif
وبعدها نضغط على Image >>> Canvas Size
ونعمل كما بالصورة
http://up.fox4h.com//uploads/images/fox-08adac93b4.gif
ونضغط اوكي , ونسجل الصورة
وهكذا نكون انهينا 100% امر التصميم
والان نبدا في برنامج الفرونت بيج , لكي نجهز الكود
لذا سنفتح الفرونت بيج
http://up.fox4h.com//uploads/images/fox-bd01022a6e.gif
وندخل صفحة الاكواد , عن طريق الضغط على زر code
http://up.fox4h.com//uploads/images/fox-027e99e787.gif
ونحذف محتوى كل الصفحة التالية
http://up.fox4h.com//uploads/images/fox-3e8381be21.gif
والان نعود الى صفحة التصميم عن طريق الضغط على زر design
http://up.fox4h.com//uploads/images/fox-027e99e787.gif
والان نضيف جدول مكون من 3 خانات
http://up.fox4h.com//uploads/images/fox-2c27a14550.gif
ونضغط على الجدول بالزر الأيمن ونختار كما بالصورة
http://up.fox4h.com//uploads/images/fox-1537599e6e.gif
ونعمل الاعدادات كالتالي , مع العلم ان المربع الاحمر الاخير ,
يدل على الصورة الثانية والتي اعتبرناها نقطة التمدد
http://up.fox4h.com//uploads/images/fox-892c893682.gif
وسيصبح الشكل هكذ
http://up.fox4h.com//uploads/images/fox-26ba9c9174.gif
والان لنضيف الصورتان الاخرتان هكذ
http://up.fox4h.com//uploads/images/fox-9837f8f7ff.gif
ونختارهما ونضيفهم بالجدول
http://up.fox4h.com//uploads/images/fox-187f4a278b.gif
الان عند اضافتهم , سيكون الشكل هكذ
http://up.fox4h.com//uploads/images/fox-0b77007d14.gif
لذا كما بالصورة اعلاه , في مكان السهم , نضغط بالزر اليمين , ونختار الخيار التالي
http://up.fox4h.com//uploads/images/fox-15806786bc.gif
ونعمل الاعدادات كما بالصورة
http://up.fox4h.com//uploads/images/fox-2fd6e3fbbc.gif
وبعدها سيكون الشكل هكذ
http://up.fox4h.com//uploads/images/fox-ccec75febd.gif
وهكذا , نكون انهينا عمل الكود الخاص بالتصميم
والان سنعمل الكود الخاص بتسجيل دخول الاعضاء
لكي يظهر بشكل جميل ومميز
لذا سندخل لوحة تحكم المنتدى
ونبحث عن قالب
Navbar
وبعدها نبحث عن هذا الكود وننسخه ونضعه في الفرونت بيج
وبعدها نحذفه من القالب , ونسجل القالب
<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>
وهذا هو شكله الحالي
http://up.fox4h.com//uploads/images/fox-aa10d1ebac.gif
الان سنعمل تعديلات على الكود بحيث يكون مظهره اجمل اكثر
وسنبدا بالتالي
سنقوم بالبداية بحذف كلمة "اسم العضو" و "كلمة السر" واستبدالهم بصور
بوضح هذا الكود
<if condition="$show['member']">
<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_cookieuser_navbar">
<input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_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>
وهذا هو شكله الحالي
http://up.fox4h.com//uploads/images/fox-e75abc20ba.gif
والان سنطور الكود لكي يصبح بشكل أفقي وجميل
عن طريق وضع هذا الكود بدل السابق
<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="cookieuser" value="1" tabindex="103" id="cb_cookieuser_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>
وسيكون شكله كالتالي
http://up.fox4h.com//uploads/images/fox-0786436577.gif
والان كما ترون فلقد اصبح شكل التصميم افقي ومميز جدا برايي
لهذا لنركبه الان بالتصميم
لذا لنعود الان الى الفرونت بيج , ونفتح الصفحة التي عملنا فيها التصميم
وندخل صفحة الاكواد من هنا
http://up.fox4h.com//uploads/images/fox-027e99e787.gif
وبعدها لو تلاحظ الكود التالي كما بالصورة
http://up.fox4h.com//uploads/images/fox-019618ce13.gif
عليك ان تقوم بحذفه لكي يصبح الكود فقط كالتالي
images/xxx.gif
وسيصبح هكذ
http://up.fox4h.com//uploads/images/fox-63e9d2a015.gif
الان لنعود الى صفحة التصميم
http://up.fox4h.com//uploads/images/fox-027e99e787.gif
ونضغط على الخانة الوسط في الجدول
http://up.fox4h.com//uploads/images/fox-ccec75febd.gif
وندخل على صفحة الاكواد بالضغط على code هن
http://up.fox4h.com//uploads/images/fox-027e99e787.gif
وبعدها كما تلاحظون , نظلل الكود التالي
http://up.fox4h.com//uploads/images/fox-0700503a52.gif
ونضع بدلا منه , الكود الاخير الافقي لتسجيل الدخول
أي هذا الكود
<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="cookieuser" value="1" tabindex="103" id="cb_cookieuser_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% انهينا عمل الكود والتصميم وتحضيره بالفرونت بيج
الان ننسخ كود الصفحة كامل
ونفتح صفحة جديدة , وكما فعلنا بالسابق , نحذف محتوى اكواد تلك الصفحة الجديدة
وبعدها نضيف الكود التالي اول
<div style="position: absolute; width: 400px; height: 100px; z-index: 1; left: 20px; top: 0px" id="layer1">
</div>
وهذا الكود عمله هو كأنه لير لكي يكون فوق الصور
والان نضيف الكود الخاص بالتصميم وتسجيل الدخول داخل الكود هذا (اللير)
لكي يصبح الكود هكذ
<div style="position: absolute; width: 400px; height: 100px; z-index: 1; left: 20px; top: 0px" id="layer1">
<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="cookieuser" value="1" tabindex="103" id="cb_cookieuser_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>
</table>
</div>
وفي النهاية انسخ الكود كاملا
وضعه في اخر قالب الهيدر
وستحصلون على
هذا للزائر
http://up.fox4h.com//uploads/images/fox-53cb14aad3.gif
وهذا للعضو
http://up.fox4h.com//uploads/images/fox-0fbf8b3d42.gif
في اعلى المنتدى
اما بالنسبة للصور
فكل ما عليك عمله هو تحميل هذا الملف
http://up.fox4h.com//view.php?file=cf9d5f0e44
ورفع الصور الي فيه داخل مجلد الصور الرئيسية images
وبهذا اكون انهيت شرحي
ان شاء الله اعجبكم شرحي المفصل والمتواضع
تحياتي
خضر من فلسطين
منقول للفائدة