شرح تحويل استايل منتدى vb الى استايل خاص ب pbb [الدرس الاول] تركيب الهيدر والفوتير

shqawe

07-07-2010 08:37 مساءً

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

بسم الله الرحمن الرحيم

تركيب الهيدر والفوتير

السلام عليكم ورحمة الله وبركاته إخواني بإذن الله سوف ابدأ بشرح لكيفية تحويل استايل منتدى VB إلى استايل لمنتدى PBB سائل المولى عز وجل أن يوفقني لإيصال المعلومة بأبسط صورة لكي يستفيد الجميع من هذا الدرس والدروس القادمة.

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

بسم الله نبدأ الشرح:

في البداية سوف نقوم بإضافة استايل جديد والطريقة كالتالي:

1- نقوم بالتوجه إلى مجلد المنتدى الرئيسي pbb ومن ثم إلى look ومن ثم إلى styles ومن ثم إلى forum ومن ثم سوف نجد مجلد اسمه main نقوم بنسخه وتغيير اسمه كما فعلت لاحظ الصورة:

2 - الان نقوم بنسخ مجلد الإستايل الذي نود تحويله إلى استايل Pbb ولصقه داخل مجلد images الذي تم تغييره من main إلى shqawe .

3 - نقوم بالتوجه إلى لوحة التحكم ومن ثم إلى إضافة استايل جديد :

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

2-1 / هنا نقوم بوضع اسم للأستايل اي اسم تريد وانا هنا وضعت اسم shqawe كاسم للأستايل.

2-2 / من القائمة المنسدلة تقوم باختيار مجلد الاستايل الذي تم اختياره في الخطوة الاولى وهنا اسم الاستايل كما هو واضح ايضا ً shqawe .

4- بقي الآن خطوة أخيرة وهي تحديد مجلد الصور ومجلد الإستايل ومجلد القوالب ومجلد صنف القوالب :

نقوم بالذهاب إلى خيار الإستايلات والقوالب ومن ثم نختار التحكم بالاستايلات:

عندها سوف تظهر لنا هذه الصفحة :

لاحظوا معي أنني قمت بإحاطة كلمة main بمربع احمر لكي تكون ظاهره لكم الآن لابد من تغيير الكلمة إلى اسم الصحيح لمجلد الإستايل والاسم الذي لدينا هو shqawe .

الآن تم تجهيز الإستايل من لوحة التحكم وبقي البدء في تنسيق أكواد الإستايل

الآن سوف نقوم باستخراج كود الهيدر وأنا أفضل أن يتم توزيع الهيدر من قبلكم عن طريق برنامج SharePoint أو Front Page أو أي برنامج آخر بعد ذلك تقوم بالتطبيق وهذا مافعلته.

دعونا نلقي نظره على الكود النهائي للهيدر الخاص بتصميمنا.

CODE

<table style="width: 100%" cellpadding="0" cellspacing="0" dir="rtl" class="style1">
<tr>
<td>
<table style="width: 100%" cellpadding="0" cellspacing="0" dir="rtl" class="style1">
<tr>
<td style="background-image: url('file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_up_body_center.gif')">
<table style="width: 100%" cellpadding="0" cellspacing="0" dir="rtl" class="style1">
<tr>
<td>
<img src="file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_up_rigth.gif" width="73" height="186" /></td>
<td style="width: 100%">
<table style="width: 100%" cellpadding="0" cellspacing="0" dir="rtl" class="style1">
<tr>
<td><img src="file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_up_rigth_center.gif" width="169" height="186" style="border-style: solid; border-width: 0px" /></td>
<td style="text-align: center"><img src="file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_up_center.gif" width="274" height="186" style="text-align: center; border-style: solid; border-width: 0px" /></td>
<td><img src="file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_up_left_center.gif" width="170" height="186" style="float: left; border-style: solid; border-width: 0px" /></td>
</tr>
</table>
</td>
<td>
<img src="file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_up_left.gif" width="73" height="186" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="width: 100%" cellpadding="0" cellspacing="0" dir="rtl" class="style1">
<tr>
<td style="background-image: url('file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_rigth.gif')">
<img src="file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_rigth.gif" width="73" height="19" /></td>
<td style="width: 100%">

</pre>

[p]وهذا الكود النهائي للفوتير الخاص بتصميمنا.

CODE

</td>
<td style="background-image: url('file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_left.gif')">
<img src="file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_left.gif" width="73" height="19" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-image: url('file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_do_body_center.gif')">
<table style="width: 100%" cellpadding="0" cellspacing="0" dir="rtl" class="style1">
<tr>
<td>
<img src="file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_do_rigth.gif" width="73" height="95" /></td>
<td style="width: 100%">
<table style="width: 100%" cellpadding="0" cellspacing="0" dir="rtl" class="style1">
<tr>
<td><img src="file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_do_rigth_center.gif" width="224" height="95" style="float: right" /></td>
<td style="text-align: center"><img src="file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_do_center.gif" width="165" height="95" /></td>
<td><img src="file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_do_left_center.gif" width="224" height="95" style="float: left" /></td>
</tr>
</table>
</td>
<td>
<img src="file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_do_left.gif" width="73" height="95" /></td>
</tr>
</table>
</td>
</tr>
</table>

</pre>

[p]الآن سوف ننتقل إلى طريقة التركيب الطريقة سهله جداَ ولا تحتاج إلى تعقيد .

نقوم بالتوجه إلى لوحة التحكم الخاصة بمنتدى PBB ومن ثم إلى الإستايلات والقوالب ونختار التحكم بالقوالب ومن ثم نقوم باختيار قالب header.tpl وهذي هي محتويات قالب الهيدر:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html dir="{$_CONF['info_row']['content_dir']}" xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$_CONF['info_row']['content_language']}" lang="{$_CONF['info_row']['content_language']}">
<head>
<meta http-**="Content-Type" content="text/html; charset={$_CONF['info_row']['charset']}" />
<meta http-**="Content-Language" content="{$_CONF['info_row']['content_language']}" />
<meta name="keywords" content="{$_CONF['info_row']['keywords']}" />
<meta name="description" content="{$_CONF['info_row']['description']}" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="{$style_path}" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="{$lang['rss_subject']}" href="index.php?page=rss&subject=1" />
<style type="text/css">
.style1 {
border: 0px solid #c0c0c0;
}
</style>
{if {$SECTION_RSS}}
<link rel="alternate" type="application/rss+xml" title="{$lang['rss_section']}" href="index.php?page=rss&section=1&id={$SECTION_ID}" />
{/if}
{template}pbboard_code_js{/template}
<script type="text/javascript" src="includes/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="includes/js/lightbox.js"></script>
{if {$JQUERY}}
<script type="text/javascript" src="includes/js/jquery.js">
</script>
{/if}
</head>
<body>
<!--pbb.logo.start-->
<table style="width: 100%" cellpadding="0" cellspacing="0" dir="rtl" class="style1">
<tr>
<td>
<img src="{$image_path}/logo.jpg" width="566" height="68" /></td>
</tr>
</table>
<!--pbb.logo.end-->
{template}main_bar{/template}

</pre>

[p]الآن سوف نلاحظ وجود وسمين في هذا الكود وهي ما تحدد لنا كود الهيدر من أين يبدأ وأين ينتهي لنرى الأكواد:

CODE

&lt;!--pbb.logo.start--&gt;

&lt;!--pbb.logo.end--&gt;

</pre>

[p]هذه هي الكودين وبينها يتم وضع كود الهيدر تبعنا ليصبح بالشكل التالي:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html dir="{$_CONF['info_row']['content_dir']}" xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$_CONF['info_row']['content_language']}" lang="{$_CONF['info_row']['content_language']}">
<head>
<meta http-**="Content-Type" content="text/html; charset={$_CONF['info_row']['charset']}" />
<meta http-**="Content-Language" content="{$_CONF['info_row']['content_language']}" />
<meta name="keywords" content="{$_CONF['info_row']['keywords']}" />
<meta name="description" content="{$_CONF['info_row']['description']}" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="{$style_path}" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="{$lang['rss_subject']}" href="index.php?page=rss&subject=1" />
<style type="text/css">
.style1 {
border: 0px solid #c0c0c0;
}
</style>
{if {$SECTION_RSS}}
<link rel="alternate" type="application/rss+xml" title="{$lang['rss_section']}" href="index.php?page=rss&section=1&id={$SECTION_ID}" />
{/if}
{template}pbboard_code_js{/template}
<script type="text/javascript" src="includes/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="includes/js/lightbox.js"></script>
{if {$JQUERY}}
<script type="text/javascript" src="includes/js/jquery.js">
</script>
{/if}
</head>
<body>

<!--pbb.logo.start-->

<table style="width: 100%" cellpadding="0" cellspacing="0" dir="rtl" class="style1">
<tr>
<td>
<table style="width: 100%" cellpadding="0" cellspacing="0" dir="rtl" class="style1">
<tr>
<td style="background-image: url('file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_up_body_center.gif')">
<table style="width: 100%" cellpadding="0" cellspacing="0" dir="rtl" class="style1">
<tr>
<td>
<img src="file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_up_rigth.gif" width="73" height="186" /></td>
<td style="width: 100%">
<table style="width: 100%" cellpadding="0" cellspacing="0" dir="rtl" class="style1">
<tr>
<td><img src="file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_up_rigth_center.gif" width="169" height="186" style="border-style: solid; border-width: 0px" /></td>
<td style="text-align: center"><img src="file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_up_center.gif" width="274" height="186" style="text-align: center; border-style: solid; border-width: 0px" /></td>
<td><img src="file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_up_left_center.gif" width="170" height="186" style="float: left; border-style: solid; border-width: 0px" /></td>
</tr>
</table>
</td>
<td>
<img src="file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_up_left.gif" width="73" height="186" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="width: 100%" cellpadding="0" cellspacing="0" dir="rtl" class="style1">
<tr>
<td style="background-image: url('file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_rigth.gif')">
<img src="file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_rigth.gif" width="73" height="19" /></td>
<td style="width: 100%">

<!--pbb.logo.end-->

{template}main_bar{/template}

</pre>

[p]الآن تم تعديل الهيدر ولكن بقيت نقطة وحيدة ألا وهي امتداد الصور لو تلاحظون معي امتداد الصور هو :

CODE

file:///C:/AppServ/www/pbb/look/styles/forum/shqawe/images/Hope/wall_forum_rigth.gif

</pre>

[p]هذا لاني قمت بتركيب الصور من جديد ولكن لو كنت مآخذ الهيدر من استايل VB فسوف يكون الامتداد :

CODE

shqawe/images/Hope/wall_forum_rigth.gif

</pre>

[p]حيث shqawe هو اسم الإستايل .

الآن نقوم بحذف كل الامتداد ونبقي فقط اسم الصورة ونضيف قبله هذا المتغير :

CODE

{$image_path}

</pre>

[p]ليصبح الناتج النهائي للامتداد هو :

CODE

{$image_path}/wall_forum_rigth.gif

</pre>

[p]لنرى الآن الكود النهائي للهيدر حيث أصبح جاهزا ً لنقله إلى لوحة التحكم ولاحظ معي أنني قمت بتلوين امتداد الصور باللون الأصفر لكي تكون واضحة لكم:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html dir="{$_CONF['info_row']['content_dir']}" xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$_CONF['info_row']['content_language']}" lang="{$_CONF['info_row']['content_language']}">
<head>
<meta http-**="Content-Type" content="text/html; charset={$_CONF['info_row']['charset']}" />
<meta http-**="Content-Language" content="{$_CONF['info_row']['content_language']}" />
<meta name="keywords" content="{$_CONF['info_row']['keywords']}" />
<meta name="description" content="{$_CONF['info_row']['description']}" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="{$style_path}" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="{$lang['rss_subject']}" href="index.php?page=rss&subject=1" />
<style type="text/css">
.style1 {
border: 0px solid #c0c0c0;
}
</style>
{if {$SECTION_RSS}}
<link rel="alternate" type="application/rss+xml" title="{$lang['rss_section']}" href="index.php?page=rss&section=1&id={$SECTION_ID}" />
{/if}
{template}pbboard_code_js{/template}
<script type="text/javascript" src="includes/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="includes/js/lightbox.js"></script>
{if {$JQUERY}}
<script type="text/javascript" src="includes/js/jquery.js">
</script>
{/if}
</head>
<body>

<!--pbb.logo.start-->

<table style="width: 100%" cellpadding="0" cellspacing="0" dir="rtl" class="style1">
<tr>
<td>
<table style="width: 100%" cellpadding="0" cellspacing="0" dir="rtl" class="style1">
<tr>
<td style="background-image: url('{$image_path}/wall_forum_up_body_center.gif')">
<table style="width: 100%" cellpadding="0" cellspacing="0" dir="rtl" class="style1">
<tr>
<td>
<img src="{$image_path}/wall_forum_up_rigth.gif" width="73" height="186" /></td>
<td style="width: 100%">
<table style="width: 100%" cellpadding="0" cellspacing="0" dir="rtl" class="style1">
<tr>
<td><img src="{$image_path}/wall_forum_up_rigth_center.gif" width="169" height="186" style="border-style: solid; border-width: 0px" /></td>
<td style="text-align: center"><img src="{$image_path}/wall_forum_up_center.gif" width="274" height="186" style="text-align: center; border-style: solid; border-width: 0px" /></td>
<td><img src="{$image_path}/wall_forum_up_left_center.gif" width="170" height="186" style="float: left; border-style: solid; border-width: 0px" /></td>
</tr>
</table>
</td>
<td>
<img src="{$image_path}/wall_forum_up_left.gif" width="73" height="186" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="width: 100%" cellpadding="0" cellspacing="0" dir="rtl" class="style1">
<tr>
<td style="background-image: url('{$image_path}/wall_forum_rigth.gif')">
<img src="{$image_path}/wall_forum_rigth.gif" width="73" height="19" /></td>
<td style="width: 100%">

<!--pbb.logo.end-->

{template}main_bar{/template}

</pre>

[p]بهذا نكون قد انتهينا من الهيدر ويبقى لنا الفوتر ولن أخوض كثيرا ً في الفوتير بمعنى اصح لن اشرح بالتفصيل ولكن سوف اشرح لكم أين نضع الكود الخاص بنا.

نذهب إلى لوحة التحكم ومن ثم إلى الإستايلات والقوالب ومن م نختار قالب footer.tpl وهذا هو الكود الخاص بهذا القالب:

CODE

 <div class="time" align="center">
{$lang['timer']}
{$timer}
</div>
<br />
<div align="center">
<table border="0" cellspacing="1" width="98%" class="info_bar" cellpadding="0" style="border-collapse: collapse">
<tr>
{if {$_CONF['info_row']['content_dir']} == 'rtl'}
<td class="row1" align="right" width="32%">
{else}
<td class="row1" align="left" width="32%">
{/if}
{if {$StylesNo} > 1}
<select OnChange="window.**='index.php?page=change_style&change=1&id=' + this.value" size="1" name="style">
{Des::while}{StyleList}<option value="{$StyleList['id']}" {if {$StyleList['id']} == {$_CONF['rows']['style']['id']}}selected="selected" style="background : #EEEEEE"{/if}>{$StyleList['style_title']}</option>
{/Des::while}
</select>
{/if}
{if {$LangsNo} > 1}
{if {$_CONF['member_permission']}}
<select OnChange="window.**='index.php?page=change_lang&change=1&id=' + this.value" size="1" name="lang">
{Des::while}{LangList}<option value="{$LangList['id']}" {if {$LangList['id']} == {$member['lang']}}selected="selected" style="background : #EEEEEE"{/if}>{$LangList['lang_title']}</option>
{/Des::while}
</select>
{else}
<select OnChange="window.**='index.php?page=change_lang&change=1&id=' + this.value" size="1" name="lang">
{Des::while}{LangList}<option value="{$LangList['id']}" {if {$LangList['id']} == {$VisitorLang}}selected="selected" style="background : #EEEEEE"{/if}>{$LangList['lang_title']}</option>
{/Des::while}
</select>
{/if}
{/if}
</td>
{if {$_CONF['info_row']['content_dir']} == 'rtl'}
<td class="row1" align="left" width="68%">
{else}
<td class="row1" align="right" width="68%">
{/if}
{if {$_CONF['info_row']['rewriterule']} == '1'}
<a href="archive.html">{$lang['archive']}</a> -
{else}
<a href="index.php?page=archive">{$lang['archive']}</a> -
{/if}
{if {$_CONF['info_row']['sitemap']} == '1'}
{if {$_CONF['info_row']['rewriterule']} == '1'}
{$lang['forummap']}
(<a href="sitemap.htm">Html</a> -
<a href="sitemap.xml">Xml</a>) -
{else}
{$lang['forummap']}
(<a href="index.php?page=sitemap&sitemaps=1">Html</a> -
<a href="index.php?page=sitemap&subject=1">Xml</a>) -
{/if}
{/if}
<a href="index.php?page=latest&today=1">{$lang['subject_today']}</a>
(<span class="spical">{$subject_today_nm}</span>) -
<a href="index.php?page=send&sendmessage=1">{$lang['send_message']}</a> -
<a href="index.php?page=team&show=1">{$lang['team']}</a> -
<a onclick="self.scrollTo(0, 0); return false;" href="#top">{$lang['UP']}</a>
{if {$_CONF['rows']['group_info']['admincp_allow']}} -
<a href="admin.php">{$lang['cp_admin']}</a>
{/if}    <a href="index.php?page=rss&subject=1">
<img border="0" src="{$image_path}/rss.gif" width="28" height="16"
title="{$lang['rss_subject']}"></a>
</td>
</tr>
</table>
</div>
<!-- -->
<br />
<div class="footer">{$lang['copyright']}</div>
</body>
</html>

</pre>

[p]

الآن ما يهمنا في هذا القالب هذا الكود :

CODE

div class="footer">{$lang['copyright']}</div>

</pre>

[p]نقوم بحذف هذا الكود :

CODE

div class="footer">

</pre>

[p]مع الإبقاء على متغير الحقوق فهذا اقل ما يمكننا عمله لمن قاموا ببرمجة هذا البرنامج الأكثر من رائع:

الآن نقوم بحذف هذا الكود أيضا ً :

CODE

</div>

</pre>

[p]

والآن بالضبط تحت متغير الحقوق نقوم بإضافة كود الفوتير ليصبح الناتج النهائي كالتالي:

CODE

 <div class="time" align="center">
{$lang['timer']} {$timer}
</div>
<br />
<div align="center">
<table border="0" cellspacing="1" width="98%" class="info_bar" cellpadding="0" style="border-collapse: collapse">
<tr>
{if {$_CONF['info_row']['content_dir']} == 'rtl'}
<td class="row1" align="right" width="32%">
{else}
<td class="row1" align="left" width="32%">
{/if} {if {$StylesNo} > 1}
<select OnChange="window.**='index.php?page=change_style&change=1&id=' + this.value" size="1" name="style">
{Des::while}{StyleList}<option value="{$StyleList['id']}" {if {$StyleList['id']} == {$_CONF['rows']['style']['id']}}selected="selected" style="background : #EEEEEE"{/if}>
{$StyleList['style_title']}</option>
{/Des::while}
</select>
{/if} {if {$LangsNo} > 1} {if {$_CONF['member_permission']}}
<select OnChange="window.**='index.php?page=change_lang&change=1&id=' + this.value" size="1" name="lang">
{Des::while}{LangList}<option value="{$LangList['id']}" {if {$LangList['id']} == {$member['lang']}}selected="selected" style="background : #EEEEEE"{/if}>
{$LangList['lang_title']}</option>
{/Des::while}
</select>
{else}
<select OnChange="window.**='index.php?page=change_lang&change=1&id=' + this.value" size="1" name="lang">
{Des::while}{LangList}<option value="{$LangList['id']}" {if {$LangList['id']} == {$VisitorLang}}selected="selected" style="background : #EEEEEE"{/if}>
{$LangList['lang_title']}</option>
{/Des::while}
</select>
{/if} {/if}
</td>
{if {$_CONF['info_row']['content_dir']} == 'rtl'}
<td class="row1" align="left" width="68%">
{else}
<td class="row1" align="right" width="68%">
{/if} {if {$_CONF['info_row']['rewriterule']} == '1'}
<a href="archive.html">{$lang['archive']}</a> - {else}
<a href="index.php?page=archive">{$lang['archive']}</a> - {/if} 
{if {$_CONF['info_row']['sitemap']} == '1'} {if {$_CONF['info_row']['rewriterule']} 
== '1'} {$lang['forummap']} (<a href="sitemap.htm">Html</a> -
<a href="sitemap.xml">Xml</a>) - {else} {$lang['forummap']} (<a href="index.php?page=sitemap&sitemaps=1">Html</a> 
-
<a href="index.php?page=sitemap&subject=1">Xml</a>) - {/if} 
{/if}
<a href="index.php?page=latest&today=1">{$lang['subject_today']}</a>
(<span class="spical">{$subject_today_nm}</span>) -
<a href="index.php?page=send&sendmessage=1">{$lang['send_message']}</a> 
-
<a href="index.php?page=team&show=1">{$lang['team']}</a> -
<a onclick="self.scrollTo(0, 0); return false;" href="#top">{$lang['UP']}</a>
{if {$_CONF['rows']['group_info']['admincp_allow']}} -
<a href="admin.php">{$lang['cp_admin']}</a>
{/if}    <a href="index.php?page=rss&subject=1">
<img border="0" src="{$image_path}/rss.gif" width="28" height="16"
title="{$lang['rss_subject']}"></a>
</td>
</tr>
</table>
</div>
<!-- -->
<br />

{$lang['copyright']}

</td>
<td style="background-image: url('{$image_path}/Hope/wall_forum_left.gif')">
<img src="{$image_path}/Hope/wall_forum_left.gif" width="73" height="19" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-image: url('{$image_path}/Hope/wall_forum_do_body_center.gif')">
<table style="width: 100%" cellpadding="0" cellspacing="0" dir="rtl" class="style1">
<tr>
<td>
<img src="{$image_path}/Hope/wall_forum_do_rigth.gif" width="73" height="95" /></td>
<td style="width: 100%">
<table style="width: 100%" cellpadding="0" cellspacing="0" dir="rtl" class="style1">
<tr>
<td><img src="{$image_path}/Hope/wall_forum_do_rigth_center.gif" width="224" height="95" style="float: right" /></td>
<td style="text-align: center"><img src="{$image_path}/Hope/wall_forum_do_center.gif" width="165" height="95" /></td>
<td><img src="{$image_path}/Hope/wall_forum_do_left_center.gif" width="224" height="95" style="float: left" /></td>
</tr>
</table>
</td>
<td>
<img src="{$image_path}/Hope/wall_forum_do_left.gif" width="73" height="95" /></td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>

</pre>

[p]وبهذا نكون قد انتهينا من تركيب الهيدر والفوتير وأتمنى من الله العلي القدير أن يكون الدرس مفهوم وواضح وان حصل مني تقصير فأرجوا من الله ثم منكم أن لا تؤاخذوني فجل من لا يسهو.

بإذن الله في الدرس القادم سوف نتكلم عن تأطير قالب معلومات العضو وتسجيل الدخول المعروف باسم الناف بار في برنامج الفيبولتن.

إذا كان لديكم أي استفسارات أو اقتراحات لا تترددوا في مراسلتنا .

http://www.shqawe.com/tmt/pbb/lessones_1.php
وأي استفسار عن الدرس سوف اكون حاضر لكم والادارة ماهي مقصرة باذن الله

تقبلوا احترامي وتقديري
اخوكم
شقاوي

منتدى دعم PBBoard الرسمي