[ حصريا ] شرح تكويد استايل للزين فورو الدرس الثالث - خصائص الاستايل

[shqawe]

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

الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم

اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،

نكمل باذن الله سلسلة دروس تكويد استايل الزين فورو والتي قد بدأنها معكم سابقا ً ومن فاتته الدروس السابقة يمكنه الوصول اليه عبر هذه الروابط

[ حصريا ] - شرح تكويد استايل للزين فورو الدرس الاول - الهيدر والفوتير

بسم الله الرحمن الرحيم الحمد لله والصلاة والسلام على رسول نبينا محمد عليه افضل الصلاة والتسليم اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما، نبدأ باذن الله سلسلة دروس حصرية لطريقة تكويد استايل لمنتديات الزين فورو بما ان المحتوى...

xenarabia.com

[ حصريا ] - شرح تكويد استايل للزين فورو الدرس الثاني -تأطير المنتديات و المواضيع والمشاركات

بسم الله الرحمن الرحيم الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما، نكمل باذن الله سلسلة دروس تكويد استايل الزين فورو والتي قد بدأنها معكم سابقا...

xenarabia.com

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

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

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

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

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




لذلك اذا احببنا ان نعطي لكل خلية لون فعلينا استخدام ال css في قالب extra.less والذي تحدثنا عنه في الدرس الثاني

المقصود بالمعرف لاحقا ً هو اسم كلاس ال css

خلية الايقونة تتبع الى هذا المعرف .node-icon
خلية اسم القسم تتبع الى هذا المعرف .node-main
خلية عدد المشاركات والمواضيع تتبع الى هذا المعرف .node-stats
خلية عنوان الموضوع تتبع هذا المعرف .node-extra

فلو اردنا مثلا تغيير خلفية اسم القسم فسوف نقوم بوضع الكود التالي داخل ملف extra.less بالطريقة التالية:

.node-main {
      background: url('styles/xenarabia/body1.gif') repeat;
}

وتستطيع عمل ذلك لجميع الخلايا

ايضا َ بالنسبة لصفحة عرض المواضيع فهي تحمل قيم مثل اسماء الاقسام ولكن بزيادة خلية واقصد بعرض المواضيع كما بالصورة



خلية الايقونة تتبع الى هذا المعرف .structItem-cell--icon
خلية عنوان الموضوع تتبع الى هذا المعرف .structItem-cell--main
خلية عدد الردود والمشاهدات تتبع الى هذا المعرف .structItem-cell--meta
خلية معلومات اخر رد تتبع هذا المعرف ..structItem-cell--latest
اما الخلية الاخير فهي تتبع نفس معرف الايقونة الاول

ولو اردنا التغيير عليها سوف نتبع نفس ما فلعناه مع الاقسام سابقا ً فالتعديل يكون على ملف extra.less

الان ننتقل الى الخطوة الاخيرة في سلسلة دروسنا وهي كيف نجعل الاستايل متوافق مع الجوالات والطريقة كالتالي:

بداية ً سوف نحدد مالذي نريد اخفائة عندما يتحول الاستايل من العرض بطريقة متصفح الى طريقة الجوال:

- سوف نحتاج الى اخفاء الاتي

• الهيدر والفوتير مع الابقاء على صورة في الهيدر وصورة في الفوتير ان احببت
• اخفاء جميع الصور التجميلية

الان سوف نقوم بوضع هذين المعرفان في داخل ملف extra.less بالشكل التالي:

@media  (max-width: 479px )
{


}

@media  (max-width: 359px )
{

}

وسأشرح هذا الكود بالنسبة للمعرف الاول فهو يخبر المتصفح انه اذا كان مقاس الشاشة اقل من 480px نفذ الكود التالي واما المعرف الاخر فاذا كانت الشاشة اقل من 360px فنفذ التالي:

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

@media  (max-width: 479px )
{
   .header-l, .footer-bg, .footer-r, .footer-l,
   .header-a-bg, .header-a-r, .header-a-l, .footer-a-bg, .footer-a-r, .footer-a-l
  {
    display: none;
  }

  .header-r{
    float: none;
    margin: 0px auto;
  }

}

@media  (max-width: 359px )
{
  .header-l, .footer-bg, .footer-r, .footer-l,
   .header-a-bg, .header-a-r, .header-a-l, .footer-a-bg, .footer-a-r, .footer-a-l
  {
    display: none;
  }

  .header-r{
    float: none;
    margin: 0px auto;
  }

}

شرح الكود السابق

في اول نقطة وبالتحديد هنا

.header-l, .footer-bg, .footer-r, .footer-l,
   .header-a-bg, .header-a-r, .header-a-l, .footer-a-bg, .footer-a-r, .footer-a-l
  {
    display: none;
  }

قمت باخفاء كل من :

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

وفي هذا الكود :

.header-r{
    float: none;
    margin: 0px auto;
  }

قمت بالغاء المحاذاة للصورة اليمنى وقمت باعطائها توسيط لانها سوف تكون الصورة الوحيدة في الهيدر

والنتيجة كالتالي:



والى هذه النقطة نكون قد وصلنا الى نهاية هذه السلسلة

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

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

سبحانك اللهم وبحمدك اشهد ان لا اله الا انت استغفرك واتوب اليك

احترامي وتقديري
اخوكم
شقاوي

 

[MesterPerfect]

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

 

[أبو غَيْث]

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

 

[shqawe]

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

واياك اخوي ماستر
وباذن الله نسوي شرح لها ليش لا

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

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

وباذن الله دورة برمجة الاضافات قريبا ً راح تكون حاضرة في المنتدى وراح يكون منتدانا حصري لها باذن الله

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

لكن اوعدكم باذن الله بتقديمها في القريب العاجل

احترامي وتقديري
اخوكم
شقاوي

 

[MesterPerfect]

ولا يهمك أخي الكريم شقاوي أبدأ متا تحب
بإنتظارك اخي الحبيب مع دورة الإضافات
على أحر من الجمر
تحياتي لك

 

[أبو عبدالله]

ماشاء الله تبارك الله

صراحة كلنا في انتظار برمجة الاضافات

واصل عطأك المميز

وشكرا لك على ما تقدمه من دروس

شكرا لك

 

[muedx.com]

جزأك الله خيراً أخي ​