التعديل ع استايل vb 4

[الشبح]

السلام عليكم ورحمة الله وبركاته
اسعد الله اوقاتكم بكل خير
اليوم معنا درس جديد بشكله وبتقنيته وسبق وان تطرق بعض الاخوان لشرح بعض خصائصه
واليوم اقوم بشرحه خطوه خطوه وسوف يكون على مراحل وكل مرحلة برد حتى يتم استيعابه بشكل اوسع
نعلم ماهو التغيير الجذري الذي حصل على ستايلات الجيل من نسخ المنتديات vBulletin™
Version 4.0.0
واعتمادها الكلي على لغة css3 وفترة الجدوال انتهت
طبعا بعد تمحيصي للاستايل وقمت بعمل ستايلين وجدت انه اكثر بالخطوات لكن امر سلس وومتع بنفس الوقت
طبعا بالنسخ السابقه كان اغلب القوالب مرتبطه بعضها البعض
فمثلا الاقسام الرئيسية بجميع المنتدى متغير واحد نضعه ويتغير
الان الوضع مختلف وقاموا بتجزئته
فالصفحه الرئيسية FORUMHOME لها خياراتها وكل جزء له خياراته طبعا البعض يبي خطواته كثيره وتبي تتعب
اقوله لا الامر بسيط بس يبي شوية روقان وبراد شاهي
الاوامر متسلسله تحت بعض يعني ماتبي صقع مشاوير
قوالب المواضيع postbit و postbit_legacy لها خياراتها الخاصه وتقدر تتصرف بالوانها والخلفيات كما تشاء وبأبسط الطرق
حبيت اكتب هالمقدمه حتى نبسط الامور ونتأهب للشغل
طبعا انا شرحي هذا لتغيير الالوان لجميع الاستايل وتغير صورة اللوقو وخلفية الهيدر
بسم الله نبدأ

نبدا بتغير لون ارضية المنتدى
نتوجه الى لوحة التحكم
التحكم بالاستايلات
الاستايل المراد تعديله من القائمه نختار التالي (متغيرات الأستايل )

http://www.aboshdg.net/up/uploads/images/aboshdg-f752d28f30.gif (http://www.aboshdg.net/up/uploads/images/aboshdg-f752d28f30.gif)

تخرج لنا هالنافذه

http://www.aboshdg.net/up/uploads/images/aboshdg-00db95eeba.gif (http://www.aboshdg.net/up/uploads/images/aboshdg-00db95eeba.gif)

هالقائمه هي الي نبي نشتغل عليه كاملا لتعديل الاستايل

هالحين نبي نغير ارضية المنتدى

نبحث عن body_background اما ان نكتب هذه الجمله في المستطيل بالاعلى او نبحث عنه من القائمه تخرج النافذه التاليه
(اضغط على الصوره لرؤيتها بحجمها الطبيعي)

http://www.aboshdg.net/up/uploads/thumbs/aboshdg-5a56705816.gif (http://www.aboshdg.net/up/uploads/images/aboshdg-5a56705816.gif)

نعمل مثل مافي الصوره ونعمل حفظ ونشيك عليه الان
(اضغط على الصوره لرؤيتها بحجمها الطبيعي)

http://www.aboshdg.net/up/uploads/thumbs/aboshdg-3977f79254.gif (http://www.aboshdg.net/up/uploads/images/aboshdg-3977f79254.gif)

نلقاه تغير تمام

نجي الان لسلاسلة العمل

نلاحظ الصوره التالية ورقمتها انا 1 و 2 و3

http://www.aboshdg.net/up/uploads/images/aboshdg-ab484698f8.gif (http://www.aboshdg.net/up/uploads/images/aboshdg-ab484698f8.gif)

رقم 1 هي لون الخلفيه الي غيرناه قبل شوي

رقم 2 هذا لون الخط لنفس الخلفيه الي غيرناه وهذا الي مخلي السلاسله

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

http://www.aboshdg.net/up/uploads/images/aboshdg-0a121a73f7.gif (http://www.aboshdg.net/up/uploads/images/aboshdg-0a121a73f7.gif)


تركيب الشعار وخلفية الهيدر

وتعديل الوان وخطوط الهيدر

بمتغير header

http://www.new-style.ws/vb/up/vb4/4/Untitled-1.jpg

http://www.new-style.ws/vb/up/vb4/4/Untitled-2.jpg


نختار المتغير

titleimage

http://www.new-style.ws/vb/up/vb4/4/Untitled-3.jpg



1- نضغط عليه دبل كلك


2- نضع اسم المجلد ورابط شعار الموقع



لمشاهدته بعد التركيب




http://www.new-style.ws/vb/up/vb4/4/Untitled-4.jpg

الان تركيب خلفية الهيدر



من المتغير



header_background



http://www.new-style.ws/vb/up/vb4/4/Untitled-5.jpg

1- نغضط عليه دبل كلك


2 - نختار لون الخلفيه طبعاً راح يظهر هذا الون معك اسفل صورة الهيدر مباشره

يعني راح يملء الهيدر

3- نضع اسم المجلد و اسم صورة الخلفيه

مثال ما قام به من تغيير

http://www.new-style.ws/vb/up/vb4/4/Untitled-6.jpg



header_border


هذا الخيار عندي انا غير مهم هو وضع اطار حول جدول الهيدر

طبعاً في الستايل الرسمي مو حاطين شي لكن الموضوع هو لتعليم تصميم ستايل


خلينا نحط فيه بعض المعلومات علشان نشوف تاثيره



http://www.new-style.ws/vb/up/vb4/4/Untitled-7.jpg




http://www.new-style.ws/vb/up/vb4/4/Untitled-8.jpg


تم وضع اطار حول الهيدر


انا راح امسحه علشان نكمل التصميم


المتغير


header_color

هذا الخيار لتغير لون الخط في الهيدر


http://www.new-style.ws/vb/up/vb4/4/Untitled-9.jpg



مثال بعد تغير لون الخط


http://www.new-style.ws/vb/up/vb4/4/Untitled-10.jpg



المتغير

header_font

هذا الخيار لتغير نوع الخط وحجم وشكل الخط


http://www.new-style.ws/vb/up/vb4/4/Untitled-11.jpg



طبعا خط تهوما هو المفضل لدي واحب اني اضعه


وجعلت الخط عريض مثال بعد التغير


http://www.new-style.ws/vb/up/vb4/4/Untitled-12.jpg

المتغير

toplinks_input_login_backgroundColor

لون خلفية زر تسجيل الدخول


http://www.new-style.ws/vb/up/vb4/4/Untitled-13.jpg


http://www.new-style.ws/vb/up/vb4/4/Untitled-14.jpg


راح يوضح معك عندما تقوم بتسجيل الخروج من المنتدى


المتغير

toplinks_form_input

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


http://www.new-style.ws/vb/up/vb4/4/Untitled-15.jpg

مثال

http://www.new-style.ws/vb/up/vb4/4/Untitled-16.jpg




المتغير
header_padding

هذا المتغير خاص في حواف الهيدر وجعل بينها مساحه

بحسب اختيارك

http://www.new-style.ws/vb/up/vb4/4/Untitled-17.jpg


طبعا راح اغير رقم 10 الى صفر علشان ما يكون فيه فراغ
قبل


http://www.new-style.ws/vb/up/vb4/4/Untitled-18.jpg


بعد التغير الى رقم صفر


http://www.new-style.ws/vb/up/vb4/4/Untitled-19.jpg

تغير ارضية المنتدى
نبحث عن هالمتغير
doc_background
ومثل ماغيرنا الـ body نغير الارضيه ونشيك عليه

http://www.aboshdg.net/up/uploads/thumbs/aboshdg-ba48f20d5c.gif (http://www.aboshdg.net/up/uploads/images/aboshdg-ba48f20d5c.gif)

[خ ــادم الإسلام]

ممتاز بارك الله فيك
لا هنت ع النقل

[الشبح]

يسلموا ابو حنين

[عذوووب]

السلام عليكم

css3

نعم انها لغة العصر في التوزيع للاستايلات

برغم سهولتها الا انها تفتقد لرونق القوالب المعتاده

شكرا سيدي على هذا الشرح

[الشبح]

السلام عليكم

css3

نعم انها لغة العصر في التوزيع للاستايلات

برغم سهولتها الا انها تفتقد لرونق القوالب المعتاده

شكرا سيدي على هذا الشرح

بالفعل هي لغة العصر
ولكن كل التقدير لك انت سيدي:9:

[فيروس خائف]

يسلمو

[DigiChat Man]

بارك الله فيك حبيبى

[ήsέť άήsάќ]

الله يعطيك العافية يا الغالي :9:

و في انتضار جديدك الرائع ,,