شرح : تعديل الاستايل فى 10 خطوات بسيطه للنسخه vBulletin® v4.0.0

محروم.كوم · #1 03-16-2010, 12:50 AM

السلام عليكم و رحمة الله و بركاته

اليوم بمشيئة الله تعالى سنشرح طريقة تعديل الاستايل ليلائم اسلوب منتداك

و لكن سيكون الشرح مع نسخة الجيل الرابع ( vBulletin® v4.0.0 )

و طبعا كالعاده هذا الشرح حصرى لنادى دعم الفى بى

ملحوظه : الشرح مقتبص من كتاب تم طرحه و لكن باللغه الانجليزيه و قمت بتعريبه بحمد الله تعالى

لنلقى نظره اولا على الاستايل الافتراضى الذى يأتى مع النسخه

بسم الله نبدأ الشرح

1- الخطوة الاولى : تغيير شعار المنتدى ( اللوجو )

بالطبع كل شخص يريد تغيير الشعار او اللوجو الى لوجو منتداه الخاص و لكن ما هى الخطوات اللازمة لذلك

اولا : توجة الى لوحة تحكم المنتدى

ثم نضغط على Styles & Templates

ستظهر قائمه نختار منها Style Manager

ثم نختار الاستايل الذى نريد التعديل عليه طبعا انا انشأت استايل و اعطيته اسم D3M-VB Style v.4.0

كما بالصورة التاليه :

و من القائمه المنسدله بجانب اسم الاستايل نختار كما بالصوره StyleVars

ستفتح لنا قائمة فى الجهه اليسرى منها ستجد اسماء المتغيرات كما هو واصح بالصورة التاليه

و نختار منها المتغير titleimage

و نضع رابط الصوره و امتدادها طبعا بعد رفعها للمنتدى ثم نضغط حفظ

بالفعل تم تغيير اللوجو

و لكن طبعا الخلفيه غير ملاءمه لللوجو و لهذا سيتم تغيير لونها الى اللون الملائم و هذه هى الخطوة التاليه .

2- الخطوة الثانيه تغيير خلفية اللوجو ( Header ) :

من نفس القائمة اليسرى نختار المتغير header_background

ثم نختار اللون المناسب للهيدر و نضغط حفظ

تم تغيير لون الهيدر الان ننتقل للخطوة الثالثه و هى :

3- الخطوة الثالثه : تغيير خلفية النافبار ( navbar background )

نختار من القائمة اليسرى المتغير navbar_background

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

طبعا بامكانك عمل خلفية بالفوتوشوب او اى برنامج و لكن يجب مراعاة ان تكون الخلفيه بلا اى حدود

انا وضعت صوره كخلفية للنافبار

ملحوظه : يجب عمل اول مربع transparent ( شفاف ) حتى لا يؤثر على شكل الخلفية و عند وضع صوره يجب ايضا وضع امتدادها .

نضغط حفظ

تم التغيير بنجاح

4- الخطوة الرابعه : تغيير خلفية المنتدى كله .

نختار من القائمة اليسرى المتغير doc_backgroundColor

نختار اللون المناسب ثم نضغط حفظ

تم تغيير لون الخلفية كما واضح بالصورة السابقه
__DEFINE_LIKE_SHARE__