المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : تعديل استايل الجيل الرابع



حلال المشاكل
09 Nov 2012, 03:25 AM
السلام عليكم ورحمة الله وبركاته
اسعد الله اوقاتكم بكل خير
اليوم معنا درس جديد بشكله وبتقنيته وسبق وان تطرق بعض الاخوان لشرح بعض خصائصه
واليوم اقوم بشرحه خطوه خطوه وسوف يكون على مراحل وكل مرحلة برد حتى يتم استيعابه بشكل اوسع

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

الشروحات منقولة من المبدع ابو شدق جزاه الله خيرا

حلال المشاكل
09 Nov 2012, 03:35 AM
نبدا بتغير لون ارضية المنتدى
نتوجه الى لوحة التحكم
التحكم بالاستايلات
الاستايل المراد تعديله من القائمه نختار التالي (متغيرات الأستايل )

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)

والى هالحد نتوقف ونكمل برد ثاني لتغير خلفية الصفحه كامله

حلال المشاكل
09 Nov 2012, 03:36 AM
السلام عليكم

4 : تركيب الهيدر والمتغير header جيل رابع (http://www.new-style.ws/vb/thread53759.html)

ادخل لوحه تحكم الادارة

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

ثم من امام الاستيل الخاص بك

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



اليوم بإذن الله شرحنا على متغيرات الهيدر وما يخض الهيدر من اى متغير اخر

http://www.new-style.ws/upload/uploads/images/new-style-ws-d28c8a67f5.jpg


******************************

المتغير
titleimage
لتغيير اللوجو الخاص بالمنتدى

http://www.new-style.ws/upload/uploads/images/new-style-ws-52a4184c66.jpg


مثال
http://www.new-style.ws/upload/uploads/images/new-style-ws-505cb34234.jpg


******************************

المتغير
header_background
خلفية الهيدر

http://www.new-style.ws/upload/uploads/images/new-style-ws-29f54f4dc0.jpg

مثال

اللون الاخضر الذى اسفل الهيدر مباشره

http://www.new-style.ws/upload/uploads/images/new-style-ws-69d355dd06.jpg


ايضا نفس المتغير يؤثر على ما بالملف الشخصى كالاتى كما موضع بالاسهم

http://www.new-style.ws/upload/uploads/images/new-style-ws-4dd525970a.jpg



******************************

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

http://www.new-style.ws/upload/uploads/images/new-style-ws-9b21d0869f.jpg


مثال

http://www.new-style.ws/upload/uploads/images/new-style-ws-e46d7b04b2.jpg



******************************

المتغير
header_color
خاص بكلمه ( اهلا وسهلا ب )

http://www.new-style.ws/upload/uploads/images/new-style-ws-20b3ff4a6a.jpg


مثال كما فوق بجانب اسم العضو

http://www.new-style.ws/upload/uploads/images/new-style-ws-7da967e5df.jpg



******************************

المتغير
header_font
نوع الخط وحجم الخط وشكل الخط ف الهيدر فوق

http://www.new-style.ws/upload/uploads/images/new-style-ws-58b12632f7.jpg


مثال

http://www.new-style.ws/upload/uploads/images/new-style-ws-0ab5a765d5.jpg



******************************

المتغير
toplinks_input_login_backgroundColor
لون خلفية ( تسجيل الدخول )

http://www.new-style.ws/upload/uploads/images/new-style-ws-8b317e09ae.jpg


مثال

http://www.new-style.ws/upload/uploads/images/new-style-ws-5ebdfde734.jpg




******************************

المتغير
toplinks_form_input
تلوين اسم عضو العضو عند تسجيل الدخول كذلك كلمه السر

http://www.new-style.ws/upload/uploads/images/new-style-ws-ca407a18b1.jpg




******************************

المتغير

header_padding
الفاصل بين الناف بار والفورم هوم

http://www.new-style.ws/upload/uploads/images/new-style-ws-e8010171be.jpg


مثال :
الفاصل الاخضر المشار اليه بالاسهم كما بالصورة


http://www.new-style.ws/upload/uploads/images/new-style-ws-5d94455252.jpg




******************************

المتغير
bodyheader_margin

http://www.new-style.ws/upload/uploads/images/new-style-ws-e359b4b39d.jpg

مثال

http://www.new-style.ws/upload/uploads/images/new-style-ws-679096a093.jpg


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

http://www.new-style.ws/upload/uploads/images/new-style-ws-f163f81284.jpg



******************************

المتغير
toplinks_background

http://www.new-style.ws/upload/uploads/images/new-style-ws-8c0b7f28a7.jpg

مثال

http://www.new-style.ws/upload/uploads/images/new-style-ws-77c665742c.jpg



******************************

المتغير
toplinks_form_input_defaultValue
جعل لون كتابة اسم العضو وكلمه السر الشفافة باللون البنى

http://www.new-style.ws/upload/uploads/images/new-style-ws-27b17290bc.jpg

http://www.new-style.ws/upload/uploads/images/new-style-ws-6889fcdb5a.jpg



******************************

المتغير
toplinks_link_color
تغيير لون خطوط روابط الهيدر
http://www.new-style.ws/upload/uploads/images/new-style-ws-a177c78447.jpg

http://www.new-style.ws/upload/uploads/images/new-style-ws-7613513d47.jpg

http://www.new-style.ws/upload/uploads/images/new-style-ws-2bfce77931.jpg




******************************




المتغير
toplinks_linkhover_color
تغيير لون روابط الهيدر عند مرور الماوس عليها

http://www.new-style.ws/upload/uploads/images/new-style-ws-bc8c26811a.jpg



******************************

المتغيير
toplinks_text
تغير لون كلمه حفظ البيانات

http://www.new-style.ws/upload/uploads/images/new-style-ws-3439c7b678.jpg

http://www.new-style.ws/upload/uploads/images/new-style-ws-9374cd08e8.jpg


انتهى الدرس بفضل الله
عند النقل يرجى ذكر المصدر

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

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

ننتقل لجزئيه اخرى بالرد التالي

حلال المشاكل
09 Nov 2012, 03:36 AM
في النسخه Version 4.0.0 Release Candidate 2 جاء اضافه جميلة جدا وهي البلوكات اما يمين او يسار وهنا طريقة تعديله
نبحث عن
Sidebar
ونضيف التعديلات التالية على حسب المطلوب اما خلفيه او لون حسب الحاجه

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

ونشيك الحين

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

باقي لنا حد البلوكات وخلفية البلوك والحد الخارجي له والظل وسوف اوضحها بالصوره التاليه

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

نشوف الترقيم الحين كل هالخصائص تابعه للبلوكات

1= الحد الخارجي للبلوك
2= الخلفيه التي توجد بها المواضيع وغيرها بمعنى ارضية البلوك
3= الحد الخارجي لارضية البلوك
4= لون الخط بخلفية البلوك
5= خلفية اسفل البلوك
6= ارتفاع اسفل البلوك
7= عرض الصوره الرمزية للعضو
8= لون الخط داخل اعلى البلوك
9= عرض البلوك

وبكذا خلصنا البلوكات

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

حلال المشاكل
09 Nov 2012, 03:37 AM
نبحث عن forumhead_background

وتفتح لنا النافذه التالية ونعدل على حسب الذوق طبعا انا حطيت خلفية للارضيه

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

وهذا شكله بعد التغيير

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


بقي لنا الحد ولون الخط ولون الخلفيه التي باسفل الاقسام وهي كالتالي

الحد نبحث عن
forumhead_border

لون الخط نبحث عن

Forumhead_color

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

forumhead_font

منحنى راس الاقسام

forumhead_top_corner_radius

العرض

forumhead_width

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

حلال المشاكل
09 Nov 2012, 03:37 AM
نبحث عن Forum/Thread Information and Options Background
نقوم بتغيير اللون واذا اردت خلفيه بامكانك وضع خلفيه كالتالي

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

ونشيك على شغلنا وهذي مواقعه بالاستايل

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

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

ايضا نبحث عن foruminfo_header_background لتغيير هيدر خيارات عرض المواضيع والاقسام اسفل المنتدى وهذا مكانه

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

نقوم بتغيير اللون او الخلفيه كالمتبع

وهنا تغيير الحدود ولون الخط وسوف اقوم بشرحها حسب الارقام بالصوره التاليه

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

ننتقل لجزئيه اخرى بالرد التالي ان شاء الله

حلال المشاكل
09 Nov 2012, 03:38 AM
ادوات الاقسام + ادوات الموضوع نبحث عن ToolsMenu
هذا مواقعه

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

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

ونغير اللون والخلفيه

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

وباقي الحد وتغير لون ونوعه والانحناء مرقمه بالشكل التالي

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

1= حد الخفيه
2= انحناء الخلفيه مثل نحطه 5px
3= لون الخط
4= نوع الخط

ونلتقي بجزئيه اخرى بالرد التالي

حلال المشاكل
09 Nov 2012, 03:38 AM
خلفية الاقسام بالصفحه الرئيسية للمنتدى هذا مهم للغاية

هذي خلفية الاقسام الرئيسية بالصفحة الرئيسية للمنتدى وراح اشرح شرح مبسط

الجيل الرابع فيه هالميزه الرهيبه مثلا

عندك اقسام المنتدى والي تظهر بالرئيسية للمنتدى
مثلا عندك اربعه اقسام رئيسية تحتها اقسامها الاساسية
فاللي صاير هنا ان اول قسم من القسم الرئيسي له لون وباقي الاقسام له ثاني
هذي صوره توضح لنا

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

طيب نبي المتغير الخاص باللون الاول
نبحث عن frumrow_firstentry_background ونغير فيه كالعاده

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

نجي للون الثاني او القسم الثاني
نبحث عن هالمتغير
frumrow_background

ونغير مثل العاده اللون او الخلفيه
وتنتهي هذي الجزئية وننتقل لجزئية اخرى برد اخر ان شاء الله

حلال المشاكل
09 Nov 2012, 03:39 AM
خلفية احصائيات المنتدى بالرئيسية تغير خلفية احصائيات المنتدى بالصفحه الرئيسية للمنتدى
نبحث
SecondaryContent

http://www.aboshdg.net/up/uploads/thumbs/aboshdg-b35c7b85da.gif (http://www.aboshdg.net/up/uploads/images/aboshdg-b35c7b85da.gif)
بعد مانغير اللون نشيك وهذا مكانه

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

نشوف بعده الحد ولون الخط ونوع الخط وهي بالخيارات التاليه

http://upload.traidnt.net/upfiles/AGG41363.gif

شرح الارقام
1= حد مربع الاحصائيات كامل
2= اعلى الاحصائيات التي يوجد بها كلمة احصائيات المنتدى وهذي صورتها للتوضيح

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

3= حد اعلى الاحصائيات
4= لون الخط باعلى الاحصائيات
5= نوع الخط باعلى الاحصائيات
6= نوع الخط وحجمه بعناوين الاحصائيات مثل المتواجدون الان وهذي صوره توضحه

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

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

حلال المشاكل
09 Nov 2012, 03:39 AM
قالب البوست بت والبوست لقاسي (المواضيع والمشاركات) بالجيل الرابع من الفيبلتون صار التحكم بقالبي البوست بت والبوست لقاسي من خيارات الاستايل
خيارات css ونقدر نعدل عليه ووضع خلفيات مطابقه للمعايير القياسيه ميه بالميه وهذي ميزه جيده
نبدأ بالتغيير الان بالمتغير الاول وهو
post_title_font
عنوان الموضوع بالمشاركه الاولى وهذا مثال عليه

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

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

postbit_avatar_maxSize

مقاسات الصوره الرمزيه للعضو وتحدد ارتفاعها من هنا وهذي ميزه يمكن تمنع بعض الصور الرمزيه الي ارتفاعه كيلو ونصف http://www.aboshdg.com/vb/images/smilies/regular_smile.gif

المتغير الثالث

Postbit_background

وهذي خلفية الموضوع نفسه وهنا نقدر نضيف خلفيه للموضوع اي صوره ولا لون
ميزه رائعه جدا واعتقد معروفه ماتبي صوره له

المتغير الثالث

postbit_border
حدود منطقة الموضوع والمشاركه وهذي صوره تحدده

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

المتغير الرابع
Postbit_boxed_background
وهو خلفية خانة اخر تعديل والمرفقات وملحقاتها نعدل على اللون والخلفيه كالمعتاد
وهذا شكله بعد التغيير

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

طبعا انا غيرت الحدود ونوع الخط وشكله وبعده بالمتغيرات التاليه :
Postbit_boxed_border= الحدود
Postbit_boxed_fontsize= حجم الخط
Postbit_boxed_padding= ازاحته عن المشاركه من جميع الجهات (اعلى-اسفل-يمين-يسار)

المتغير الخامس
Postbit_color
لون الخط بالمشاركات بمعنى لون كتابة الموضوع والمشاركات

المتغير السادس
Postbit_control_background
وهذا المتغير خاص بلون ازرار البوست بت وهذا شكله

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

والمتغيرت الخاصه بالازرار شرحها بالصوره التاليه

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

شرح الارقام
1= لون الخط بالازرار
2= نوع الخط للازرار
3= لون خلفية الازرار اثناء وضع المؤشر عليها
4= نوع الخط للازرار اثناء وضع المؤشر عليها
5= لون الخلفيه اثناء عملية الحذف

المتغير السابع
Postbit_font
نوع الخط للمواضيع والمشاركات

المتغير الثامن
Postbit_foot_background
خلفية نهاية البوست بت او المشاركات وهذي صوره توضيحيه

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

المتغير التاسع
Postbit_font
نوع الخط للمواضيع والمشاركات

المتغير الثامن
Postbit_hover_background
الصدز مادري وش تبي ذي http://www.aboshdg.com/vb/images/smilies/regular_smile.gif

المتغير العاشر
Postbit_msg_font
نوع خط محتى المشاركات

المتغير الحادي عشر
Postbit_userinfo_background
خلفية معلومات العضو وهنا تقدر تضيف لون او خلفيه وميزه جيده برضو وهذي صورته

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

المتغير الثاني عشر
Postbit_userinfo_border
الحد لمعلومات العضو

المتغير الثالث عشر
Postbithead_background
خلفية هيدر البوست بت وهالصوره توضحه

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

المتغير الرابع عشر
postbithead_border
حد الهيدر
المتغير الخامس عشر
postbithead_color
لون الخط بهيدر البوست بت
المتغير السادس عشر
postbithead_font
نوع ومقاس وشكل الخط بهيدر البوست بت

المتغير السابع عشر
postbitlegacy_avatar_border
حد الصوره الرمزيه للعضو

المتغير الثامن عشر
postbitlegacy_avatar_outline
الحد الخارجي للصوره الرمزيه للعضو

وهذي صوره توضح الحدين

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

السهم الازرق الحد الداخلي الي هو الخيار
postbitlegacy_avatar_border
السهم الاحمر الحد الخارجي الي هو الخيار
postbitlegacy_avatar_outline

المتغير التاسع عشر
postbithead_font
نوع ومقاس وشكل الخط بهيدر البوست بت
المتغير العشرون
Postbitlegacy_userinfo_width
عرض معلومات العضو في البوست لقاسي

المتغير الحادي والعشرون
postfoot_separator_color
هذا لون الخط الفاصل بين الازرار وهذي صوره توضحه

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

المتغير الثاني والعشرون
postfoot_separator_width
عرض الخط الفاصل بين الازرار

الى هنا ننهي البوست بت والله ولي التوفيق ولنا موعد بجزئية اخرى ان شاء الله تعالى

حلال المشاكل
09 Nov 2012, 03:40 AM
القوائم المنسدله (ادوات الموضوع - خيارات الموضوع-البحث وغيرها)
نبحث عن المتغير
PopupMenus


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

وسوف ارقمها بالصور واشرحها حسب ترقيمها

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

الترقيم
1= الخلفيه المتنقله بمعنى تمشي مع المؤشر
2= ارضية القوائم وهاللي ملونه بالاسود بالصوره التاليه

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

3= الحد الخارجي للقائمه
4= منحنى ازرة التحكم بالمواضيع وخيارات الرقابه وهذي صورها

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

نلاحظ المنحنى وضعته 5px
5= نوع الخط بالقوائم
6= ابعاد القائمه عن الجسم

وننتقل الى جزئية اخرى بإذن الله

حلال المشاكل
09 Nov 2012, 03:40 AM
تغير الناف بار navbar نبحث عن المتغير
NavBar

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

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

سوف اشرح المهم به والباقي راح تعرفونه بالتطبيق
نبدأ بالخيار الاول وهو ارضية الناف بار

المتغير

navbar_background

موضعه

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

الخيار الثاني

navbar_font
نغيره الى اي نوع خط تبيه وهذا شكله

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

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

navbar_link_color

لون الرابط بالناف بار وهي المشاركات الجديده والرسائل الخاصه وغيرها

navbar_linkhover_color

لون عندما تضع المؤشر على الرابط

navbar_padding

حواف او زوايا الناف بار

navbar_popup_link_background

هذي خلفية القائمه المنسدله من التنبهات وهذا مثال عليه

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

الي ملونه باللون الاحمر

navbar_selected_popup_body_a_Color

لون الخط داخل القائمه المنسدله

navbar_tab_background

ارضية القوائم الي فيها مربع البحث وخلافه

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

الملونه بالاحمر

navbar_tab_bevel

هذا البروز تحت الخلفيه وهذا موقعه وتاثيره

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

navbar_tab_border

حدود التاب

navbar_tab_color

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

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

اللون الاحمر هو لوننا الي غيرناه

navbar_tab_font

نوع الخط لخوينا الي وضحناه

navbar_tab_linkhover_color

هذا لون الخط للتاب المفعل

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

المحدد عليه بالاسود

navbar_tab_selected_background

هذا لون الخلفيه للتاب المفعل وتقدر تغير اللون لما يتناسب مع لون درجات ستايلك من دون ماتغير الخلفيه ويطلع شكله جميل
وهذا شكله بعد التغيير وانا ركبت لون ونلاحظ وشلون يتغير الحد العلوي للتاب

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

navbar_tab_selected_top_width

ارتفاع التاب المفعل بعد مانضغط عليه نحصل الافتراضي له 4 ونقدر نزيد او نقلل

وانا ابزيده حتى يوضح بس وابحطه عشره وهذا شكله

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

navbar_tab_size

مقاس التاس بالعرض والارتفاع

navbarsearch_borderWidth

عرض حدود المربع الخاص بالبحث

navbar_tab_size

مقاس التاس بالعرض والارتفاع

navbarsearch_input_bordercolor
لون المستطيل الخاص بالبحث

navbarsearch_padding

ابعاد مربع البحث من اعلى الناف بار

searchbox_size

مقاس مربع البحث

ينصح بعدم تحديد عرض ويكتفي بالارتفاع حتى مايتشوه المنظر

الى هذا الحد وننتقل الى جزئية اخرى بإذن الله تعالى

حلال المشاكل
09 Nov 2012, 03:46 AM
وحيث تم التعديل في النسخ الاحقة 4.8 حتى 4.2 ارفق لكم ملف يوجد فيه التغييرات التي حصلت

بنت ابوى
12 Nov 2012, 06:13 PM
الله يعطيك العافية يا حلال المشاكل

عشق الماضي
02 Mar 2013, 03:47 PM
تسلم يمينك خيوو
كل الشكر لك