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

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

shqawe

:: الإدارة العامة ::
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
423
مستوى التفاعل
488
النقاط
63
الإقامة
K.S.A
بسم الله الرحمن الرحيم

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

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

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



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

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

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

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

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


l-2.jpg

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

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

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

فلو اردنا مثلا تغيير خلفية اسم القسم فسوف نقوم بوضع الكود التالي داخل ملف extra.less بالطريقة التالية:
CSS:
.node-main {
      background: url('styles/xenarabia/body1.gif') repeat;
}
وتستطيع عمل ذلك لجميع الخلايا

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

l-3.jpg

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

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

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

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

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


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

CSS:
@media  (max-width: 479px )
{


}

@media  (max-width: 359px )
{

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

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

CSS:
@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;
  }

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

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

CSS:
.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;
  }
قمت باخفاء كل من :
  • صورة الهيدر اليسرى
  • صور الفوتير اليسرى واليمنى والخلفية
  • جميع الصورة التجميلية
  • مع الابقاء على صورة خلفية الهيدر
وفي هذا الكود :

CSS:
.header-r{
    float: none;
    margin: 0px auto;
  }
قمت بالغاء المحاذاة للصورة اليمنى وقمت باعطائها توسيط لانها سوف تكون الصورة الوحيدة في الهيدر

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

l-5.jpg

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

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

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

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

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

MesterPerfect

:: الأعضاء ::
إنضم
27 يناير 2019
المشاركات
463
مستوى التفاعل
418
النقاط
63
العمر
20
الإقامة
sohag, Egypt
الموقع الالكتروني
رائع جدا جدا الله ينور عليك أخي شرقاوي
جزاك الله كل خير وبورك فيك
صراحتا أنتظرك أنا مع الإضافات ولو إضافات بسيطة تقوم بتعديل القوالب فقط :D
تحياتي لك وبارك الله في مجهوداتك
 

XenArabia

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
1,250
مستوى التفاعل
1,031
النقاط
113
العمر
36
الإقامة
المغرب
الموقع الالكتروني
ما شاء الله عليك أستاذنا الكريم
الله يجعل ما تقدم في ميزان حسناتك و يديك الصحة و العافية و يزيدك علما
رغم اننا مقصرين في حقك لكن لا تقلق باذن الله ستاتي التطبيقات :)
كما أني مع الأخ أحمد و هي دورة في برمجة الإضافات وطبعا اذا شاء الله و نويت تعملها فابحث عني ;)
 

shqawe

:: الإدارة العامة ::
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
423
مستوى التفاعل
488
النقاط
63
الإقامة
K.S.A
رائع جدا جدا الله ينور عليك أخي شرقاوي
جزاك الله كل خير وبورك فيك
صراحتا أنتظرك أنا مع الإضافات ولو إضافات بسيطة تقوم بتعديل القوالب فقط :D
تحياتي لك وبارك الله في مجهوداتك
واياك اخوي ماستر
وباذن الله نسوي شرح لها ليش لا

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

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

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

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

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

MesterPerfect

:: الأعضاء ::
إنضم
27 يناير 2019
المشاركات
463
مستوى التفاعل
418
النقاط
63
العمر
20
الإقامة
sohag, Egypt
الموقع الالكتروني
ولا يهمك أخي الكريم شقاوي أبدأ متا تحب
بإنتظارك اخي الحبيب مع دورة الإضافات
على أحر من الجمر :D
تحياتي لك
 

أبو عبدالله

:: الأعضاء ::
إنضم
2 فبراير 2019
المشاركات
150
مستوى التفاعل
148
النقاط
43
الإقامة
مكة المكرمة
ماشاء الله تبارك الله

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

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

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

شكرا لك :love:
 

جميع المواضيع والمشاركات المكتوبة تعبّر عن وجهة نظر صاحبها ,, ولا تعبّر بأي شكل من الاشكال عن وجهة نظر إدارة زين العربية .

التعليقات المنشورة لا تعبر عن رأي معهد زين العربية ولا نتحمل أي مسؤولية قانونية حيال ذلك :: يتحمل كاتبها مسؤولية النشر ::

إحصائيات المنتدى

المواضيع
528
المشاركات
3,883
الأعضاء
186
آخر عضو مسجل
walid9253
أعلى