شرح تصميم استايل الجيل الرابع خطوة خطوة
السلام عليكم ورحمة الله وبركاته
اسعد الله اوقاتكم بكل خير
طبعا انا شرحي هذا لتغيير الالوان لجميع الاستايل وتغير صورة اللوقو وخلفية الهيدر
بسم الله نبدأ
____________________________
1 _ تغيير اللوقو وتعديل الهيدر + تغيير لون ارضية المنتدى
نبدا بتغير لون ارضية المنتدى
نتوجه الى لوحة التحكم
التحكم بالاستايلات
الاستايل المراد تعديله من القائمه نختار التالي (متغيرات الأستايل )
تخرج لنا هالنافذه
هالقائمه هي الي نبي نشتغل عليه كاملا لتعديل الاستايل
هالحين نبي نغير ارضية المنتدى
نبحث عن body_background اما ان نكتب هذه الجمله في المستطيل بالاعلى او نبحث عنه من القائمه تخرج النافذه التاليه
(اضغط على الصوره لرؤيتها بحجمها الطبيعي)
نعمل مثل مافي الصوره ونعمل حفظ ونشيك عليه الان
(اضغط على الصوره لرؤيتها بحجمها الطبيعي)
نلقاه تغير تمام
نجي الان لسلاسلة العمل
نلاحظ الصوره التالية ورقمتها انا 1 و 2 و3
رقم 1 هي لون الخلفيه الي غيرناه قبل شوي
رقم 2 هذا لون الخط لنفس الخلفيه الي غيرناه وهذا الي مخلي السلاسله
بمعنى انه اي خلفيه نبي نغير لونه بالاستايل راح نلقى بالاغلب اسفله لون الحد وحجمه ولون الخط
رقم 3 حجم الانحناء والصوره توضح معنى كلامي
والى هالحد نتوقف ونكمل برد ثاني لتغير خلفية الصفحه كامله
تركيب الشعار وخلفية الهيدر
وتعديل الوان وخطوط الهيدر
بمتغير header
نختار المتغير
imagepaths
ثم
titleimage
1- نضغط عليه دبل كلك
2- نضع اسم المجلد ورابط شعار الموقع
الان تركيب خلفية الهيدر
من المتغير
header
ثم
header_background
1- نغضط عليه دبل كلك
2 - نختار لون الخلفيه طبعاً راح يظهر هذا الون معك اسفل صورة الهيدر مباشره
يعني راح يملء الهيدر
3- نضع اسم المجلد و اسم صورة الخلفيه
المتغير
header_color
هذا الخيار لتغير لون الخط في الهيدر
طبعا خط تهوما هو المفضل لدي واحب اني اضعه
وجعلت الخط عريض مثال بعد التغير
المتغير
toplinks_input_login_backgroundColor
لون خلفية زر تسجيل الدخول
المتغير
header_padding
هذا المتغير خاص في حواف الهيدر وجعل بينها مساحه
بحسب اختيارك
طبعا راح اغير رقم 10 الى صفر علشان ما يكون فيه فراغ
قبل
تغير ارضية المنتدى
نبحث عن هالمتغير
doc_background
ومثل ماغيرنا الـ body نغير الارضيه ونشيك عليه
في النسخه Version 4.0.0 Release Candidate 2 جاء اضافه جميلة جدا وهي البلوكات اما يمين او يسار وهنا طريقة تعديله
نبحث عن
Forum Sidebar Background
ونضيف التعديلات التالية على حسب المطلوب اما خلفيه او لون حسب الحاجه
ونشيك الحين
باقي لنا حد البلوكات وخلفية البلوك والحد الخارجي له والظل وسوف اوضحها بالصوره التاليه
نشوف الترقيم الحين كل هالخصائص تابعه للبلوكات
1= الحد الخارجي للبلوك
2= الخلفيه التي توجد بها المواضيع وغيرها بمعنى ارضية البلوك
3= الحد الخارجي لارضية البلوك
4= لون الخط بخلفية البلوك
5= خلفية اسفل البلوك
6= ارتفاع اسفل البلوك
7= عرض الصوره الرمزية للعضو
8= لون الخط داخل اعلى البلوك
9= عرض البلوك
وبكذا خلصنا البلوكات
نبحث عن forumhead_background
وتفتح لنا النافذه التالية ونعدل على حسب الذوق طبعا انا حطيت خلفية للارضيه
وهذا شكله بعد التغيير
بقي لنا الحد ولون الخط ولون الخلفيه التي باسفل الاقسام وهي كالتالي
الحد نبحث عن
forumhead_border
لون الخط نبحث عن
Forumhead_color
لتغير نوع الخط نبحث عن
forumhead_font
منحنى راس الاقسام
forumhead_top_corner_radius
العرض
forumhead_width
نبحث عن Forum/Thread Information and Options Background
نقوم بتغيير اللون واذا اردت خلفيه بامكانك وضع خلفيه كالتالي
ونشيك على شغلنا وهذي مواقعه بالاستايل
ايضا نبحث عن foruminfo_header_background لتغيير هيدر خيارات عرض المواضيع والاقسام اسفل المنتدى وهذا مكانه
نقوم بتغيير اللون او الخلفيه كالمتبع
وهنا تغيير الحدود ولون الخط وسوف اقوم بشرحها حسب الارقام بالصوره التاليه
ادوات الاقسام + ادوات الموضوع
هذا مواقعه
ونغير اللون والخلفيه
وباقي الحد وتغير لون ونوعه والانحناء مرقمه بالشكل التالي
1= حد الخفيه
2= انحناء الخلفيه مثل نحطه 5px
3= لون الخط
4= نوع الخط
خلفية الاقسام بالصفحه الرئيسية للمنتدى
هذا مهم للغاية
هذي خلفية الاقسام الرئيسية بالصفحة الرئيسية للمنتدى وراح اشرح شرح مبسط
الجيل الرابع فيه هالميزه الرهيبه مثلا
عندك اقسام المنتدى والي تظهر بالرئيسية للمنتدى
مثلا عندك اربعه اقسام رئيسية تحتها اقسامها الاساسية
فاللي صاير هنا ان اول قسم من القسم الرئيسي له لون وباقي الاقسام له ثاني
هذي صوره توضح لنا
طيب نبي المتغير الخاص باللون الاول
نبحث عن frumrow_firstentry_background ونغير فيه كالعاده
نجي للون الثاني او القسم الثاني
نبحث عن هالمتغير
frumrow_background
ونغير مثل العاده اللون او الخلفيه
خلفية احصائيات المنتدى بالرئيسية
تغير خلفية احصائيات المنتدى بالصفحه الرئيسية للمنتدى
نبحث wgo_background
بعد مانغير اللون نشيك وهذا مكانه
نشوف بعده الحد ولون الخط ونوع الخط وهي بالخيارات التاليه
شرح الارقام
1= حد مربع الاحصائيات كامل
2= اعلى الاحصائيات التي يوجد بها كلمة احصائيات المنتدى وهذي صورتها للتوضيح
3= حد اعلى الاحصائيات
4= لون الخط باعلى الاحصائيات
5= نوع الخط باعلى الاحصائيات
6= نوع الخط وحجمه بعناوين الاحصائيات مثل المتواجدون الان وهذي صوره توضحه
الان تقريبا خلصنا الرئيسية كامله باقي لنا صفحة الاقسام والمواضيع وقالب البوست بت والملف الشخصي
قالب البوست بت والبوست لقاسي (المواضيع والمشاركات)
بالجيل الرابع من الفيبلتون صار التحكم بقالبي البوست بت والبوست لقاسي من خيارات الاستايل
خيارات css ونقدر نعدل عليه ووضع خلفيات مطابقه للمعايير القياسيه ميه بالميه وهذي ميزه جيده
نبدأ بالتغيير الان بالمتغير الاول وهو
post_title_font
عنوان الموضوع بالمشاركه الاولى وهذا مثال عليه
المتغير الثاني
postbit_avatar_maxSize
مقاسات الصوره الرمزيه للعضو وتحدد ارتفاعها من هنا وهذي ميزه يمكن تمنع بعض الصور الرمزيه الي ارتفاعه كيلو ونصف
المتغير الثالث
Postbit_background
وهذي خلفية الموضوع نفسه وهنا نقدر نضيف خلفيه للموضوع اي صوره ولا لون
ميزه رائعه جدا واعتقد معروفه ماتبي صوره له
المتغير الثالث
postbit_border
حدود منطقة الموضوع والمشاركه وهذي صوره تحدده
المتغير الرابع
Postbit_boxed_background
وهو خلفية خانة اخر تعديل والمرفقات وملحقاتها نعدل على اللون والخلفيه كالمعتاد
وهذا شكله بعد التغيير
طبعا انا غيرت الحدود ونوع الخط وشكله وبعده بالمتغيرات التاليه :
Postbit_boxed_border= الحدود
Postbit_boxed_fontsize= حجم الخط
Postbit_boxed_padding= ازاحته عن المشاركه من جميع الجهات (اعلى-اسفل-يمين-يسار)
المتغير الخامس
Postbit_color
لون الخط بالمشاركات بمعنى لون كتابة الموضوع والمشاركات
المتغير السادس
Postbit_control_background
وهذا المتغير خاص بلون ازرار البوست بت وهذا شكله
والمتغيرت الخاصه بالازرار شرحها بالصوره التاليه
شرح الارقام
1= لون الخط بالازرار
2= نوع الخط للازرار
3= لون خلفية الازرار اثناء وضع المؤشر عليها
4= نوع الخط للازرار اثناء وضع المؤشر عليها
5= لون الخلفيه اثناء عملية الحذف
المتغير السابع
Postbit_font
نوع الخط للمواضيع والمشاركات
المتغير الثامن
Postbit_foot_background
خلفية نهاية البوست بت او المشاركات وهذي صوره توضيحيه
المتغير التاسع
Postbit_font
نوع الخط للمواضيع والمشاركات
المتغير الثامن
Postbit_hover_background
الصدز مادري وش تبي ذي
المتغير العاشر
Postbit_msg_font
نوع خط محتى المشاركات
المتغير الحادي عشر
Postbit_userinfo_background
خلفية معلومات العضو وهنا تقدر تضيف لون او خلفيه وميزه جيده برضو وهذي صورته
المتغير الثاني عشر
Postbit_userinfo_border
الحد لمعلومات العضو
المتغير الثالث عشر
Postbithead_background
خلفية هيدر البوست بت وهالصوره توضحه
المتغير الرابع عشر
postbithead_border
حد الهيدر
المتغير الخامس عشر
postbithead_color
لون الخط بهيدر البوست بت
المتغير السادس عشر
postbithead_font
نوع ومقاس وشكل الخط بهيدر البوست بت
المتغير السابع عشر
postbitlegacy_avatar_border
حد الصوره الرمزيه للعضو
المتغير الثامن عشر
postbitlegacy_avatar_outline
الحد الخارجي للصوره الرمزيه للعضو
وهذي صوره توضح الحدين
السهم الازرق الحد الداخلي الي هو الخيار
postbitlegacy_avatar_border
السهم الاحمر الحد الخارجي الي هو الخيار
postbitlegacy_avatar_outline
المتغير التاسع عشر
postbithead_font
نوع ومقاس وشكل الخط بهيدر البوست بت
المتغير العشرون
Postbitlegacy_userinfo_width
عرض معلومات العضو في البوست لقاسي
المتغير الحادي والعشرون
postfoot_separator_color
هذا لون الخط الفاصل بين الازرار وهذي صوره توضحه
المتغير الثاني والعشرون
postfoot_separator_width
عرض الخط الفاصل بين الازرار
الى هنا ننهي البوست بت والله ولي التوفيق
القوائم المنسدله (ادوات الموضوع - خيارات الموضوع-البحث وغيرها)
نبحث عن المتغير
PopupMenus
نجد المتغيرت الخاصه بالقوائم كلمه
وسوف ارقمها بالصور واشرحها حسب ترقيمها
الترقيم
1= الخلفيه المتنقله بمعنى تمشي مع المؤشر
2= ارضية القوائم وهاللي ملونه بالاسود بالصوره التاليه
3= الحد الخارجي للقائمه
4= منحنى ازرة التحكم بالمواضيع وخيارات الرقابه وهذي صورها
نلاحظ المنحنى وضعته 5px
5= نوع الخط بالقوائم
6= ابعاد القائمه عن الجسم
تغير الناف بار navbar
نبحث عن المتغير
NavBar
تفتح لنا جميع خيارات الناف بار وهذا شكله
سوف اشرح المهم به والباقي راح تعرفونه بالتطبيق
نبدأ بالخيار الاول وهو ارضية الناف بار
المتغير
navbar_background
موضعه
اضغط هنا لمشاهدة الصورة بالحجم الطبيعي
الخيار الثاني
navbar_font
نغيره الى اي نوع خط تبيه وهذا شكله
وانا غيرته لتاهوما
navbar_link_color
لون الرابط بالناف بار وهي المشاركات الجديده والرسائل الخاصه وغيرها
navbar_linkhover_color
لون عندما تضع المؤشر على الرابط
navbar_padding
حواف او زوايا الناف بار
navbar_popup_link_background
هذي خلفية القائمه المنسدله من التنبهات وهذا مثال عليه
الي ملونه باللون الاحمر
navbar_selected_popup_body_a_Color
لون الخط داخل القائمه المنسدله
navbar_tab_background
ارضية القوائم الي فيها مربع البحث وخلافه
الملونه بالاحمر
navbar_tab_bevel
هذا البروز تحت الخلفيه وهذا موقعه وتاثيره
navbar_tab_border
حدود التاب
navbar_tab_color
لون الخط في التاب الغير نشط بمعنى
التاب يوجد به ايقونتين للي ماعندهم مدونه ومجله والي عندهم راح يكون اربع ايقونات
الي مفعله بهم راح يختلف لون الخط ولوننا هذا لون الغير مفعله والصوره توضح
اللون الاحمر هو لوننا الي غيرناه
navbar_tab_font
نوع الخط لخوينا الي وضحناه
navbar_tab_linkhover_color
هذا لون الخط للتاب المفعل
المحدد عليه بالاسود
navbar_tab_selected_background
هذا لون الخلفيه للتاب المفعل وتقدر تغير اللون لما يتناسب مع لون درجات ستايلك من دون ماتغير الخلفيه ويطلع شكله جميل
وهذا شكله بعد التغيير وانا ركبت لون ونلاحظ وشلون يتغير الحد العلوي للتاب
navbar_tab_selected_top_width
ارتفاع التاب المفعل بعد مانضغط عليه نحصل الافتراضي له 4 ونقدر نزيد او نقلل
وانا ابزيده حتى يوضح بس وابحطه عشره وهذا شكله
navbar_tab_size
مقاس التاس بالعرض والارتفاع
navbarsearch_borderWidth
عرض حدود المربع الخاص بالبحث
navbar_tab_size
مقاس التاس بالعرض والارتفاع
navbarsearch_input_bordercolor
لون المستطيل الخاص بالبحث
navbarsearch_padding
ابعاد مربع البحث من اعلى الناف بار
searchbox_size
مقاس مربع البحث
ينصح بعدم تحديد عرض ويكتفي بالارتفاع حتى مايتشوه المنظر
منقول للافادة
معهد ترايدنت & دعم هوستس & نيو ستايل
آخر تعديل بواسطة d3mhosts.com ، 03-05-2010 الساعة 03:49 PM.
|