بسم الله الرحمن الرحيم
تم بحمد الله الانتهاء من ترجمه كتاب "شرح تصميم ستايلات الجيل الرابع فى 10 خطوات"
الرابط الاصلى للكتاب الانجليزى من هنا
https://mwadah.com/images/imgcache/2009/11/71.jpg
مقدمه:
https://mwadah.com/images/imgcache/2009/11/72.jpg
بعد تثبیت المنتدى قد تحتاج الى اجراء بعد التغییرات على الاستایل الافتراضى للمنتدى لیناسب زوقك
یمكنك ذلك بسهوله من خلال تعدیل الاستایل و اختیار متغیرات الاستایل
متغیرات الاستایل تسمح لك بتغییر كل شئ فى منتداك
من لون خط الى خلفیه صوره الى صوره الهیدر و صوره الفوتر
فى البدایه قد نتخوف من الامر و لكنها فى الحقیقه سهله و بسیطه جدا فى الاستخدام
و فیما یلى سیتم شرح هذه المتغیرات فى ١٠ خطوات سهله .
الخطوه ١ : تغییر شعار المنتدى
أول شيء أرید أن أفعله ھو التخلص من شعار vBulletin و قد تم رفع الصوره التى تریدھا في مجلد الصور على السیرفر الخاص بك:
https://mwadah.com/images/imgcache/2009/11/73.jpg
بمجرد ما يتم رفع الصوره قم بتسجيل الدخول الى لوحه التحكم و اذهب الى"التحكم بالاستايلات"
ثم قم بالنقر على القائمه المنسدله بجوار الاستايل و اختار متغيرات الاستايل "StyleVars".
https://mwadah.com/images/imgcache/2009/11/74.jpg
من قائمه المتغيرات على اليسار اختار "titleimage".
و ادخل مسار صوره الشعار على السيرفر فى المستطيل وانقر على زر حفظ.
وستكون النتيجه كما يلى:
https://mwadah.com/images/imgcache/2009/11/75.jpg
كما ترون فان شعار vBulletin تم استبداله بالشعار الجديد و تلقائيا فان الطول و العرض يتناسب مع الخلفيه لكن لون و شكل الخلفيه لا يناسب الشعار.
مما يقودنا إلى الخطوة 2.
الخطوه 2 : تغيير خلفيه الهيدر
بعد ان تم اختيار الشعار فى الخطوه الاولى اتبع نفس الخطوات لكن اختار المتغير "header_background"
https://mwadah.com/images/imgcache/2009/11/76.jpg
كما تلاحظ فى الصوره بالاسفل فان صوره الخلفيه تم اختيارها بتدرج يناسب صوره الشعار و طبعا تناسب ارتفاعه ايضا
والنتيجة تبدو أفضل بكثير بعد ذلك من قبل :
https://mwadah.com/images/imgcache/2009/11/77.jpg
لا نريد التوقف عند هذا الحد
وبذلك ننتقل إلى الخطوة 3 : تغيير خلفيه الازرار.
الخطوة 3 : تغيير خلفيه الازرار.
على الرغم من ان الشعار و صوره التدرج للخلفيه يبدو متناسقين ولكن خلفيه الازرار تبدو غير متناسقه
يجب رفع صوره مناسبه ايضا ولتكن بنفس تدرج خلفيه الشعار
و اتبع نفس الخطوات لكن اختار المتغير "navbar_background"
https://mwadah.com/images/imgcache/2009/11/78.jpg
بعد وضع رابط الصوره المرفوعه اختار حفظ , و ستجد الشكل اصبح كما يلى:
https://mwadah.com/images/imgcache/2009/11/79.jpg
يمكنك التوقف هنا إذا كنت راضيا عن كيفية عرض الصفحة.
الخطوات التالية سوف تحدد اللمسات الصغيرة الأخرى التي يمكنك استخدامها لمزيد من تعديل مظهر المنتدى الخاص بك.
الخطوه 4 : تغيير خلفيه المنتدى
https://mwadah.com/images/imgcache/2009/11/80.jpg
بالنسبة لي كانت الخطوة التالية هي تغيير الخلفية.
لقد جعلت خلفيه الازرار قاتمه لكى اجعل خلفيه المنتدى بنفس لونها الغامق
و طبعا اتبع نفس الخطوات السابقه لتغيير الخلفيه مع اختيار المتغير "doc_backgroundColor" .
https://mwadah.com/images/imgcache/2009/11/81.jpg
هذا التغيير الصغيرة عمل فارق كبير فى شكل الصفحه
ولكن ، كان هناك مشكلة واحدة صغيرة.
الحدود بين الهيدر وجسم المنتدى هو لون مختلف.
انها لم تعد تتناسب مع الخلفية.
هذا يقودني مباشرة إلى الخطوة 5.
الخطوه 5 : تناسق الحد الفاصل بين الهيدر و جسم المنتدى مع الخلفيه
https://mwadah.com/images/imgcache/2009/11/82.jpg
لتصحيح هذا العيب الصغيرة على أسلوبي ، أنا اختارت المتغير "navbar_border" من القائمة على اليسار.
نزلت إلى "اللون" ، وبدلا من ادخال نفس رمز اللون فى الخطوة 4 ، اختارت خيار الشفافية او عدم وضع لون.
https://mwadah.com/images/imgcache/2009/11/83.jpg
الخطوه 6 : خلفيه رأس القسم
https://mwadah.com/images/imgcache/2009/11/84.jpg
لون الخلفيه لرأس القسم لا تبدو سيئه و لكنى اردت ان اضع خلفه صوره
و لعمل ذلك يجب اختيار المتغير "blockhead_background " و وضع رابط الصوره و الضغط على حفظ.
https://mwadah.com/images/imgcache/2009/11/85.jpg
بضغطه واحده اصبح لدى هذا الشكل:
https://mwadah.com/images/imgcache/2009/11/86.jpg
أبعاد صوره الخلفيه هي 935 × 50 بكسل.
الخطوه 7 : خلفيه زيل المنتدى
https://mwadah.com/images/imgcache/2009/11/87.jpg
يعد ان قمت بعمل الخلفيه لرأس القسم اردت ان اضيف صوره لزيل المنتدى ايضا
و لعمل ذلك اختار متغير "footer_background".
ستحتاج صوره بمقاس 32 × 935 بكسل.
https://mwadah.com/images/imgcache/2009/11/88.jpg
تكون النتيجه كما بالشكل التالى:
https://mwadah.com/images/imgcache/2009/11/89.jpg
من الواضح ان الروابط غير ظاهر و لونها غير مناسب
و لكن هذا يمكن حله بتغيير لون روابط زيل المنتدى كما سنشاهد فى الخطوه التاليه.
الخطوه 8 : تغيير لون روابط زيل المنتدى
من اجل تغيير رابط زيل المنتدى يجب ان تختار متغير " footer_link_color".
https://mwadah.com/images/imgcache/2009/11/90.jpg
بعد التدقيق فى الوان الصوره اختارت لون مناسب كما هو واضح فى الصوره:
https://mwadah.com/images/imgcache/2009/11/91.jpg
الخطوه 9 : تغيير خلفيه جسم المنتدى
https://mwadah.com/images/imgcache/2009/11/92.jpg
بعد كل هذه التغييرات اصبح لون خلفيه جسم المنتدى غير مناسب
ولتغييره اذهب الى متغير "body_background" و ضع اللون المناسب لك
و ستكون النتيجه كما يلى:
https://mwadah.com/images/imgcache/2009/11/93.jpg
الخطوه 10 : تغيير لون خلفيه زيل القسم
https://mwadah.com/images/imgcache/2009/11/94.jpg
كنت على وشك الانتهاء من الاستايل
ولكن لاحظت ان زيل الاقسام غير مناسب
فحصت المتغيرات وجدت انه يمكن تغيير خلفيه الزيل ايضا بصوره
من خلال هذا المتغير"blockfoot_backgro und"
أبعاد الصوره المناسبه هي 40 × 750 بكسل
https://mwadah.com/images/imgcache/2009/11/95.jpg
مثل ما فعلت فى الخلفيات السابقه اختارت الخانه التى بجانب "Background Image" و وضعت رابط الصوره
و ظهرت هكذا كما فى الصوره التاليه:
https://mwadah.com/images/imgcache/2009/11/96.jpg
و هذه هى اخر خطوه استخدمتها فى تصميم الاستايل.
ختاما
هذه المتغيرات التى تم استخدامها هى الاساسيه فى تصميم اى استايل
و لكن يوجد الكثير من المتغيرات تركتها لكم لكى تكتشفوها بانفسكم
وهى تجعل للاستايل الخاص بكم تميز عن غيره من الاستايلات باذن الله
بذلك يكون الدرس الاول فى هذا المجال انتهى
و اتمنى ان تكون الفكره وصلت ببساطه لكم و توضيح ان الامر اصبح اسهل من قبل
بالتوفيق للجميع
مرفق الكتاب كامل
========================= =========
الكتاب الاصلى لـ: vBulletin 4.0 Team
========================= =========
ترجمه raoaa
تقبلو خالص تحياتي
