[الدرس الثاني] تكويد ستايل مبني على بروسيلفر





السلام عليكم ورحمة الله وبركاته
====================
أهلا بكم مع الدرس الثاني ، في دورة تكويد ستايل مبني على بروسيلفر لمنتديات phpBB3 ، في هذا الدرس سنبدأ الخطوات الأولى في التركيب وهي إنشاء ستايل جديد وتركيبه من لوحة التحكم + تركيب الإطار الأساسي للمنتدى وهو التصميم الذي قمنا بتجهيزه في الدرس الأول.


أولا إنشاء ستايل جديد :
– في منتداك المركب على السيرفر المحلي أدخل إلى مجلد styles وقم بنسخ مجلد prosilver في نفس المكان ثم قم بعد ذلك بتغير اسمه الى اسم الاستايل الجديد الذي نعمل عليه وليكن مثلا patterny .
– افتح مجلد الاستايل الجديد pattrny ثم افتح ملف style.cfg بمحرر النصوص الذي تستعمله وابحث عن :
001name = prosilver


غير كلمة prosilver إلى اسم الاستايل الجديد patterny ليكون كذلك :
001name = patterny


كرر نفس الخطوة السابقة على الملفات التالية :

  • imageset.cfg الموجود داخل مجلد imageset
  • template.cfg الموجود داخل مجلد template
  • theme.cfg الموجود داخل مجلد theme

الآن ادخل إلى لوحة تحكم منتداك ومن قائمة الاستايلات ستجدل الاستايل الجديد “patterny” موجود في قائمة استايلات ازيلت اضغط على تركيب واجعله الاستايل الافتراضي:

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

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



ثانيا تركيب ما قمنا بتجهيزه في الدرس الأول :


- قم بنسخ الصور التي قمنا بتقطيعها في الدرس السابق من مجلد images إلى مجلد images الخاص بالاستايل والموجود في المسار التالي: styles/patterny/theme/images
حيث أن patterny هو اسم مجلد الاستايل الجديد الذي نعمل عليه.

الآن أدخل على مجلد template وافتح ملف overall_header.html بمحرر النصوص :
عند السطر 106 تقريبا ستجد هذا الكود :

كود:
 001<div id="wrap">



السطر السابق سنجد انه عبارة عن div معرف باسم wrap تماما مثل الـ div الذي عرفناه في ملف indexhtml الذي أنشأناه في الدرس الاول لذلك سنترك هذا السطر كما هو .
- الآن ابحث عن :

كود:
 
كود:
001<div id="page-header">



السطر السابق عبارة عن الـ div الخاص بالهيدر في ستايل بروسيلفر والذي انشأنا بدلا منه في ملف الـ index.html الـ div المعرف باسم wrapheader في درسنا الاول .
سنقوم الآن بحذف السطر السابق من الملف وما بعده حتى تصل إلى السطر التالي والذي ستتوقف قبله دون حذفه:

كود:

كود:
001<a name="start_here"></a>



- الآن قم بنسخ هذا الجزء من ملف index.html الخاص بالدرس السابق وضعه بدلا مما حذفناه في الخطوة السابقة:

كود:

كود:
001<div id="wrapheader"></div>



- الآن في ملف overall_header.html أيضا ابحث عن هذا السطر :

كود:

كود:
001<div id="page-body">



السطر السابق يمثل الـ div الخاص بمحتوى المنتدى الأوسط في ستايل prosilver والذي يمثل wrapcenter في درسنا السابق لذلك سنستبدل page-body بـ wrapcenter ليصبح السطر هكذا :

كود:

كود:
001<div id="wrapcenter">



- الآن قم بحفظ ملف overall_header.html وافتح الآن ملف overall_footer.html وابحث عن :

كود:

كود:
001    <div class="copyright">Powered by <a href="http://www.phpbb.com/">phpBB</a> &copy; 2000, 2002, 2005, 2007 phpBB Group002        <!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->003        <!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->004        <!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->005    </div>006</div>



أضف بعده الجزء الخاص بالفوتر :

كود:

كود:
001<div id="wrapfooter"></div>



نأتي الآن لإضافة خصائص الـ css التي قمنا بإضافتها في ملف style.css في الدرس الاول :

أولا لنتعرف قليلا على ملفات الـ css الخاصة بستايل بروسيلفر :
يحتوي ستايل بروسيلفر في مجلد theme على أكثر من ملف css وذلك بغرض التنسيق والترتيب يتم تجميع هذه الملفات في النهاية في ملف واحد باسم stylesheet.css اهم هذه الملفات هي :


  • common.css وهو الملف الذي يحتوي على الخصائص التنسيقية العامة مثل العرض ، الارتفاع ، الحدود ، …. للوسوم والكلاسات المشتركة
  • colours.css وهو الملف الخاص بتنسيقات الألوان والخلفيات
  • links.css وهو الملف الخاص بتنسيقات الروابط ماعدا خصائص الألوان والخلفيات حيث تكون في ملف clolours.css
  • content.css وهو الملف الخاص بتنسيقات المحتوى مثل المشاركات ، وقائمة المواضيع …


الآن إذا أردنا أن نقوم بوضع التنسيقات الخاصة بالمعرف wrap والتي وضعناها في الملف التجهيزي في درسنا الأول وهي:

كود:

كود:
001#wrap {002    margin:0 auto;003    width:980px;004    background:url(images/bg.png);005}



سنضع خاصية العرض والـ margin في ملف common.css أما خاصية الخلفية فسنضعها في ملف colours.css
الآن نفتح ملف common.css ونبحث عن :

كود:

كود:
001#wrap {002    padding: 0 20px;003    min-width: 650px;004}



نستبدله بـ :

كود:

كود:
001#wrap {002    margin:0 auto;003    width:980px;004}



ثم نفتح ملف colours.css ونضع به خاصية خلفية الـ wrap :

كود:

كود:
001#wrap {002    background:url("{T_THEME_PATH}/images/bg.png");003}





الآن فهمنا العملية لنكمل .. نعود لملف common.css ونبحث عن :

كود:

كود:
001.headerbar {002    background: #ebebeb none repeat-x 0 0;003    color: #FFFFFF;004    margin-bottom: 4px;005    padding: 0 5px;006}



نستبدله بـ :

كود:

كود:
001#wrapheader {002    height:294px;003    width:980px;004}



في ملف common.css أيضا نبحث عن :

كود:

كود:
001#page-body {002    margin: 4px 0;003    clear: both;004}



ونستبدله بـ :

كود:

كود:
001#wrapcenter {002    width:90%;003    margin:0 auto;004}





وأيضا نبحث عن :

كود:

كود:
001#page-footer h3 {002    margin-top: 20px;003}





نضع بعده التنسيق الخاص بالفوتر :

كود:

كود:
001#wrapfooter {002    height:81px;003    width:980px;004}



نعود الآن لملف colours.css لنضيف الخلفيات الخاصة بـ wrapfooter و wrapheader

ابحث عن :

كود:

كود:
001.headerbar {002    background-color: #12A3EB;003    background-image: url("{T_THEME_PATH}/images/bg_header.gif");004    color: #FFFFFF;005}





استبدله بـ :

كود:

كود:
001#wrapheader {002    background:url("{T_THEME_PATH}/images/header.png");003}



وفي آخر الملف أو في أي مكان ضع :

كود:

كود:
001#wrapfooter {002    background:url("{T_THEME_PATH}/images/footer.png");003}



بعد حفظ الملفات اذهب الآن إلى لوحة التحكم الخاصة بالمنتدى واحذف الملفات المؤقتة الخاصة بالقوالب والثيمات .. بالتالي نكون قد انتهينا من تركيب الجزء الذي جهزناه في الدرس الاول وينتهي بذلك درسنا الثاني الذي سنحصل في نهايته على المنتدى بهذا الشكل :





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