أهلا وسهلا بك زائرنا الكريم في منتدى دعم PBBoard الرسمي، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .

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



07-07-2010 08:37 مساءً
shqawe
معلومات الكاتب
بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

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

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

وسوف تكون هناك سلسلة من الشروح ولكن اسأل الله العلي القدير ان اتوفق في الوقت لكي اتم هذه السلسلة .

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

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





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




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




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


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


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


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


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

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

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

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

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

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

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

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

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


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


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


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

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

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

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

لاحظوا معي أنني قمت بإحاطة كلمة 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&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}
</pre>

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


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

<!--pbb.logo.end-->
</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&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}
</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&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}
</pre>

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


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


CODE
 <div class="time" align="center">
{$lang['timer']}
{$timer}
</div>

<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="archive.html">{$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="sitemap.htm">Html</a> -
<a href="sitemap.xml">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="team.html">{$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>
<!-- -->

<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[&#39;timer&#39;]} {$timer}
</div>

<div align="center">
<table border="0" cellspacing="1" width="98%" class="info_bar" cellpadding="0" style="border-collapse: collapse">
<tr>
{if {$_CONF[&#39;info_row&#39;][&#39;content_dir&#39;]} == &#39;rtl&#39;}
<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[&#39;style_title&#39;]}</option>
{/Des::while}
</select>
{/if} {if {$LangsNo} &gt; 1} {if {$_CONF[&#39;member_permission&#39;]}}
<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[&#39;lang_title&#39;]}</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[&#39;lang_title&#39;]}</option>
{/Des::while}
</select>
{/if} {/if}
</td>
{if {$_CONF[&#39;info_row&#39;][&#39;content_dir&#39;]} == &#39;rtl&#39;}
<td class="row1" align="left" width="68%">
{else}
<td class="row1" align="right" width="68%">
{/if} {if {$_CONF[&#39;info_row&#39;][&#39;rewriterule&#39;]} == &#39;1&#39;}
<a href="archive.html">{$lang[&#39;archive&#39;]}</a> - {else}
<a href="archive.html">{$lang[&#39;archive&#39;]}</a> - {/if} 
{if {$_CONF[&#39;info_row&#39;][&#39;sitemap&#39;]} == &#39;1&#39;} {if {$_CONF[&#39;info_row&#39;][&#39;rewriterule&#39;]} 
== &#39;1&#39;} {$lang[&#39;forummap&#39;]} (<a href="sitemap.htm">Html</a> -
<a href="sitemap.xml">Xml</a>) - {else} {$lang[&#39;forummap&#39;]} (<a href="sitemap.htm">Html</a> 
-
<a href="sitemap.xml">Xml</a>) - {/if} 
{/if}
<a href="index.php?page=latest&amp;today=1">{$lang[&#39;subject_today&#39;]}</a>
(<span class="spical">{$subject_today_nm}</span>) -
<a href="index.php?page=send&amp;sendmessage=1">{$lang[&#39;send_message&#39;]}</a> 
-
<a href="team.html">{$lang[&#39;team&#39;]}</a> -
<a onclick="self.scrollTo(0, 0); return false;" href="#top">{$lang[&#39;UP&#39;]}</a>
{if {$_CONF[&#39;rows&#39;][&#39;group_info&#39;][&#39;admincp_allow&#39;]}} -
<a href="admin.php">{$lang[&#39;cp_admin&#39;]}</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>
<!-- -->


{$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

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



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

اخوكم

شقاوي

look/images/icons/i1.gif شرح تحويل استايل منتدى vb الى استايل خاص ب pbb [الدرس الاول] تركيب الهيدر والفوتير
  07-07-2010 08:52 مساءً   [1]
soudy_4202
معلومات الكاتب
مشكووووووووووووووووور جدا وربنا يوفقك

look/images/icons/i1.gif شرح تحويل استايل منتدى vb الى استايل خاص ب pbb [الدرس الاول] تركيب الهيدر والفوتير
  07-07-2010 11:51 مساءً   [2]
moad
معلومات الكاتب
مشكور على الشرح

look/images/icons/i1.gif شرح تحويل استايل منتدى vb الى استايل خاص ب pbb [الدرس الاول] تركيب الهيدر والفوتير
  08-07-2010 12:37 صباحاً   [3]
shqawe
معلومات الكاتب
حياكم الله اخواني

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

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

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

اخوكم

شقاوي

look/images/icons/i1.gif شرح تحويل استايل منتدى vb الى استايل خاص ب pbb [الدرس الاول] تركيب الهيدر والفوتير
  08-07-2010 02:02 مساءً   [4]
تكـت فور
معلومات الكاتب
وعليكم السـلأام ورحمة الله وبركااته
شكراً لك اخي شقاوي على دعمك النسخة وشرحك المبسط
جزاك الله خير

look/images/icons/i1.gif شرح تحويل استايل منتدى vb الى استايل خاص ب pbb [الدرس الاول] تركيب الهيدر والفوتير
  08-07-2010 10:40 مساءً   [5]
isma3eliano
معلومات الكاتب
شكراً لك أخي الكريم علي الشرح الممتاز و إن شاء الله تبقي تدعم النسخة
شكراً لدعمك أخي....و أتمني من الإدارة نقل الموضوع للقسم المناسب

look/images/icons/i1.gif شرح تحويل استايل منتدى vb الى استايل خاص ب pbb [الدرس الاول] تركيب الهيدر والفوتير
  09-07-2010 11:37 صباحاً   [6]
AHMED
معلومات الكاتب
شرح رائع و مميز اخى الكريم
بارك الله لك و جزاك بكل خير لهذا الدعم القوى للنسخه

look/images/icons/i1.gif شرح تحويل استايل منتدى vb الى استايل خاص ب pbb [الدرس الاول] تركيب الهيدر والفوتير
  09-07-2010 06:26 مساءً   [7]
Pedo
معلومات الكاتب
شكراً جزيلاً ،،
بانتظآر بآقي الدروس ..
على الرغم من انني لا املك الخبرة الكافية في مجال التصميم والستايلات لكني سأطبق شروحاتك وأزود المنتدى بستايلات جديده محولة !

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

look/images/icons/i1.gif شرح تحويل استايل منتدى vb الى استايل خاص ب pbb [الدرس الاول] تركيب الهيدر والفوتير
  25-07-2010 03:47 مساءً   [8]
isma3eliano
معلومات الكاتب
أخي الكريم ضع كل الدروس هنا في هذا الموضوع ليتم تثبيته

look/images/icons/i1.gif شرح تحويل استايل منتدى vb الى استايل خاص ب pbb [الدرس الاول] تركيب الهيدر والفوتير
  25-07-2010 07:38 مساءً   [9]
proman
معلومات الكاتب
أنا من دعاكـ الى هنــا
ونتظر مزيدك اخوكـ احمد
الاسم بترايدنت m3kom-dom.com شرح تحويل استايل منتدى vb الى استايل خاص ب pbb تركيب الهيدر والفوتير وتم تجديده او تغييره الى
iegyi


المواضيع المتشابهه
عنوان الموضوع الكاتب الردود الزوار آخر رد
اطلب استايل الواحة للالعاب اخذت الاذن من المدير للتحويله MAHDI H.D
9 1002 MAHDI H.D
ارجو تحويل الاستايل AhmedTiT0
1 876 AhmedTiT0
تحويل استايل vb محسي غيور
7 1435 محسي غيور
تحويل الاستايلات - تأطير القوالب Mr King
4 2107 newghanou
كيفية تحويل استايل منتدى woltlab الىpbboard3.0.2 imad276
2 1242 عبدالاله الهذلي

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






الساعة الآن 03:52 AM