عرب ويب نت - منتدى شبكة الإنترنت العربية - Powered by vBulletin

 
موقع و منتدى شبكة الإنترنت العربية ArabWebNet.com

اكتب بريدك في المربع ثم اضغط على "اشتراك" لكي يصلك كل جديد على بريدك مباشرة


+ الرد على الموضوع
النتائج 1 إلى 5 من 5
بالصور شرح تغيير الخلفية و تلوين استايل لمنتديات الجيل الرابع

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

  1. #1
    عضو محترف فراشة المنتدى has a spectacular aura about فراشة المنتدى has a spectacular aura about الصورة الرمزية فراشة المنتدى
    تاريخ التسجيل
    Jul 2010
    المشاركات
    1,223

    افتراضي بالصور شرح تغيير الخلفية و تلوين استايل لمنتديات الجيل الرابع


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

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

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


    2540.imgcache.gif

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

    2541.imgcache.gif

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

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

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

    2542.imgcache.gif

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

    2543.imgcache.gif

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

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

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

    2544.imgcache.gif

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

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

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

    2545.imgcache.gif

    ثانيا : تغيير اللوقو وتعديل الهيدر + تغيير لون ارضية المنتدى

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

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

    بمتغير header

    2546.imgcache.jpg

    2547.imgcache.jpg


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

    titleimage

    2548.imgcache.jpg



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






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




    2549.imgcache.jpg

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



    من المتغير



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



    2550.imgcache.jpg

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




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



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

    2551.imgcache.jpg



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


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

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


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



    2552.imgcache.jpg




    2553.imgcache.jpg


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


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


    المتغير


    header_color

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


    2554.imgcache.jpg



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


    2555.imgcache.jpg



    المتغير

    header_font

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


    2556.imgcache.jpg



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


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


    2557.imgcache.jpg

    المتغير

    toplinks_input_login_backgroundColor

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


    2558.imgcache.jpg


    2559.imgcache.jpg


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


    المتغير

    toplinks_form_input

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


    2560.imgcache.jpg

    مثال

    2561.imgcache.jpg




    المتغير
    header_padding

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

    بحسب اختيارك

    2562.imgcache.jpg


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


    2563.imgcache.jpg


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


    2564.imgcache.jpg


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

    2565.imgcache.gif



    ثالثا :
    Forum Sidebar Background (البلوكات)

    في النسخه Version 4.0.0 Release Candidate 2 جاء اضافه جميلة جدا وهي البلوكات اما يمين او يسار وهنا طريقة تعديله
    نبحث عن
    Forum Sidebar Background
    ونضيف التعديلات التالية على حسب المطلوب اما خلفيه او لون حسب الحاجه

    2566.imgcache.gif

    ونشيك الحين

    2567.imgcache.gif

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

    2568.imgcache.gif

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

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

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

    رابعاً :
    تلوين الرئيسية للمنتدى

    نبحث عن forumhead_background

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

    2569.imgcache.gif

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

    2570.imgcache.gif


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

    الحد نبحث عن
    forumhead_border

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

    Forumhead_color

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

    forumhead_font

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

    forumhead_top_corner_radius

    العرض

    forumhead_width

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

    خامساً :
    خيارات عرض المواضيع + دلالات المواضيع داخل الاقسام

    نبحث عن Forum/Thread Information and Options Background
    نقوم بتغيير اللون واذا اردت خلفيه بامكانك وضع خلفيه كالتالي

    2571.imgcache.gif

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

    2572.imgcache.gif

    2573.imgcache.gif

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

    2574.imgcache.gif

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

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

    2575.imgcache.gif

    سادساً :
    ادوات الاقسام + ادوات الموضوعهذا مواقعه

    2576.imgcache.gif

    2577.imgcache.gif

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

    2578.imgcache.gif

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

    2579.imgcache.gif

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

    سابعاً :
    خلفية الاقسام بالصفحه الرئيسية للمنتدى

    هذا مهم للغاية

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

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

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

    2580.imgcache.gif

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

    2581.imgcache.gif

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

    ونغير مثل العاده اللون او الخلفيه

    ثامناً :
    خلفية احصائيات المنتدى بالرئيسية

    تغير خلفية احصائيات المنتدى بالصفحه الرئيسية للمنتدى
    نبحث wgo_background
    2582.imgcache.gif
    بعد مانغير اللون نشيك وهذا مكانه

    2583.imgcache.gif

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

    2584.imgcache.gif

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

    2585.imgcache.gif

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

    2586.imgcache.gif

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

    تاسعاً: قالب البوست بت والبوست لقاسي (المواضيع والمشاركات)

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

    2587.imgcache.gif

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

    postbit_avatar_maxSize

    مقاسات الصوره الرمزيه للعضو وتحدد ارتفاعها من هنا وهذي ميزه يمكن تمنع بعض الصور الرمزيه الي ارتفاعه كيلو ونصف
    2588.imgcache.gif

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

    Postbit_background

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

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

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

    2589.imgcache.gif

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

    2590.imgcache.gif

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

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

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

    2591.imgcache.gif

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

    2592.imgcache.gif

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

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

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

    2593.imgcache.gif

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

    المتغير الثامن
    Postbit_hover_background
    الصدز مادري وش تبي ذي
    2588.imgcache.gif

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

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

    2594.imgcache.gif

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

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

    2595.imgcache.gif

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

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

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

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

    2596.imgcache.gif

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

    المتغير التاسع عشر

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

    المتغير العشرون
    Postbitlegacy_userinfo_width
    عرض معلومات العضو في البوست لقاسي

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

    2597.imgcache.gif

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

    عاشراً :
    القوائم المنسدله (ادوات الموضوع - خيارات الموضوع-البحث وغيرها)
    نبحث عن المتغير
    PopupMenus


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

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

    2598.imgcache.gif

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

    2599.imgcache.gif

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

    2600.imgcache.gif

    الخطوة الحادية عشر :
    تغير الناف بار navbar

    نبحث عن المتغير
    NavBar

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

    2601.imgcache.gif

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

    المتغير

    navbar_background

    موضعه

    2602.imgcache.gif

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

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

    2603.imgcache.gif

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

    navbar_link_color

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

    navbar_linkhover_color

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

    navbar_padding

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

    navbar_popup_link_background

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

    2604.imgcache.gif

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

    navbar_selected_popup_body_a_Color

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

    navbar_tab_background

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

    2605.imgcache.gif

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

    navbar_tab_bevel

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

    2606.imgcache.gif

    navbar_tab_border

    حدود التاب

    navbar_tab_color

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

    2607.imgcache.gif

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

    navbar_tab_font

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

    navbar_tab_linkhover_color

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

    2608.imgcache.gif

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

    navbar_tab_selected_background

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

    2609.imgcache.gif

    navbar_tab_selected_top_width

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

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

    2610.imgcache.gif

    navbar_tab_size

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

    navbarsearch_borderWidth

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

    navbar_tab_size

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

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

    navbarsearch_padding

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

    searchbox_size

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

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


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

    سؤال قد يخطر في بالك؟؟؟
    كيف يمكن حذف الحدود اليمنى واليسرى التى فى الاستايل ؟؟..

    2611.imgcache.jpg


    الحل اذهب الى
    المتغير doc_margin إجعله أصفار


    2612.imgcache.png



    هكذا انتهى الشرح واي استفسار بإذن الله انا جاهز والسلام عليكم ورحمة الله وبركاته

    منقول للفائدة






    fhgw,v avp jyddv hgogtdm , jg,dk hsjhdg glkj]dhj hg[dg hgvhfu hgodg

    التعديل الأخير تم بواسطة ريتاج ; 25-12-2010 الساعة 09:36 AM

  2. #2
    مشرف عام medo3abed has a reputation beyond repute medo3abed has a reputation beyond repute medo3abed has a reputation beyond repute medo3abed has a reputation beyond repute medo3abed has a reputation beyond repute medo3abed has a reputation beyond repute medo3abed has a reputation beyond repute medo3abed has a reputation beyond repute medo3abed has a reputation beyond repute medo3abed has a reputation beyond repute medo3abed has a reputation beyond repute الصورة الرمزية medo3abed
    تاريخ التسجيل
    Nov 2010
    المشاركات
    1,983

    افتراضي

    ممتاز تسلم ايدك


  3. #3

    افتراضي

    موضوع جميل و مفيد لا تحرمينا من جديديك


  4. #4

    افتراضي

    واااااو
    موضوع رائع


  5. #5

    افتراضي

    رائع


 

 

المواضيع المتشابهه

  1. استايل بنى رائع للجيل الرابع
    بواسطة احمد في المنتدى استايلات المنتديات
    مشاركات: 1
    آخر مشاركة: 04-02-2011, 01:38 AM
  2. إيزي فون تليفون الجيل الرابع بمزايا عديدة
    بواسطة ريتاج في المنتدى جو ( Go )
    مشاركات: 1
    آخر مشاركة: 14-12-2010, 09:52 PM
  3. Skylight استايل للجيل الرابع
    بواسطة احمد في المنتدى استايلات المنتديات
    مشاركات: 1
    آخر مشاركة: 30-09-2010, 08:50 PM
  4. استايل الجيل الرابع (الواحه)
    بواسطة احمد في المنتدى استايلات المنتديات
    مشاركات: 0
    آخر مشاركة: 30-09-2010, 03:32 PM
  5. للجيل الرابع استايل الموده
    بواسطة احمد في المنتدى استايلات المنتديات
    مشاركات: 0
    آخر مشاركة: 30-09-2010, 03:32 PM

الكلمات الدلالية لهذا الموضوع

مواقع النشر (المفضلة)

مواقع النشر (المفضلة)

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك

 

تابعونا على تويترتابعونا على فيس بوكمدونة شبكة الانترنت العربية

 

 



الساعة الآن 04:27 AM