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

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

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

و لكن سيكون الشرح مع نسخة الجيل الرابع ( 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

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

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

5- الخطوه الخامسه : تغيير لون حدود الجدول ليتوافق مع الخلفيه .

نذهب الى المتغير navbar_border

و نختار اللون المناسب لحدود جدول النافبار

ثم نضغط حفظ

6- الخطوة السادسة : تغيير اللون او الصورة اعلى الاقسام ( رأس الجدول ).

نذهب الى المتغير blockhead_background

ملحوظه :

1- اذا وضعت الخلفيه كصوره ينصح بعرض 935 * طول 50

2- اهم خطوه ان تجعل لون الخلفيه شفاف ( transparent )

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

7- الخطوة السابعة : تغيير اللون او خلفية الفوتر .

نذهب الى المتغير footer_background

و نفس الخطوات كما بالخطوة السابقة .

8- الخطوة الثامنه : تغيير لون خطوط الفوتر .

نذهب الى المتغير footer_link_color

و نختار اللون المناسب للاستايل

طبعا انا اخترت اللون الاحمر للتوضيح فقط

9- تغيير لون او شكل خلفية الاقسام .

نذهب الى المتغير body_background

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

تم تغيير لون الخلفية الى اللون الاصفر

ثم حفظ

10- تغيير لون خلفية اسفل الاقسام ( الفوتر ) .

نذهب الى المتغير blockfoot_background

ثم نضع رابط الصورة لتظهر كخلفية اسفل الجدول

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

الى هنا انتهى الدرس و بأمكانك ايضا التعديل على كل ما تراه من متغيرات و بنفس الطرق السابقه

( اسألكم الدعاء لى بالتوفيق )

يسمح بنقل الموضوع مع ذكر المصدر

أنا ملاحظ مستعجلين كثير على الفي بي 4 .. مع إنه .. النسخة الذهبية لم تصدر حتى الآن إنما تجربة فقط لا أكثر ولا أقل .

المشاركة الأصلية كتبت بواسطة متطور برمجي

أحسنت يا أبوأحمد على الشرح الجميل

:

تحياتي لك

شكرا لمرورك اخى مطور برمجى

المشاركة الأصلية كتبت بواسطة رب استجب دعاء

أنا ملاحظ مستعجلين كثير على الفي بي 4 .. مع إنه .. النسخة الذهبية لم تصدر حتى الآن إنما تجربة فقط لا أكثر ولا أقل .

اخى هذا الشرح ليس له علاقه اذا كانت النسخه بيتا ام ذهبيه

احسنت .. دوما متميز بطروحاتك الابداعية والمهمة
تمنياتي لك بالتوفيق ياغالي
تحياتي