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

بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته اخواني حقيقة هذا اول موضوع لي في المنتدى وان شاء الله ما يكون الا ..


موضوع مغلق

الصفحة 1 من 2 < 1 2 > الأخيرة »


07-07-2010 08:37 مساء
shqawe
عضـو مشارك
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 04-07-2010
رقم العضوية : 566
المشاركات : 6
الدولة : السعودية
الجنس : ذكر
تاريخ الميلاد : 14-7-1980
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 140
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
اخواني حقيقة هذا اول موضوع لي في المنتدى وان شاء الله ما يكون الاخير واللي جابني للمنتدى و عرفني بالنسخة موضوع في احد المنتديات يتحدث عن هذا البرنامج الرائع وانه بأيدي عربيه ولك يفتقر للشروحات وخاصه شروحات الاستايلات لذا قمت بالتسجيل في الموقع وتحميل النسخة وما زلت ابحر فيها لمعرفة جميع خصائصها ولكن في بادئ الامر بدأت في استايلات النسخه وها أنا اليوم اقدم لكم الدرس الاول من سلسلة شروح تحويل استايل منتدى vb الى استايل pbb
والدرس الاول قمت بشرح كيفية تكوين المجلدات و اضافة استايل جديد من لوحة التحكم وتأمين جميع الاعدادات وبدأت بقالبين هما قالب الهيدر والفوتير .
وسوف تكون هناك سلسلة من الشروح ولكن اسأل الله العلي القدير ان اتوفق في الوقت لكي اتم هذه السلسلة .
طلبي من الادارة ان لا تأخذ في خاطرها لانني قمت بوضع الدرس على موقعي الخاص برابط مباشر لايحتاج تسجيل او اي شيء من هذا القبيل فقط صفحة html لسهولة تنسيق الدرس على الجهاز ورفعه بسرعه .
اطلت عليكم وهذا هو رابط الدرس واعذروني اذا اخطأت فجلا من لايخطأ


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

 

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


 

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

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

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

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

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

create_new_style_folder

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

paste_newfolder_inside_oldfolder

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

create_new_style_button

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

create_style_name_AND_folder

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

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

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

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

change_style_folders_names

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

change_style_folders_names2

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

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

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

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

<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%">

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

</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>

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

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

 

<!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-equiv="Content-Type" content="text/html; charset={$_CONF['info_row']['charset']}" />
<meta http-equiv="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&amp;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&amp;section=1&amp;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}

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

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

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

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

<!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-equiv="Content-Type" content="text/html; charset={$_CONF['info_row']['charset']}" />
<meta http-equiv="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&amp;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&amp;section=1&amp;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}

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

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

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

shqawe/images/Hope/wall_forum_rigth.gif

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

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

{$image_path}

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

{$image_path}/wall_forum_rigth.gif

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

<!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-equiv="Content-Type" content="text/html; charset={$_CONF['info_row']['charset']}" />
<meta http-equiv="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&amp;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&amp;section=1&amp;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}

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

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

 <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.location='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.location='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.location='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&amp;today=1">{$lang['subject_today']}</a>
(<span class="spical">{$subject_today_nm}</span>) -
<a href="index.php?page=send&amp;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} &nbsp;&nbsp; <a href="index.php?page=rss&amp;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>

 

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

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

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

div class="footer">

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

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

</div>

 

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

 <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} &gt; 1}
<select OnChange="window.location='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} &gt; 1} {if {$_CONF['member_permission']}}
<select OnChange="window.location='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.location='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&amp;today=1">{$lang['subject_today']}</a>
(<span class="spical">{$subject_today_nm}</span>) -
<a href="index.php?page=send&amp;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} &nbsp;&nbsp; <a href="index.php?page=rss&amp;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>

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

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

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



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

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

07-07-2010 08:52 مساء
مشاهدة مشاركة منفردة [1]
soudy_4202
عضو فعال
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 09-01-2010
رقم العضوية : 308
المشاركات : 214
الدولة : مصر
الجنس : ذكر
تاريخ الميلاد : 13-6-1991
الإنذارات : 1
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 146
موقعي : زيارة موقعي
اصدار المنتدى : 2.1.4
 offline 
look/images/icons/i1.gif شرح تحويل استايل منتدى vb الى استايل خاص ب pbb [الدرس الاول] تركيب الهيدر والفوتير
مشكووووووووووووووووور جدا وربنا يوفقك

07-07-2010 11:51 مساء
مشاهدة مشاركة منفردة [2]
moad
عضـو بـارز
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 17-08-2009
رقم العضوية : 82
المشاركات : 1064
الدولة : فلسطين
الجنس : ذكر
تاريخ الميلاد : 3-9-1993
الدعوات : 4
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 4154
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif شرح تحويل استايل منتدى vb الى استايل خاص ب pbb [الدرس الاول] تركيب الهيدر والفوتير
مشكور على الشرح

08-07-2010 12:37 صباحا
مشاهدة مشاركة منفردة [3]
shqawe
عضـو مشارك
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 04-07-2010
رقم العضوية : 566
المشاركات : 6
الدولة : السعودية
الجنس : ذكر
تاريخ الميلاد : 14-7-1980
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 140
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif شرح تحويل استايل منتدى vb الى استايل خاص ب pbb [الدرس الاول] تركيب الهيدر والفوتير
حياكم الله اخواني

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

وانتظروا الدرس القادم باذن الله

احترامي وتقديري

اخوكم

شقاوي

08-07-2010 02:02 مساء
مشاهدة مشاركة منفردة [4]
تكـت فور
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 20-07-2009
رقم العضوية : 33
المشاركات : 318
الدولة : HadRamouT | حضرمـوتُ
الجنس : ذكر
تاريخ الميلاد : 1-1-1994
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 563
موقعي : زيارة موقعي
اصدار المنتدى : غير محدد
 offline 
look/images/icons/i1.gif شرح تحويل استايل منتدى vb الى استايل خاص ب pbb [الدرس الاول] تركيب الهيدر والفوتير
وعليكم السـلأام ورحمة الله وبركااته
شكراً لك اخي شقاوي على دعمك النسخة وشرحك المبسط
جزاك الله خير

08-07-2010 10:40 مساء
مشاهدة مشاركة منفردة [5]
isma3eliano
عضـو ستـار
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 03-11-2009
رقم العضوية : 188
المشاركات : 2152
الدولة : مصر Egypt
الجنس : ذكر
تاريخ الميلاد : 26-10-1994
الدعوات : 4
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 5518
موقعي : زيارة موقعي
اصدار المنتدى : غير محدد
 offline 
look/images/icons/i1.gif شرح تحويل استايل منتدى vb الى استايل خاص ب pbb [الدرس الاول] تركيب الهيدر والفوتير
شكراً لك أخي الكريم علي الشرح الممتاز و إن شاء الله تبقي تدعم النسخة
شكراً لدعمك أخي....و أتمني من الإدارة نقل الموضوع للقسم المناسب

09-07-2010 11:37 صباحا
مشاهدة مشاركة منفردة [6]
AHMED
عضـو ستـار
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 20-07-2009
رقم العضوية : 18
المشاركات : 2796
الجنس : ذكر
تاريخ الميلاد : 1-10-1981
الدعوات : 25
يتابعهم : 0
يتابعونه : 2
قوة السمعة : 4978
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.1
 offline 
look/images/icons/i1.gif شرح تحويل استايل منتدى vb الى استايل خاص ب pbb [الدرس الاول] تركيب الهيدر والفوتير
شرح رائع و مميز اخى الكريم
بارك الله لك و جزاك بكل خير لهذا الدعم القوى للنسخه


الصفحة 1 من 2 < 1 2 > الأخيرة »

المواضيع المتشابهه
عنوان الموضوع الكاتب الردود الزوار آخر رد
مطلوب تحويل استايل rachidrachid99
2 54 MrKinvalo
طلب تحويل استايل من فى بى الى بى بى بورد m_rezk2000
10 563 m_rezk2000
طلب تحويل استايل VB إلى PBB thevest_knight
13 608 إبن القنصل
تحويل استايل ترايدنت باللون الازرق لمنتديات pbboard ميدو المصري
50 7393 sofiane-phy
طلب تحويل استايل islamov
0 284 islamov

الكلمات الدلالية
لا يوجد كلمات دلالية ..







الساعة الآن 05:23 صباحا