كتاب و شرح طريقة تصميم ستايل styleات الجيل الرابع VBULLETIN G4 فى 10 خطوات

http://www.dzbatna.com/images/icons/idea.gif ظƒطھط§ط¨ ظˆ ط´ط±ط* طھطµظ…ظٹظ… ط³طھط§ظٹظ„ط§طھ ط§ظ„ط¬ظٹظ„ ط§ظ„ط±ط§ط¨ط¹ ظپظ‰ 10 ط®ط·ظˆط§طھ

---

بسم الله الرحمن الرحيم

تم بحمد الله الانتهاء من ترجمه كتاب "شرح طريقة تصميم ستايل styleات الجيل الرابع VBULLETIN G4 فى 10 خطوات"
الرابط الاصلى للكتاب الانجليزى من هنا

http://up.mtwer.com/files/2845.jpg



مقدمه:

http://up.mtwer.com/files/2819.jpg

بعد تثبیت المنتدى forum قد تحتاج الى اجراء بعد التغییرات على الاستایل الافتراضى للمنتدى لیناسب زوقك
یمكنك ذلك بسهوله من خلال تعدیل الاستایل و اختیار متغیرات الاستایل
متغیرات الاستایل تسمح لك بتغییر كل شئ فى منتداك
من لون خط الى خلفیه صوره الى صوره الهیدر و صوره الفوتر
فى البدایه قد نتخوف من الامر و لكنها فى الحقیقه سهله و بسیطه جدا فى الاستخدام
و فیما یلى سیتم شرح طريقة هذه المتغیرات فى ١٠ خطوات سهله .

الخطوه ١ : تغییر شعار المنتدى forum

أول شيء أرید أن أفعله ھو التخلص من شعار فيبويلتن في بي vBulletin و قد تم رفع الصوره التى تریدھا في مجلد الصور على السیرفر الخاص بك:
http://up.mtwer.com/files/2820.jpg

بمجرد ما يتم رفع الصوره قم بتسجيل الدخول الى لوحه التحكم و اذهب الى"التحكم بالاستايل styleات"
ثم قم بالنقر على القائمه المنسدله بجوار الاستايل style و اختار متغيرات الاستايل style "StyleVars".
http://up.mtwer.com/files/2821.jpg
من قائمه المتغيرات على اليسار اختار "titleimage".
و ادخل مسار صوره الشعار على السيرفر SERVER فى المستطيل وانقر على زر حفظ.
وستكون النتيجه كما يلى:
http://up.mtwer.com/files/2822.jpg
كما ترون فان شعار فيبويلتن في بي vBulletin تم استبداله بالشعار الجديد و تلقائيا فان الطول و العرض يتناسب مع الخلفيه لكن لون و شكل الخلفيه لا يناسب الشعار.
مما يقودنا إلى الخطوة 2.

الخطوه 2 : تغيير خلفيه الهيدر header

بعد ان تم اختيار الشعار فى الخطوه الاولى اتبع نفس الخطوات لكن اختار المتغير "header_background"
http://up.mtwer.com/files/2823.jpg

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

http://up.mtwer.com/files/2824.jpg

لا نريد التوقف عند هذا الحد
وبذلك ننتقل إلى الخطوة 3 : تغيير خلفيه الازرار.

الخطوة 3 : تغيير خلفيه الازرار.


على الرغم من ان الشعار و صوره التدرج للخلفيه يبدو متناسقين ولكن خلفيه الازرار تبدو غير متناسقه
يجب رفع صوره مناسبه ايضا ولتكن بنفس تدرج خلفيه الشعار
و اتبع نفس الخطوات لكن اختار المتغير "navbar_background"

http://up.mtwer.com/files/2825.jpg

بعد وضع رابط الصوره المرفوعه اختار حفظ , و ستجد الشكل اصبح كما يلى:

http://up.mtwer.com/files/2826.jpg

يمكنك التوقف هنا إذا كنت راضيا عن كيفية عرض الصفحة.
الخطوات التالية سوف تحدد اللمسات الصغيرة الأخرى التي يمكنك استخدامها لمزيد من تعديل مظهر المنتدى forum الخاص بك.

الخطوه 4 : تغيير خلفيه المنتدى forum


http://up.mtwer.com/files/2827.jpg

بالنسبة لي كانت الخطوة التالية هي تغيير الخلفية.
لقد جعلت خلفيه الازرار قاتمه لكى اجعل خلفيه المنتدى forum بنفس لونها الغامق
و طبعا اتبع نفس الخطوات السابقه لتغيير الخلفيه مع اختيار المتغير "doc_backgroundColor".

http://up.mtwer.com/files/2828.jpg

هذا التغيير الصغيرة عمل فارق كبير فى شكل الصفحه
ولكن ، كان هناك مشكلة واحدة صغيرة.
الحدود بين الهيدر header وجسم المنتدى forum هو لون مختلف.
انها لم تعد تتناسب مع الخلفية.
هذا يقودني مباشرة إلى الخطوة 5.

الخطوه 5 : تناسق الحد الفاصل بين الهيدر header و جسم المنتدى forum مع الخلفيه


http://up.mtwer.com/files/2829.jpg

لتصحيح هذا العيب الصغيرة على أسلوبي ، أنا اختارت المتغير "navbar_border" من القائمة على اليسار.
نزلت إلى "اللون" ، وبدلا من ادخال نفس رمز اللون فى الخطوة 4 ، اختارت خيار الشفافية او عدم وضع لون.

http://up.mtwer.com/files/2830.jpg

الخطوه 6 : خلفيه رأس القسم 


http://up.mtwer.com/files/2831.jpg

لون الخلفيه لرأس القسم لا تبدو سيئه و لكنى اردت ان اضع خلفه صوره
و لعمل ذلك يجب اختيار المتغير "blockhead_background" و وضع رابط الصوره و الضغط على حفظ.

http://up.mtwer.com/files/2832.jpg

بضغطه واحده اصبح لدى هذا الشكل:

http://up.mtwer.com/files/2833.jpg
أبعاد صوره الخلفيه هي 935 × 50 بكسل.

الخطوه 7 : خلفيه زيل المنتدى forum

http://up.mtwer.com/files/2834.jpg

يعد ان قمت بعمل الخلفيه لرأس القسم اردت ان اضيف صوره لزيل المنتدى forum ايضا
و لعمل ذلك اختار متغير "footer_background".
ستحتاج صوره بمقاس 32 × 935 بكسل.

http://up.mtwer.com/files/2835.jpg

تكون النتيجه كما بالشكل التالى:

http://up.mtwer.com/files/2836.jpg

من الواضح ان الروابط غير ظاهر و لونها غير مناسب
و لكن هذا يمكن حله بتغيير لون روابط زيل المنتدى forum كما سنشاهد فى الخطوه التاليه.

الخطوه 8 : تغيير لون روابط زيل المنتدى forum

من اجل تغيير رابط زيل المنتدى forum يجب ان تختار متغير " footer_link_color".

http://up.mtwer.com/files/2837.jpg

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

http://up.mtwer.com/files/2838.jpg

الخطوه 9 : تغيير خلفيه جسم المنتدى forum


http://up.mtwer.com/files/2839.jpg

بعد كل هذه التغييرات اصبح لون خلفيه جسم المنتدى forum غير مناسب
ولتغييره اذهب الى متغير "body_background" و ضع اللون المناسب لك
و ستكون النتيجه كما يلى:

http://up.mtwer.com/files/2840.jpg

الخطوه 10 : تغيير لون خلفيه زيل القسم

http://up.mtwer.com/files/2841.jpg

كنت على وشك الانتهاء من الاستايل style
ولكن لاحظت ان زيل الاقسام غير مناسب
فحصت المتغيرات وجدت انه يمكن تغيير خلفيه الزيل ايضا بصوره
من خلال هذا المتغير"blockfoot_background"
أبعاد الصوره المناسبه هي 40 × 750 بكسل

http://up.mtwer.com/files/2842.jpg

مثل ما فعلت فى الخلفيات السابقه اختارت الخانه التى بجانب "Background Image" و وضعت رابط الصوره
و ظهرت هكذا كما فى الصوره التاليه:

http://up.mtwer.com/files/2843.jpg

و هذه هى اخر خطوه استخدمتها فى تصميم الاستايل style.

ختاما

هذه المتغيرات التى تم استخدامها هى الاساسيه فى تصميم اى استايل style
و لكن يوجد الكثير من المتغيرات تركتها لكم لكى تكتشفوها بانفسكم
وهى تجعل للاستايل style الخاص بكم تميز عن غيره من الاستايل styleات باذن الله
بذلك يكون الدرس مفصل الاول فى هذا المجال انتهى



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


مرفق الكتاب كامل


==================================
الكتاب الاصلى لـ: فيبويلتن في بي vBulletin 4.0 Team
==================================
ترجمه raoaa
لمطور http://www.mtwer.com
وتوب لاين http://www.tl4s.com.sa
الموضوع الاصلى http://www.mtwer.com/vb/t16943.html
==================================

ألعاب الأندرويد مجانا و حصريا

الملفات المرفقة [TR]
http://www.traidnt.net/vb/images/attach/zip.gif vb4.skinning.forums.steps_raoaa_mtwer.com.zip (1.03 ميقابايت, عدد مرات المشاهدة 7663 مرة) [/TR]


https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©