شرح : تعديل الاستايل للنسخه 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 ( شفاف ) حتى لا يؤثر على شكل الخلفية و عند وضع صوره يجب ايضا وضع امتدادها .


نضغط حفظ





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

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

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





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





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


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



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







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



ثم نضغط حفظ







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



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







ملحوظه :



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



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



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

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




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











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











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





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











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





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

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


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





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





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


ثم حفظ


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


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





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





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



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