السلام عليكم ورحمة الله وبركاته
====================
أهلا بكم مع الدرس الثاني ، في دورة تكويد ستايل مبني على بروسيلفر
لمنتديات phpBB3 ، في هذا الدرس سنبدأ الخطوات الأولى في التركيب وهي إنشاء
ستايل جديد وتركيبه من لوحة التحكم + تركيب الإطار الأساسي للمنتدى وهو
التصميم الذي قمنا بتجهيزه
أولا إنشاء ستايل جديد :– في منتداك المركب على السيرفر المحلي أدخل إلى مجلد styles وقم بنسخ مجلد
prosilver في نفس المكان ثم قم بعد ذلك بتغير اسمه الى اسم الاستايل
الجديد الذي نعمل عليه وليكن مثلا patterny .
– افتح مجلد الاستايل الجديد pattrny ثم افتح ملف style.cfg بمحرر النصوص الذي تستعمله وابحث عن :
رمز Code:
name = prosilver
غير كلمة prosilver إلى اسم الاستايل الجديد patterny ليكون كذلك :
رمز Code:
name = patterny
كرر نفس الخطوة السابقة على الملفات التالية :
- imageset.cfg الموجود داخل مجلد imageset
- template.cfg الموجود داخل مجلد template
- theme.cfg الموجود داخل مجلد theme
الآن ادخل إلى لوحة تحكم منتداك ومن قائمة الاستايلات ستجدل الاستايل
الجديد “patterny” موجود في قائمة استايلات ازيلت اضغط على تركيب واجعله
الاستايل الافتراضي:
ثانيا تركيب ما قمنا بتجهيزه في الدرس الأول : -قم بنسخ الصور التي قمنا بتقطيعها في الدرس السابق من مجلد images إلى
مجلد images الخاص بالاستايل والموجود في المسار التالي:
styles/patterny/theme/images
حيث أن patterny هو اسم مجلد الاستايل الجديد الذي نعمل عليه.
الآن أدخل على مجلد template وافتح ملف overall_header.html بمحرر النصوص :
عند السطر 106 تقريبا ستجد هذا الكود :
رمز Code:
<div id="wrap">
السطر السابق سنجد انه عبارة عن div معرف باسم wrap تماما مثل الـ
div الذي عرفناه في ملف indexhtml الذي أنشأناه في الدرس الاول لذلك سنترك
هذا السطر كما هو .
- الآن ابحث عن :
رمز Code:
<div id="page-header">
السطر السابق عبارة عن الـ div الخاص بالهيدر في ستايل بروسيلفر
والذي انشأنا بدلا منه في ملف الـ index.html الـ div المعرف باسم
wrapheader في درسنا الاول .
سنقوم الآن بحذف السطر السابق من الملف وما بعده حتى تصل إلى السطر التالي والذي ستتوقف قبله دون حذفه:
رمز Code:
<a name="start_here"></a>
- الآن قم بنسخ هذا الجزء من ملف index.html الخاص بالدرس السابق وضعه بدلا مما حذفناه في الخطوة السابقة:
رمز Code:
<div id="wrapheader"></div>
- الآن في ملف overall_header.html أيضا ابحث عن هذا السطر :
رمز Code:
<div id="page-body">
السطر السابق يمثل الـ div الخاص بمحتوى المنتدى الأوسط في ستايل
prosilver والذي يمثل wrapcenter في درسنا السابق لذلك سنستبدل page-body
بـ wrapcenter ليصبح السطر هكذا :
رمز Code:
<div id="wrapcenter">
- الآن قم بحفظ ملف overall_header.html وافتح الآن ملف overall_footer.html وابحث عن :
رمز Code:
<div class="copyright">Powered by <a href="http://www.phpbb.com/">phpBB</a> © 2000, 2002, 2005, 2007 phpBB Group
<!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
</div>
</div>
أضف بعده الجزء الخاص بالفوتر :
رمز Code:
<div id="wrapfooter"></div>
نأتي الآن لإضافة خصائص الـ css التي قمنا بإضافتها في ملف style.css في الدرس الاول : أولا لنتعرف قليلا على ملفات الـ css الخاصة بستايل بروسيلفر :
يحتوي ستايل بروسيلفر في مجلد theme على أكثر من ملف css وذلك بغرض التنسيق
والترتيب يتم تجميع هذه الملفات في النهاية في ملف واحد باسم
stylesheet.css اهم هذه الملفات هي :
- common.css وهو الملف الذي يحتوي على الخصائص التنسيقية العامة مثل العرض ، الارتفاع ، الحدود ، …. للوسوم والكلاسات المشتركة
- colours.css وهو الملف الخاص بتنسيقات الألوان والخلفيات
- links.css وهو الملف الخاص بتنسيقات الروابط ماعدا خصائص الألوان والخلفيات حيث تكون في ملف clolours.css
- content.css وهو الملف الخاص بتنسيقات المحتوى مثل المشاركات ، وقائمة المواضيع …
الآن إذا أردنا أن نقوم بوضع التنسيقات الخاصة بالمعرف wrap والتي وضعناها في الملف التجهيزي في درسنا الأول وهي:
رمز Code:
#wrap {
margin:0 auto;
width:980px;
background:url(images/bg.png);
}
سنضع خاصية العرض والـ margin في ملف common.css أما خاصية الخلفية فسنضعها في ملف colours.css
الآن نفتح ملف common.css ونبحث عن :
رمز Code:
#wrap {
padding: 0 20px;
min-width: 650px;
}
نستبدله بـ :
رمز Code:
#wrap {
margin:0 auto;
width:980px;
}
ثم نفتح ملف colours.css ونضع به خاصية خلفية الـ wrap :
رمز Code:
#wrap {
background:url("{T_THEME_PATH}/images/bg.png");
}
الآن فهمنا العملية لنكمل .. نعود لملف common.css ونبحث عن :
رمز Code:
.headerbar {
background: #ebebeb none repeat-x 0 0;
color: #FFFFFF;
margin-bottom: 4px;
padding: 0 5px;
}
نستبدله بـ :
رمز Code:
#wrapheader {
height:294px;
width:980px;
}
في ملف common.css أيضا نبحث عن :
رمز Code:
#page-body {
margin: 4px 0;
clear: both;
}
ونستبدله بـ :
رمز Code:
#wrapcenter {
width:90%;
margin:0 auto;
}
وأيضا نبحث عن :
رمز Code:
#page-footer h3 {
margin-top: 20px;
}
نضع بعده التنسيق الخاص بالفوتر : رمز Code:
#wrapfooter {
height:81px;
width:980px;
}
نعود الآن لملف colours.css لنضيف الخلفيات الخاصة بـ wrapfooter و wrapheader
ابحث عن :
رمز Code:
.headerbar {
background-color: #12A3EB;
background-image: url("{T_THEME_PATH}/images/bg_header.gif");
color: #FFFFFF;
}
استبدله بـ :
رمز Code:
#wrapheader {
background:url("{T_THEME_PATH}/images/header.png");
}
وفي آخر الملف أو في أي مكان ضع :
رمز Code:
#wrapfooter {
background:url("{T_THEME_PATH}/images/footer.png");
}
بعد حفظ الملفات اذهب الآن إلى لوحة التحكم الخاصة بالمنتدى واحذف
الملفات المؤقتة الخاصة بالقوالب والثيمات .. بالتالي نكون قد انتهينا من
تركيب الجزء الذي جهزناه في الدرس الاول وينتهي بذلك درسنا الثاني الذي
سنحصل في نهايته على المنتدى بهذا الشكل :
الرئيسية 
