himo0o
04-11-2007, 08:08 AM
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاتة ،،
في هذا الموضوع سيتم شرح مفصل ومبسط لكيفية تعريب استايل IPB للإصدار 2.1
وسيتم الشرح على أحد الأستايلات الأجنبية وتم اختيار استايل skin-tower الغير معرب
http://www.abc4web.net/vb/imgcache/1334.png
حمله من هنا http://www.msrag.com/ib/index.php?act=Atta...ype=post&id=353
لكي تقوم بالتطبيق عليه
بسم الله نبدأ ..
الخطوة الأولى :
حمل الستايل وقم بتركيبه على منتداك وتأكد من عمله .
الخطوة الثانية:
تعديل Stylesheet CSS :
من لوحة التحكم الإداري إذهب إلى :
>> lookandfeel
>> Manage Skin Sets
>> أختر الستايل ثم أنقر Edit Stylesheet (CSS Advanced Mode)
سيخرج لك مستطيل كبير يوجد به جميع أكواد الخاصة بألوان وخطوط واتجاهات المنتدى بلغة CSS
قم بنسخة كاملاً وضعه في اي محرر لغات مثل النوت باد أو التسكت أو الفرونت بيج ويفضل بالفرونت بيج لسهولته لأني سأقوم بشرح بالتعديلات عليه
==============================
الخطوة الأولى في تعريب Stylesheet CSS للصفحة الرئيسية :
لتغيير اتجاه جسم المنتدى المسمى body{ إالى اليمين وتغير الخطوط
ابحث عن :
body{
background: #95897B;
color: #222;
font-family: Verdana, Tahoma, Arial, Trebuchet MS, Sans-Serif, Georgia, Courier, Times New Roman, Serif;
font-size: 11px;
line-height: 135%;
margin: 0;
padding: 0; /* required for Opera to have 0 margin */
text-align: center; /* centers board in MSIE */
}
واستبدله بـ
body{
background: #95897B;
color: #222;
font-family: Tahoma, Arial,;
font-size: 11px;
line-height: 135%;
direction: rtl;
margin: 0;
padding: 0; /* required for Opera to have 0 margin */
text-align: center; /* centers board in MSIE */
}
=======================================
الخطوة الثانية تعديل الإتجاه للصفحات المنتدى من اليمين إلى اليسار :
البحث عن :
text-align: left;
استبدال بـ :
text-align: right;
======================================
تعديل صورة بجانب عنوان القسم الأم (+) و(-) من اليمين إلى اليسار :
ابحث عن :
.maintitle p.expand,
.maintitle p.goto,
.maintitlecollapse p.expand,
.formsubtitle p.members{
float: right;
width: auto !important;
استبدل بـ :
.maintitle p.expand,
.maintitle p.goto,
.maintitlecollapse p.expand,
.formsubtitle p.members{
float: left;
width: auto !important;
===================================
تعديل أتجاه وقياس (احذف الكوكيز التي أنشأها المنتدى · اجعل جميع المشاركات مقروءة )
ابحث عن :
.toplinks{
background: transparent;
color: #000;
margin: 0;
padding: 0 0 5px 0;
text-align: right;
}
استبدله بـ :
.toplinks{
background: transparent;
color: #000;
margin: 0;
padding: 0 0 5px 0;
text-align: left;
}
ولتعديل قياس الحدود لكي تكون متناسقه
ابحث عن :
.toplinks span{
background: #C2B8AE;
border: 1px solid #C2B8AE;
border-bottom: 0;
color: #000;
font-size: 10px;
font-weight: bold;
margin: 0 10px 0 0;
padding: 5px;
}
استبدله بـ :
.toplinks span{
background: #C2B8AE;
border: 1px solid #C2B8AE;
border-bottom: 0;
color: #000;
font-size: 10px;
font-weight: bold;
margin: 0 0px 0 0;
padding: 5px;
}
تم الإنتهاء من تعريب Stylesheet CSS للصفحة الرئيسية
================================================
الخطوة الثالثة هي تعريب Stylesheet CSS للصفحة المنتديات وصفحة المواضييع :
تعديل إتجاهات النصوص من اليسار إلى اليمين داخل ايقونة ( إعدادات المنتدى )
ابحث عن :
.popupmenu
{
background: #C2B8AE;
border: 1px solid #222;
text-align:left;
font-size:10px;
white-space:nowrap;
/*padding:3px 5px 3px 3px;*/
/*width:300px;*/
}
استبدله بـ :
.popupmenu
{
background: #C2B8AE;
border: 1px solid #222;
text-align:right;
font-size:10px;
white-space:nowrap;
/*padding:3px 5px 3px 3px;*/
/*width:300px;*/
}
=============================
تعديل أتجاه ايقونة ( خيارات ) من اليمين إلى اليسار الموجودة في المواضيع في الأعلى :
ابحث عن :
.popmenubutton
{
width:120px;
white-space:nowrap;
background-color: #A89B8C;
border:1px solid #222;
color: #222222;
font-weight:bold;
float:right;
height:18px;
text-align:center;
margin:0px;
font-size:11px;
padding:3px;
}
استبدله بـ :
.popmenubutton
{
width:120px;
white-space:nowrap;
background-color: #A89B8C;
border:1px solid #222;
color: #222222;
font-weight:bold;
float:left;
height:18px;
text-align:center;
margin:0px;
font-size:11px;
padding:3px;
}
تم الإنتهاء من تعريب الستايل شييت
================================================== ======
الخطوة الرابعة : تعريب Template HTML ( قوالب الهتمل ) من اليسار إلى اليمين :
من لوحة التحكم الإداري إذهب إلى :
>> lookandfeel
>> Manage Skin Sets
>> أختر الستايل ثم أنقر Edit Template HTML
>> نختار قالب Post Screen ( شاشة المواضيع )
(1) قالب ( Post Screen )
القوالب التي سيتم تعريبها في داخل قالب Post Screen هي :
1- add_edit_box
2- inline_edit_quick_box
3- mod_options
4- nameField_unreg
5- poll_box
6- postbox_wrap
7- PostIcons
8- topictitle_fields
9- Upload_field
التعديل سيكون كالتالي
ابحث عن :
td align="left"
واستبدله بـ :
td align="right"
في جميع هذه القوالب
==============================
(2) قالب ( Messenger )
القوالب التي سيتم تعريبها في داخل قالب Messenger هي :
mass_pm_box
Send_form
send_form_footer
التعديل سيكون كالتالي :
ابحث عن :
td align="left"
واستبدله بـ :
td align="right"
==============================
(3) قالب (Forum Index)
القوالب التي سيتم تعريبها في داخل قالب Forum Index هي :
1- PageTop
2- TableEnd
التعدي سيكون كالتالي
ابحث في قالب PageTop عن :
<td width='1%' nowrap='nowrap' align='left'>
إستبدله بـ :
<td width='1%' nowrap='nowrap' align='right'>
--------------------------
ابحث في قالب TableEnd عن :
<td width="50%" align="left" nowrap="nowrap" class="nopad">
استبدله بـ :
<td width="50%" align="right" nowrap="nowrap" class="nopad">
===============================
(4) قالب (Topic View )
القوالب التي سيتم تعريبها في داخل قالب Topic View هي :
1- TableFooter
2- topic_page_top
ابحث في قالب TableFooter عن :
<div style="float: left; padding: 5px 5px 0 0;">
استبدله بـ :
<div style="float: right; padding: 5px 5px 0 0;">
ثم ابحث :
<div style="float: left; text-align: right;">
استبدله بـ :
<div style="float: right; text-align: right;">
ثم ابحث عن :
<div align="left">{$data[FORUM]['JUMP']}</div>
واستبدله بـ :
<div align="right">{$data[FORUM]['JUMP']}</div>
--------------------------
ابحث في قالب TableFooter عن :
ابحث عن :
<td width='99%' align='left'>
استبدله بـ :
<td width='99%' align='right'>
تم الإنتهاء من تعريب Template HTML ( قوالب الهتمل )
================================================== ======
الخطوة الخامسة : تعديل ترميز المتصفح الخاص بالمنتدى إلى العربية :
من لوحة التحكم الإداري إذهب إلى :
>> lookandfeel
>> Manage Skin Sets
>> أختر الستايل ثم أنقر Edit Board Header & Footer Wrapper
أبحث عن :
<metatag ="content-type" content="text/html; charset=<% CHARSET %>" />
استبدله بـ :
<metatag="Content-Type" content="text/html; charset=windows-1256">
=======================================
الخطوة السادسة: تعديل الكتابة في صور المواضيع والمشاركات :
هذا التعديل يتم عن طريق برنامج الفوتشوب
والصور هي كالتالي
1- t_new.gif
2- t_options.gif
3- t_poll.gif
4- t_qr.gif
5- t_reply.gif
6- t_addpoll.gif
7- t_closed.gif
8- t_moved.gif
9- p_up.gif
10- p_report.gif
11- p_quote.gif
12- p_pm.gif
13- p_online.gif
14- p_offline.gif
15- p_email.gif
16- p_card.gif
17- p_delete.gif
18- p_edit.gif
__________________________________________________ _____
أنتهى التعريب
ملاحظة :
هذا الشرح مقتصر على ستايل skin-tower ولا يعمم على جميع الأستايلات لأختلافها وهو خطوة أولى للمبتدئين في التعريب للإصدار 2.1
تمنياتي لكم بالتوفيق
السلام عليكم ورحمة الله وبركاتة ،،
في هذا الموضوع سيتم شرح مفصل ومبسط لكيفية تعريب استايل IPB للإصدار 2.1
وسيتم الشرح على أحد الأستايلات الأجنبية وتم اختيار استايل skin-tower الغير معرب
http://www.abc4web.net/vb/imgcache/1334.png
حمله من هنا http://www.msrag.com/ib/index.php?act=Atta...ype=post&id=353
لكي تقوم بالتطبيق عليه
بسم الله نبدأ ..
الخطوة الأولى :
حمل الستايل وقم بتركيبه على منتداك وتأكد من عمله .
الخطوة الثانية:
تعديل Stylesheet CSS :
من لوحة التحكم الإداري إذهب إلى :
>> lookandfeel
>> Manage Skin Sets
>> أختر الستايل ثم أنقر Edit Stylesheet (CSS Advanced Mode)
سيخرج لك مستطيل كبير يوجد به جميع أكواد الخاصة بألوان وخطوط واتجاهات المنتدى بلغة CSS
قم بنسخة كاملاً وضعه في اي محرر لغات مثل النوت باد أو التسكت أو الفرونت بيج ويفضل بالفرونت بيج لسهولته لأني سأقوم بشرح بالتعديلات عليه
==============================
الخطوة الأولى في تعريب Stylesheet CSS للصفحة الرئيسية :
لتغيير اتجاه جسم المنتدى المسمى body{ إالى اليمين وتغير الخطوط
ابحث عن :
body{
background: #95897B;
color: #222;
font-family: Verdana, Tahoma, Arial, Trebuchet MS, Sans-Serif, Georgia, Courier, Times New Roman, Serif;
font-size: 11px;
line-height: 135%;
margin: 0;
padding: 0; /* required for Opera to have 0 margin */
text-align: center; /* centers board in MSIE */
}
واستبدله بـ
body{
background: #95897B;
color: #222;
font-family: Tahoma, Arial,;
font-size: 11px;
line-height: 135%;
direction: rtl;
margin: 0;
padding: 0; /* required for Opera to have 0 margin */
text-align: center; /* centers board in MSIE */
}
=======================================
الخطوة الثانية تعديل الإتجاه للصفحات المنتدى من اليمين إلى اليسار :
البحث عن :
text-align: left;
استبدال بـ :
text-align: right;
======================================
تعديل صورة بجانب عنوان القسم الأم (+) و(-) من اليمين إلى اليسار :
ابحث عن :
.maintitle p.expand,
.maintitle p.goto,
.maintitlecollapse p.expand,
.formsubtitle p.members{
float: right;
width: auto !important;
استبدل بـ :
.maintitle p.expand,
.maintitle p.goto,
.maintitlecollapse p.expand,
.formsubtitle p.members{
float: left;
width: auto !important;
===================================
تعديل أتجاه وقياس (احذف الكوكيز التي أنشأها المنتدى · اجعل جميع المشاركات مقروءة )
ابحث عن :
.toplinks{
background: transparent;
color: #000;
margin: 0;
padding: 0 0 5px 0;
text-align: right;
}
استبدله بـ :
.toplinks{
background: transparent;
color: #000;
margin: 0;
padding: 0 0 5px 0;
text-align: left;
}
ولتعديل قياس الحدود لكي تكون متناسقه
ابحث عن :
.toplinks span{
background: #C2B8AE;
border: 1px solid #C2B8AE;
border-bottom: 0;
color: #000;
font-size: 10px;
font-weight: bold;
margin: 0 10px 0 0;
padding: 5px;
}
استبدله بـ :
.toplinks span{
background: #C2B8AE;
border: 1px solid #C2B8AE;
border-bottom: 0;
color: #000;
font-size: 10px;
font-weight: bold;
margin: 0 0px 0 0;
padding: 5px;
}
تم الإنتهاء من تعريب Stylesheet CSS للصفحة الرئيسية
================================================
الخطوة الثالثة هي تعريب Stylesheet CSS للصفحة المنتديات وصفحة المواضييع :
تعديل إتجاهات النصوص من اليسار إلى اليمين داخل ايقونة ( إعدادات المنتدى )
ابحث عن :
.popupmenu
{
background: #C2B8AE;
border: 1px solid #222;
text-align:left;
font-size:10px;
white-space:nowrap;
/*padding:3px 5px 3px 3px;*/
/*width:300px;*/
}
استبدله بـ :
.popupmenu
{
background: #C2B8AE;
border: 1px solid #222;
text-align:right;
font-size:10px;
white-space:nowrap;
/*padding:3px 5px 3px 3px;*/
/*width:300px;*/
}
=============================
تعديل أتجاه ايقونة ( خيارات ) من اليمين إلى اليسار الموجودة في المواضيع في الأعلى :
ابحث عن :
.popmenubutton
{
width:120px;
white-space:nowrap;
background-color: #A89B8C;
border:1px solid #222;
color: #222222;
font-weight:bold;
float:right;
height:18px;
text-align:center;
margin:0px;
font-size:11px;
padding:3px;
}
استبدله بـ :
.popmenubutton
{
width:120px;
white-space:nowrap;
background-color: #A89B8C;
border:1px solid #222;
color: #222222;
font-weight:bold;
float:left;
height:18px;
text-align:center;
margin:0px;
font-size:11px;
padding:3px;
}
تم الإنتهاء من تعريب الستايل شييت
================================================== ======
الخطوة الرابعة : تعريب Template HTML ( قوالب الهتمل ) من اليسار إلى اليمين :
من لوحة التحكم الإداري إذهب إلى :
>> lookandfeel
>> Manage Skin Sets
>> أختر الستايل ثم أنقر Edit Template HTML
>> نختار قالب Post Screen ( شاشة المواضيع )
(1) قالب ( Post Screen )
القوالب التي سيتم تعريبها في داخل قالب Post Screen هي :
1- add_edit_box
2- inline_edit_quick_box
3- mod_options
4- nameField_unreg
5- poll_box
6- postbox_wrap
7- PostIcons
8- topictitle_fields
9- Upload_field
التعديل سيكون كالتالي
ابحث عن :
td align="left"
واستبدله بـ :
td align="right"
في جميع هذه القوالب
==============================
(2) قالب ( Messenger )
القوالب التي سيتم تعريبها في داخل قالب Messenger هي :
mass_pm_box
Send_form
send_form_footer
التعديل سيكون كالتالي :
ابحث عن :
td align="left"
واستبدله بـ :
td align="right"
==============================
(3) قالب (Forum Index)
القوالب التي سيتم تعريبها في داخل قالب Forum Index هي :
1- PageTop
2- TableEnd
التعدي سيكون كالتالي
ابحث في قالب PageTop عن :
<td width='1%' nowrap='nowrap' align='left'>
إستبدله بـ :
<td width='1%' nowrap='nowrap' align='right'>
--------------------------
ابحث في قالب TableEnd عن :
<td width="50%" align="left" nowrap="nowrap" class="nopad">
استبدله بـ :
<td width="50%" align="right" nowrap="nowrap" class="nopad">
===============================
(4) قالب (Topic View )
القوالب التي سيتم تعريبها في داخل قالب Topic View هي :
1- TableFooter
2- topic_page_top
ابحث في قالب TableFooter عن :
<div style="float: left; padding: 5px 5px 0 0;">
استبدله بـ :
<div style="float: right; padding: 5px 5px 0 0;">
ثم ابحث :
<div style="float: left; text-align: right;">
استبدله بـ :
<div style="float: right; text-align: right;">
ثم ابحث عن :
<div align="left">{$data[FORUM]['JUMP']}</div>
واستبدله بـ :
<div align="right">{$data[FORUM]['JUMP']}</div>
--------------------------
ابحث في قالب TableFooter عن :
ابحث عن :
<td width='99%' align='left'>
استبدله بـ :
<td width='99%' align='right'>
تم الإنتهاء من تعريب Template HTML ( قوالب الهتمل )
================================================== ======
الخطوة الخامسة : تعديل ترميز المتصفح الخاص بالمنتدى إلى العربية :
من لوحة التحكم الإداري إذهب إلى :
>> lookandfeel
>> Manage Skin Sets
>> أختر الستايل ثم أنقر Edit Board Header & Footer Wrapper
أبحث عن :
<metatag ="content-type" content="text/html; charset=<% CHARSET %>" />
استبدله بـ :
<metatag="Content-Type" content="text/html; charset=windows-1256">
=======================================
الخطوة السادسة: تعديل الكتابة في صور المواضيع والمشاركات :
هذا التعديل يتم عن طريق برنامج الفوتشوب
والصور هي كالتالي
1- t_new.gif
2- t_options.gif
3- t_poll.gif
4- t_qr.gif
5- t_reply.gif
6- t_addpoll.gif
7- t_closed.gif
8- t_moved.gif
9- p_up.gif
10- p_report.gif
11- p_quote.gif
12- p_pm.gif
13- p_online.gif
14- p_offline.gif
15- p_email.gif
16- p_card.gif
17- p_delete.gif
18- p_edit.gif
__________________________________________________ _____
أنتهى التعريب
ملاحظة :
هذا الشرح مقتصر على ستايل skin-tower ولا يعمم على جميع الأستايلات لأختلافها وهو خطوة أولى للمبتدئين في التعريب للإصدار 2.1
تمنياتي لكم بالتوفيق