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

[shqawe]

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

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

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

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

في هذه السلسلة سأفترض ان المتلقي لديه معرفة في التالي:

1. اكواد ال html
2. اكواد ال Css
3. طريقة اضافة استايل جديد
4. طريقة تقطيع الاستايل

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

سوف اقوم بتطبيق الشرح على هذا الاستايل



بسم الله وعلى بركة الله نبدأ الدرس :

اولا ً قم بانشاء مجلد جديد باي اسم وانا اخترت اسم منتدانا xenarabia ونقوم بوضعه على المسار التالي:

forums/styles

ومن ثم ننتقل الى الخطوة التالية وهي تجهيز الاستايل

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

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



لنفرض ان صور الهيدر تحمل الاسماء التالية وكل صورة حسب الترقيم الموجود في الصورة السابقة :

1. header-r صورة الهيدر اليمنى
2. header-l صورة الهيدر اليسرى
3. header-bg صورة خلفية الهيدر

وصور الفوتير تحمل الاسماء التالية وكل صورة ايضا ًحسب الترقيم الموجود في الصورة السابقة:

1. - footer-r صورة الفوتير اليمنى
2. - footer-l صورة الفوتير اليسرى
3. - footer-bg صورة خلفية الفوتير

نبدأ الان بكتابة اكواد ال html الخاصة بالاستايل ونبدأ بالهيدر :

<div class="header-bg">
    <div class="header-r"></div>
    <div class="header-l"></div>
</div>

اكواد الفوتير:

<div class="footer-bg">
    <div class="footer-r"></div>
    <div class="footer-l"></div>
</div>

الان انتهينا من اكواد ال html تبقى لدينا اكواد ال css:

اكواد الهيدر كالتالي:

.header-bg {
      background: url('styles/xenarabia/header-bg.jpg') repeat-x;
      height: 172px;
      width: 100%;
      position: relative;
    }

    .header-r {
      background: url('styles/xenarabia/header-r.jpg') no-repeat;
      height: 172px;
      width: 301px;
      float: left;
      position: relative;
    }

    .header-l {
      background: url('styles/xenarabia/header-l.jpg') no-repeat;
      height: 172px;
      width: 258px;
      float: right;
      position: relative;
    }

اكواد الفوتير كالتالي:

.footer-bg {
      background: url('styles/xenarabia/footer-bg.jpg') repeat-x;
      height: 147px;
      width: 100%;
      position: relative;
    }

    .footer-r {
      background: url('styles/xenarabia/footer-r.jpg') no-repeat;
      height: 147px;
      width: 257px;
      float: left;
      position: relative;
    }

    .footer-l {
      background: url('styles/xenarabia/footer-l.jpg') no-repeat;
      height: 147px;
      width: 257px;
      float: right;
      position: relative;
    }

واحب ان انوّه على نقطة مهمه في اكواد ال css تلاحظون اننا وضعنا للصور اليمنى محاذاه لليسار float: left وللصور اليسرى محاذاة لليمين float: right

واتوقع ان هذا بسبب اننا نقوم بالتعديل عن طريق لوحة التحكم وليس عن طريق ال cli على العموم لننتبه لهذه النقطة.

بعد ان انتهينا من تقطيع الاستايل وكتابة الاكواد سوف نقوم الان بالتعديل على قوالب المنتدى

والتعديل يكون على قالب PAGE_CONTAINER

ملاحظة: في كل خطوة تقوم بالتعديل على القوالب قبل التعديل خذ نسخة احتياطية من القالب قبل التعديل عليه.

الان نبحث داخل القالب عن هذا الكود:

<header class="p-header" id="header">

ونضع فوقه اكواد ال html الخاصة بالهيدر ليصبح بالشكل التالي:



ونبحث ايضا ً عن هذا الكود

</div> <!-- closing p-pageWrapper -->

ونضع تحته اكواد ال html الخاصة بالفوتير ليصبح بالشكل التالي:



بعد اضافة الاكواد للقالب قم بالضغط على حفظ وخروج وللنتقل للخطوة التالية :

ابحث عن قالب extra.less وهو القالب المخصص لاكواد ال css الاضافية لمنتديات زين فورو

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

للنتقل الان لصفحة المنتدى الرئيسية لنرى نتيجة الدرس الاول من سلسلة الدروس :




وبهذه النتيجة يكون درسنا قد انتهى بانتظار تجاربكم واستفساراتكم ونلتقي باذن الله في الدرس القادم

ان اصبت فهذا من فضل الله علي وان اخطأت فأعذروني فجل من لا يخطأ

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

 

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

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

شرح روعه وواضح جدا

في انتظار ابداعاتك

 

[shqawe]

حياك الله ابو عبد الله

وانا في انتظار تطبيقك

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

 

[أبو غَيْث]

ما شاء الله عليك أخي شقاوي ..
درس رائع و بداية قوية
وكم محتاجين لدروس مثل هذه
الله يقويك و يعينك و يجعله في ميزان حسناتك

 

[shqawe]

اللهم امين

ان شاء الله الدروس جايه كثير لكن ودنا بالتفاعل ومشاركة الاعضاء

واهم الشيء التطبيق لان متابعة دروس بلا تطبيق لن تنفع المشاهد لانه مع الوقت سوف ينسى ما شاهد

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

 

[MesterPerfect]

ما شاء الله شيء رائع جدا
استمر أخي الكريم حياك الله وبورك فيك وفي مجهوداتك
تحياتي لك

 

[shqawe]

حياك الله وبياك اخوي ماستر نورت الموضوع

باذن الله مستمرين

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

 

[Wolf Knight]

ابداع وتميز ماشاء الله عليك
بانتظار الدرس القادم
مودتي

 

[shqawe]

اشكرك اخوي سعيد وشرفني مرورك وردك على الموضوع

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