بسم الله الرحمن الرحيم
سندخل في الشرح مباشره بدون مقدمات
سنقوم بتعديل الاستايل ليصبح بهذا الشكل
وسنحتاج للتعديل على أربعة قوالب فقط
FORUMHOME
forumhome_forumbit_level1_nopost
forumhome_forumbit_level2_post
forumhome_lastpostby
هذه هي القوالب التي سوف نقوم بالتعديل عليها
لابد أن نستعمل استايل جديد لم يسبق وأن قمنا بالتعديل عليه ثم نسمي ونبدأ عملنا وإذا لم يوجد لديك استايل أصلي غير معدل فاختر أحد استايلاتك ثم اعمل تراجع لكل القوالب لكي نصمم من الصفر
أولاً نبدأ بفصل الأقسام عن بعضها ويتم ذلك باتباع الآتي
افتح قالب FORUMHOME
ثم ابحث فيه عن هذا الكود
رمز PHP:
<!-- main -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<if condition="$show['guest']">
<!-- guest welcome message -->
<tr>
<td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>
</tr>
<tr>
<td class="alt1" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>">
<phrase 1="faq.php?$session[sessionurl]" 2="register.php?$session[sessionurl]">$vbphrase[first_visit_message]</phrase>
</td>
</tr>
<!-- / guest welcome message -->
</if>
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead" width="175">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
</thead>
$forumbits
<tbody>
<tr>
<td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
<a href="forumdisplay.php?$session[sessionurl]do=markread">$vbphrase[mark_forums_read]</a>
<a href="showgroups.php?$session[sessionurl]">$vbphrase[view_forum_leaders]</a>
</strong></div></td>
</tr>
</tbody>
</table>
<!-- /main -->
وإذا لم يظهر لك كنتيجة بحث قارن الكود مقارنه شوف بداية الكود ونهايته
ثم استبدله بهذا المحتوى
رمز PHP:
<!-- guest welcome message -->
<if condition="$show['guest']">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr>
<td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>
</tr>
<tr>
<td class="alt1" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>">
<phrase 1="faq.php?$session[sessionurl]" 2="register.php?$session[sessionurl]">$vbphrase[first_visit_message]</phrase>
</td>
</tr>
</thead>
</table>
</if>
<!-- / guest welcome message -->
<!-- main -->
$forumbits
<!-- /main -->
وفي نفس القالب
ابحث عن
رمز PHP:
</table>
<br />
<!-- end what's going on box -->
واستبدله بـ
رمز PHP:
<tbody>
<tr>
<td class="thead" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
<a href="forumdisplay.php?$session[sessionurl]do=markread">$vbphrase[mark_forums_read]</a>
<a href="showgroups.php?$session[sessionurl]">$vbphrase[view_forum_leaders]</a>
</strong></div></td>
</tr>
</tbody>
</table>
<br />
<!-- end what's going on box -->
ثم احفظ القالب
الخطوة الثانية افتح قالب forumhome_forumbit_level1_nopost
واستبدل كامل محتواه بهذا الكود مع ملاحظة تغيير صور الإطار حسب تصميمك
رمز PHP:
<table border="0" width="100%" id="table1" cellspacing="0" cellpadding="0">
<tr>
<td width="13">
<img border="0" src="vb_asayl/vb_as/vb_asayl_16.gif" width="13" height="50"></td>
<td>
<table border="0" width="100%" id="table2" cellspacing="0" cellpadding="0">
<tr>
<td width="23">
<img border="0" src="vb_asayl/vb_as/vb_asayl_15.gif" width="23" height="50"></td>
<td width="106">
<img border="0" src="vb_asayl/vb_as/vbl_asayl_11.gif" width="106" height="50"></td>
<td background="vb_asayl/vb_as/vbl_asayl_09.gif" align="center">
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a>
</td>
<td width="110">
<img border="0" src="vb_asayl/vb_as/vb_asayl_11.gif" width="110" height="50"></td>
<td width="25">
<img border="0" src="vb_asayl/vb_as/vb_asayl_08.gif" width="25" height="50"></td>
</tr>
</table>
</td>
<td width="13">
<img border="0" src="vb_asayl/vb_as/vb_asayl_07.gif" width="13" height="50"></td>
</tr>
<tr>
<td width="13" background="vb_asayl/vb_as/vb_asayl_26.gif"> </td>
<td background="vb_asayl/vasayl/vb_asayl_19.gif">
<****** type="text/java******">
<!--
function log_out()
{
ht = ********.getElementsByTagName("html");
ht[0].style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
if (confirm('$vbphrase[sure_you_want_to_log_out]'))
{
return true;
}
else
{
ht[0].style.filter = "";
return false;
}
}
//-->
</******>
<div align="center">
<table class="tborder" cellpadding="0" cellspacing="0" border="0" width="100%">
<if condition="$childforumbits">
<tbody border="0" width="100%" id="table1" cellspacing="0" cellpadding="0">
<tr align="center">
<td></td>
<if condition="$vboptions['showmoderatorcolumn']">
</if>
</tr>
$childforumbits
<tr><td style="" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>"><img src="$vboptions[cleargifurl]" alt="" width="1" height="12" /></td></tr>
</tbody>
</if>
</table>
</div>
</td>
<td width="13" background="vb_asayl/vb_as/vb_asayl_23.gif"> </td>
</tr>
<tr>
<td width="13">
<img border="0" src="vb_asayl/vb_as/vb_asayl_37.gif" width="13" height="39"></td>
<td>
<table border="0" width="100%" id="table3" cellspacing="0" cellpadding="0">
<tr>
<td background="vb_asayl/vb_as/vb_asayl_31.gif">
<p align="right">
<img border="0" src="vb_asayl/vb_as/vb_asayl_36.gif" width="23" height="39"></td>
<td width="207">
<img border="0" src="vb_asayl/vb_as/vb_asayl_33.gif" width="207" height="39"></td>
<td align="left" background="vb_asayl/vb_as/vb_asayl_31.gif">
<img border="0" src="vb_asayl/vb_as/vb_asayl_30.gif" width="25" height="39"></td>
</tr>
</table>
</td>
<td width="13">
<img border="0" src="vb_asayl/vb_as/vb_asayl_29.gif" width="13" height="39"></td>
</tr>
</table>
<div[color=#FA0309] style="padding:0px 0px 20px 0px[/color];"></div>
ولاحظ الكود باللون الأحمر في نهاية القالب وستجد فيه رقم 20 وهذا الرقم هو المسافه بين الأقسام تستطيع زيادتها وتنقيصها حسب ذوقك
وبكذا أخي الفاضل نكون قد انتهينا من فصل الأقسام نها ئياً
ننتقل إلى تعديل طريقة عرض الأقسام في الرئيسية وذلك بتعديل قالب forumhome_forumbit_level2_post
وهذا القالب عدله على مزاجك والعب فيه على كيفك ولكن انتبه للشروط عند تركيب الأكواد والمتغيرات
كيف يتم تعديله هذا القالب ليس له صوره محدده بل حسب تصميمك أنت وتقطيعك ولكني سأرفق لكم قالب جاهز للمقارنه والإستفاده منه
رمز PHP:
<tr>
<td background="vb_asayl/vasayl/vb_asayl_19.gif">
<div align="center">
<table border="0" width="600" id="table1" cellspacing="0" cellpadding="0">
<tr>
<td>
<img border="0" src="vb_asayl/vasayl/vb_asayl_28.gif" width="223" height="3"></td>
<td>
<img border="0" src="vb_asayl/vasayl/vb_asayl_27.gif" width="211" height="3"></td>
<td>
<img border="0" src="vb_asayl/vasayl/vb3_asayl_28.gif" width="93" height="3"></td>
<td>
<img border="0" src="vb_asayl/vasayl/vb3_asayl_26.gif" width="73" height="3"></td>
</tr>
<tr>
<td background="vb_asayl/vasayl/vb_asayl_33.gif" width="223" height="76">
<table border="0" width="223" id="table2" cellspacing="5" cellpadding="0" height="76">
<tr>
<td width="5"></td>
<td align="center"><table border="0" width="100%" id="table5" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a> </td>
</tr>
<tr>
<td align="center"><if condition="$show['forumde******ion']"><div class="smallfont">$forum[de******ion]</div></if> </td>
</tr>
</table>
</td>
</tr>
</table></td>
<td background="vb_asayl/vasayl/vb3_asayl_33.gif" width="211">
<table border="0" width="100%" id="table3" cellspacing="0" cellpadding="0">
<tr>
<td height="24"> </td>
</tr>
<tr>
<td>
<table border="0" width="100%" id="table4" cellspacing="0" cellpadding="0">
<tr>
<td align="center" height="27">
<table border="0" width="100%" id="table10" cellspacing="0" cellpadding="0">
<tr>
<td width="30"> </td>
<td align="center">$forum[threadcount]
</td>
</tr>
</table>
</td>
<td width="53%" align="center">
<table border="0" width="100%" id="table11" cellspacing="0" cellpadding="0">
<tr>
<td align="center">$forum[replycount] </td>
<td width="35"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" width="100%" id="table6" cellspacing="0" cellpadding="0">
<tr>
<td width="70"> </td>
<td align="center"><div<if condition="is_browser('ie', 6)"> style="float:$stylevar[left]"</if>>
<phrase 1="member.php?$session[sessionurl]find=lastposter&f=$lastpostinfo[forumid]" 2="$lastpostinfo[lastposter]">$vbphrase[by_x]</phrase> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td background="vb_asayl/vasayl/vb3_asayl_32.gif" width="93" valign="top">
<table border="0" width="100%" id="table7" cellspacing="0" cellpadding="0">
<tr>
<td align="center" height="11"></td>
</tr>
<tr>
<td align="center" height="30"><if condition="!$show['detailedtime']"><span class="time">$lastpostinfo[lastposttime]</span></if> </td>
</tr>
<tr>
<td align="center" height="30">$lastpostinfo[lastpostdate] </td>
</tr>
</table>
</td>
<td width="73" rowspan="2">
<table border="0" width="100%" id="table8" cellspacing="0" cellpadding="0">
<tr>
<td>
<img border="0" src="vb_asayl/vasayl/vb_asayl_30.gif" width="73" height="41"></td>
</tr>
<tr>
<td background="vb_asayl/vasayl/vb_asayl_37.gif" width="73" height="64" align="center">
<p align="center"><p><img src="$stylevar[imgdir_statusicon]/forum_$forum[statusicon].gif" alt="" border="0" /> <if condition="$show['subforums']">
</p>
<div class="smallfont" style="margin-top:$stylevar[cellpadding]px"></div></if></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table border="0" width="100%" id="table9" cellspacing="0" cellpadding="0">
<tr>
<td background="vb_asayl/vasayl/vb_asayl_46.gif" width="93" height="29" valign="top" align="right">
<table border="0" width="87%" id="table2" cellspacing="0" cellpadding="0" height="15">
<tr>
<td height="15"><if condition="$vboptions['showmoderatorcolumn']">
<td id="showmoderat_$forum[forumid]" valign="top" align="left" height="15" width="60%"><****** type="text/java******"> vbmenu_register("showmoderat_$forum[forumid]"); </******></td>
<!-- show moderattors menu -->
<div class="vbmenu_popup" id="showmoderat_$forum[forumid]_menu" style="display:none">
<div class="tcat" style="padding:$stylevar[cellpadding]px; border:1px inset; overflow:auto">$vbphrase[moderator]</div>
<div class="alt2Active" style="border:1px inset; overflow:auto; width:100px">
$forum[moderators]
</div>
</div></if></td>
</tr>
</table>
</td>
<td width="86">
<img border="0" src="vb_asayl/vasayl/vb_asayl_45.gif" width="86" height="29"></td>
<td background="vb_asayl/vasayl/vb_asayl_44.gif" width="255" valign="top">
<table border="0" width="100%" id="table12" cellspacing="0" cellpadding="0">
<tr>
<td height="4"></td>
</tr>
<tr>
<td valign="top">$forum[lastpostinfo]</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<img border="0" src="vb_asayl/vasayl/vb_asayl_43.gif" width="93" height="29"></td>
</tr>
</table>
</div>
</td>
</tr>
كيف تقوم أنت بتعديل هذا القالب ... ؟
طبعاً هذا القالب راح يتغير كلياً ولاحاجه لتعديله بل تصميمه من الصفر على الفرونت بيج
وبعد أن تنتهي من تصميمه تنسخه ثم تقوم بفتح صفحه جديده في الفرونت بيج ثم تنشئ جدول من خليه واحده فقط يعني عدد الصفوف 1 وعدد الأعمده 1 ويظهر لك في خانة التعليمات البرمجيه هذا الكود
<table border="1" width="100%" id="table1">
<tr>
<td>
الصق القالب هنا </td>
</tr>
</table>
ثم الق قالبنا مكان الكلمه الصق القالب هنا وقم بحذف وسم الجدول الملون باللون البنفسجي ثم قم بتركيب القالب مكانه مانحتاجه هو هذا
<tr>
<td>
الصق القالب هنا </td>
</tr>
وسنقوم بحذف هذا
<table border="1" width="100%" id="table1">
</table>
ملاحظه : القالب الذي أرفقته لكم لايحتاج لتعديل وهو جاهز فقط ركبه مكانه
ننتقل الآن لقالب forumhome_lastpostby
هذا القالب هو قالب عرض المشاركة الآخيرة في القسم لكنه في الأصل يحتوي على مجموعة متغيرات اختصرتها على أيقونة المشاركة والمشاركة فقط
وهذا هو الكود افتح القالب forumhome_lastpostby
ثم استبدل مابداخله بهذا المحتوى
رمز PHP:
<if condition="$show['lastpostinfo']">
<div class="smallfont" align="$stylevar[left]">
<div style="clear:both">
<if condition="$show['icon']"><img class="inlineimg" src="$icon[iconpath]" alt="$icon[title]" border="0" /></if>
<a href="showthread.php?$session[sessionurl]goto=newpost&t=$lastpostinfo[lastthreadid]" title="<phrase 1="$lastpostinfo[lastthread]">$vbphrase[go_first_unread_in_thread_x]</phrase>"><strong>$lastpostinfo[trimthread]</strong></a>
</div>
</div>
<else />
</if>
وبكذا نكون قد انهينا درس اليوم وستجدون في المرفقات التالي
1 - مجلد الصور vb_asayl ارفعه لمجلد منتداك الرئيسي
vb
2 - القوالب المعدله جاهزه للعمل ركبها فقط ولاحظ النتائج
3 - القوالب الأصليه قارنها في الفرونت بيج
4 - الأكواد والمتغيرات لمن يريد التصميم من الصفر
وفي الختام الدرس لم يرتب بشكل جيد وذلك للعجله في تنزيله
وفلو كان هنا شيئ غامض أو غير واضح اسأل وانشاء الله تلقى الجواب
نتمنى لكم طيب الإقامه بين إخوانكم أعضاء أصايل التطويريه
نلتقي في درس جديد بإذن الله
و الدرس مشكور علية الاخ alaani وفقة الله
والسلام عليكم ورحمة الله وبركاته
22 - 10 - 2006, 16:32
العرض العادي
