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

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


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

تم تغيير لون الخلفية كما واضح بالصورة السابقه
- الخطوه الخامسه : تغيير لون حدود الجدول ليتوافق مع الخلفيه .
نذهب الى المتغير navbar_border

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

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

ملحوظه :
1- اذا وضعت الخلفيه كصوره ينصح بعرض 935 * طول 50
2- اهم خطوه ان تجعل لون الخلفيه شفاف ( transparent )
ثم تضع رابط الصوره و لا تنسى امتدادها ثم حفظ

7- الخطوة السابعة : تغيير اللون او خلفية الفوتر .
نذهب الى المتغير footer_background

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

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

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

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

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

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

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

- تغيير لون او شكل خلفية الاقسام .
نذهب الى المتغير body_background

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

تم تغيير لون الخلفية الى اللون الاصفر
ثم حفظ
10- تغيير لون خلفية اسفل الاقسام ( الفوتر ) .
نذهب الى المتغير blockfoot_background

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

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