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

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

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



07-07-2010 08:37 مساءً
معلومات الكاتب ▼
تاريخ الإنضمام : 04-07-2010
رقم العضوية : 566
المشاركات : 6
الدولة : السعودية
الجنس :
تاريخ الميلاد : 14-7-1980
قوة السمعة : 140
موقعي : زيارة موقعي
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
اخواني حقيقة هذا اول موضوع لي في المنتدى وان شاء الله ما يكون الاخير واللي جابني للمنتدى و عرفني بالنسخة موضوع في احد المنتديات يتحدث عن هذا البرنامج الرائع وانه بأيدي عربيه ولك يفتقر للشروحات وخاصه شروحات الاستايلات لذا قمت بالتسجيل في الموقع وتحميل النسخة وما زلت ابحر فيها لمعرفة جميع خصائصها ولكن في بادئ الامر بدأت في استايلات النسخه وها أنا اليوم اقدم لكم الدرس الاول من سلسلة شروح تحويل استايل منتدى 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 أو أي برنامج آخر بعد ذلك تقوم بالتطبيق وهذا مافعلته.


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


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
وأي استفسار عن الدرس سوف اكون حاضر لكم والادارة ماهي مقصرة باذن الله

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

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

look/images/icons/i1.gif شرح تحويل استايل منتدى vb الى استايل خاص ب pbb [الدرس الاول] تركيب الهيدر والفوتير
  07-07-2010 11:51 مساءً   [2]
معلومات الكاتب ▼
تاريخ الإنضمام : 17-08-2009
رقم العضوية : 82
المشاركات : 1066
الدولة : فلسطين
الجنس :
تاريخ الميلاد : 3-9-1993
الدعوات : 5
قوة السمعة : 4254
موقعي : زيارة موقعي
مشكور على الشرح

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

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

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

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

اخوكم

شقاوي

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

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

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

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

انتظرك blushing

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

رد جديد موضوع جديد
الصفحة 2 من 2 < 1 2 > الأخيرة




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

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









الساعة الآن 01:38 PM