السلام عليكم
كيف الحال اخواني؟
ان شاء الله بخير
:icon30:
اليوم حبيت اقدم لكم شرح خاص ومميز لكم
وجديد طبعا , حيث انني لم اجد شرح مشابه له بعد
وان شاء الله اكون ما اخطئت
المهم
شرحنا اليوم هو
كيفية تغيير مكان تسجيل الدخول + تصميم اطار خاص بها + عمل مكان مميز لاظهارها
لكي يصبح الشكل هذا
حيث سيكون هكذا هو شكلها الرائع باذن الله
:tears:
هذا للزائر
وهذا للعضو
:icon31:
تابعو معي وسترون
كيف بالضبط
لنبدا
سنبدا كبداية , في تصميم الاطار الذي سنضع فيه تسجيل الدخول للعضو
اولا نفتح الفوتوشوب
وبعدها نفتح صفحة جديدة بحجم
300*40
وسيكون الشكل هكذا اذا
الان في صفحة الليرات , نضغط على اللير مرتين
لكي تظهر لنا هذه الصفحة
ونضغط اوكي , وما عملناه هنا هو اننا جعلنا اللير قابل للتحكم والحذف
لكي نقدر نحذفه , فشكله الان سيكون كالتالي
الان نعمل لير جديد عن طريق الضغط على
Shift + Ctrl + N
وبعدها نحذف اللير السابق
والان نختار اداة رسم مربع ذو اطراف دائرية
ونرسم الان نصف مربع , اي هكذا
الان في صفحة الليرات , سنعمل تاثيرات قليلة على هذا المربع ,
لذا سنضغط كما في الصورة
ونعمل التاثيرات كالتالي وبالنسبة للون , فكود اللون هو #C4C4C4
والان نضغط على تاثير Gradient Overlay ونعمل كما بالصورة
وبالنسبة لاكواد اللون , فهي #DFDFDF و #FFFFFF
ونضغط اوكي
والان اصبح لدينا اطار سنضع فيه تسجيل دخول العضو وها هو شكله
والان سنقطعه عن طريق هذه الاداة
ونقطع التصميم كالتالي
والان نضغط على
File >>> Save For Web
وبعدها نضغط على Save
ونحدد مسار التسجيل ونسجله
والان نذهب الى مسار الصور الذي سجلناهم
ونختار الصورة الثانية ونفتحها على الفوتوشوب
وبعدها نضغط على Image >>> Canvas Size
ونعمل كما بالصورة
ونضغط اوكي , ونسجل الصورة
وهكذا نكون انهينا 100% امر التصميم
:icon30:
والان نبدا في برنامج الفرونت بيج , لكي نجهز الكود
لذا سنفتح الفرونت بيج
وندخل صفحة الاكواد , عن طريق الضغط على زر code
ونحذف محتوى كل الصفحة التالية
والان نعود الى صفحة التصميم عن طريق الضغط على زر design
والان نضيف جدول مكون من 3 خانات
ونضغط على الجدول بالزر الأيمن ونختار كما بالصورة
ونعمل الاعدادات كالتالي , مع العلم ان المربع الاحمر الاخير ,
يدل على الصورة الثانية والتي اعتبرناها نقطة التمدد
وسيصبح الشكل هكذا
والان لنضيف الصورتان الاخرتان هكذا
ونختارهما ونضيفهم بالجدول
الان عند اضافتهم , سيكون الشكل هكذا
لذا كما بالصورة اعلاه , في مكان السهم , نضغط بالزر اليمين , ونختار الخيار التالي
ونعمل الاعدادات كما بالصورة
وبعدها سيكون الشكل هكذا
وهكذا , نكون انهينا عمل الكود الخاص بالتصميم
:icon31:
والان سنعمل الكود الخاص بتسجيل دخول الاعضاء
لكي يظهر بشكل جميل ومميز
:santa_1:
لذا سندخل لوحة تحكم المنتدى
ونبحث عن قالب
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>
وهذا هو شكله الحالي
الان سنعمل تعديلات على الكود بحيث يكون مظهره اجمل اكثر
وسنبدا بالتالي
سنقوم بالبداية بحذف كلمة "اسم العضو" و "كلمة السر" واستبدالهم بصور
بوضح هذا الكود
كود:
<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>
وهذا هو شكله الحالي
والان سنطور الكود لكي يصبح بشكل أفقي وجميل
عن طريق وضع هذا الكود بدل السابق
كود:
<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>
وسيكون شكله كالتالي
والان كما ترون فلقد اصبح شكل التصميم افقي ومميز جدا برايي
لهذا لنركبه الان بالتصميم
لذا لنعود الان الى الفرونت بيج , ونفتح الصفحة التي عملنا فيها التصميم
وندخل صفحة الاكواد من هنا
وبعدها لو تلاحظ الكود التالي كما بالصورة
عليك ان تقوم بحذفه لكي يصبح الكود فقط كالتالي
images/xxx.gif
وسيصبح هكذا
الان لنعود الى صفحة التصميم
ونضغط على الخانة الوسط في الجدول
وندخل على صفحة الاكواد بالضغط على code هنا
وبعدها كما تلاحظون , نظلل الكود التالي
ونضع بدلا منه , الكود الاخير الافقي لتسجيل الدخول
أي هذا الكود
كود:
<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 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>
وفي النهاية انسخ الكود كاملا
وضعه في اخر قالب الهيدر
وستحصلون على
هذا للزائر
وهذا للعضو
في اعلى المنتدى
:icon30::bigsmile:
:icon31:
اما بالنسبة للصور
فكل ما عليك عمله هو تحميل هذا الملف
:bleh:
ورفع الصور الي فيه داخل مجلد الصور الرئيسية images
وبهذا اكون انهيت شرحي
:icon30:
ان شاء الله اعجبكم شرحي المفصل والمتواضع
وهذا الشرح اهداء لأعز أصدقائي
[فقط الأعضاء المسجلين والمفعلين يمكنهم رؤية الوصلات . إضغط هنا للتسجيل]:blush-ani
تحياتي
خضر من فلسطين
:sly:
:clap:
منقول
شرح تغيير مكان تسجيل الدخول وعمله بشكل مميز جداا بالتفصيل
