تعديل استايل الجيل الرابع

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

صفحة 1 من 3 123 الأخيرةالأخيرة
النتائج 1 إلى 7 من 15

العرض المتطور

المشاركة السابقة المشاركة السابقة   المشاركة التالية المشاركة التالية
  1. رقم #1
     افتراضي  العنوان : تعديل استايل الجيل الرابع
    بتاريخ : 09 Nov 2012 الساعة : 03:25 AM

    طيب شرف 1


    الصورة الرمزية حلال المشاكل

    رقم العضوية : 34
    الانتساب : Jun 2004
    المشاركات : 3,823
    بمعدل : 0.78 يوميا
    معدل تقييم المستوى : 998
    التقييم : Array
    حلال المشاكل غير متصل




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

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

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


    ju]dg hsjhdg hg[dg hgvhfu ju]dg hsjhdg hg[dg hgvhfu



     



  2. رقم #2
     افتراضي  العنوان : رد: تعديل استايل الجيل الرابع
    كاتب الموضوع : حلال المشاكل
    بتاريخ : 09 Nov 2012 الساعة : 03:35 AM

    طيب شرف 1


    الصورة الرمزية حلال المشاكل

    رقم العضوية : 34
    الانتساب : Jun 2004
    المشاركات : 3,823
    بمعدل : 0.78 يوميا
    معدل تقييم المستوى : 998
    التقييم : Array
    حلال المشاكل غير متصل



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



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



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

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

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



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



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

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

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



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

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

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



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


     



  3. رقم #3
     افتراضي  العنوان : رد: تعديل استايل الجيل الرابع
    كاتب الموضوع : حلال المشاكل
    بتاريخ : 09 Nov 2012 الساعة : 03:36 AM

    طيب شرف 1


    الصورة الرمزية حلال المشاكل

    رقم العضوية : 34
    الانتساب : Jun 2004
    المشاركات : 3,823
    بمعدل : 0.78 يوميا
    معدل تقييم المستوى : 998
    التقييم : Array
    حلال المشاكل غير متصل



    السلام عليكم

    4 : تركيب الهيدر والمتغير header جيل رابع

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



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





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




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

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




    مثال



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

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



    مثال

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




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





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

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




    مثال





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

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




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





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

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




    مثال





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

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




    مثال






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

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






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

    المتغير

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




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







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

    المتغير
    bodyheader_margin



    مثال




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





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

    المتغير
    toplinks_background



    مثال





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

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







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

    المتغير
    toplinks_link_color
    تغيير لون خطوط روابط الهيدر









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




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





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

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






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

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



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


     



  4. رقم #4
     افتراضي  العنوان : رد: تعديل استايل الجيل الرابع
    كاتب الموضوع : حلال المشاكل
    بتاريخ : 09 Nov 2012 الساعة : 03:36 AM

    طيب شرف 1


    الصورة الرمزية حلال المشاكل

    رقم العضوية : 34
    الانتساب : Jun 2004
    المشاركات : 3,823
    بمعدل : 0.78 يوميا
    معدل تقييم المستوى : 998
    التقييم : Array
    حلال المشاكل غير متصل



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



    ونشيك الحين



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



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

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

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

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


     



  5. رقم #5
     افتراضي  العنوان : رد: تعديل استايل الجيل الرابع
    كاتب الموضوع : حلال المشاكل
    بتاريخ : 09 Nov 2012 الساعة : 03:37 AM

    طيب شرف 1


    الصورة الرمزية حلال المشاكل

    رقم العضوية : 34
    الانتساب : Jun 2004
    المشاركات : 3,823
    بمعدل : 0.78 يوميا
    معدل تقييم المستوى : 998
    التقييم : Array
    حلال المشاكل غير متصل



    نبحث عن forumhead_background

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



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




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

    الحد نبحث عن
    forumhead_border

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

    Forumhead_color

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

    forumhead_font

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

    forumhead_top_corner_radius

    العرض

    forumhead_width

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


     



  6. رقم #6
     افتراضي  العنوان : رد: تعديل استايل الجيل الرابع
    كاتب الموضوع : حلال المشاكل
    بتاريخ : 09 Nov 2012 الساعة : 03:37 AM

    طيب شرف 1


    الصورة الرمزية حلال المشاكل

    رقم العضوية : 34
    الانتساب : Jun 2004
    المشاركات : 3,823
    بمعدل : 0.78 يوميا
    معدل تقييم المستوى : 998
    التقييم : Array
    حلال المشاكل غير متصل



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



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





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



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

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



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


     



  7. رقم #7
     افتراضي  العنوان : رد: تعديل استايل الجيل الرابع
    كاتب الموضوع : حلال المشاكل
    بتاريخ : 09 Nov 2012 الساعة : 03:38 AM

    طيب شرف 1


    الصورة الرمزية حلال المشاكل

    رقم العضوية : 34
    الانتساب : Jun 2004
    المشاركات : 3,823
    بمعدل : 0.78 يوميا
    معدل تقييم المستوى : 998
    التقييم : Array
    حلال المشاكل غير متصل



    ادوات الاقسام + ادوات الموضوع نبحث عن ToolsMenu
    هذا مواقعه





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



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



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

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


     



صفحة 1 من 3 123 الأخيرةالأخيرة

معلومات الموضوع

الأعضاء الذين يشاهدون هذا الموضوع

الذين يشاهدون الموضوع الآن: 1 (0 من الأعضاء و 1 زائر)

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

  1. دورة تصميم استايل الجيل الرابع - الجزء الرابع والأخير
    بواسطة حلال المشاكل في المنتدى مدرسة التصميم
    مشاركات: 4
    آخر مشاركة: 28 Sep 2017, 10:38 PM
  2. دورة تصميم استايل الجيل الرابع - الجزء الثاني
    بواسطة حلال المشاكل في المنتدى مدرسة التصميم
    مشاركات: 3
    آخر مشاركة: 21 Nov 2012, 11:30 AM
  3. دورة تصميم استايل الجيل الرابع - الجزء الثالث
    بواسطة حلال المشاكل في المنتدى مدرسة التصميم
    مشاركات: 2
    آخر مشاركة: 12 Nov 2012, 06:14 PM
  4. دورة تصميم استايل الجيل الرابع - الجزء الأول
    بواسطة حلال المشاكل في المنتدى مدرسة التصميم
    مشاركات: 2
    آخر مشاركة: 12 Nov 2012, 06:14 PM

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

المفضلات

المفضلات

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

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