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

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

shqawe

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

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

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

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

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

  1. اكواد ال html
  2. اكواد ال Css
  3. طريقة اضافة استايل جديد
  4. طريقة تقطيع الاستايل
اذا كنت على دراية بالخطوات السابقة اكمل السلسلة معي او قم بتعلم المطلوب وعد وتابع السلسلة والسلسلة سوف احاول ابسطها بقدر المستطاع باذن الله

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

style_picture.jpg

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

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

forums/styles

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

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

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

l-1.jpg

لنفرض ان صور الهيدر تحمل الاسماء التالية وكل صورة حسب الترقيم الموجود في الصورة السابقة :
  1. header-r صورة الهيدر اليمنى
  2. header-l صورة الهيدر اليسرى
  3. header-bg صورة خلفية الهيدر
وصور الفوتير تحمل الاسماء التالية وكل صورة ايضا ًحسب الترقيم الموجود في الصورة السابقة:
  1. - footer-r صورة الفوتير اليمنى
  2. - footer-l صورة الفوتير اليسرى
  3. - footer-bg صورة خلفية الفوتير

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

HTML:
<div class="header-bg">
    <div class="header-r"></div>
    <div class="header-l"></div>
</div>
اكواد الفوتير:

HTML:
<div class="footer-bg">
    <div class="footer-r"></div>
    <div class="footer-l"></div>
</div>
الان انتهينا من اكواد ال html تبقى لدينا اكواد ال css:

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

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;
    }
اكواد الفوتير كالتالي:

CSS:
.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

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


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

HTML:
<header class="p-header" id="header">
ونضع فوقه اكواد ال html الخاصة بالهيدر ليصبح بالشكل التالي:

l-2.jpg

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

HTML:
</div> <!-- closing p-pageWrapper -->
ونضع تحته اكواد ال html الخاصة بالفوتير ليصبح بالشكل التالي:

l-3.jpg

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

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

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

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

l-4.jpg


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

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

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

shqawe

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

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

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

XenArabia

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
1,619
مستوى التفاعل
1,244
النقاط
113
العمر
36
الإقامة
المغرب
الموقع الالكتروني
ما شاء الله عليك أخي شقاوي ..
درس رائع و بداية قوية
وكم محتاجين لدروس مثل هذه
الله يقويك و يعينك و يجعله في ميزان حسناتك
 

shqawe

:: الإدارة العامة ::
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
662
مستوى التفاعل
696
النقاط
93
الإقامة
K.S.A
اللهم امين

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

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

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

MesterPerfect

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

shqawe

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

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

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

SAEED M SALLAM

عضو فعال
[ عملاء XenArabia ]
إنضم
28 يناير 2019
المشاركات
240
مستوى التفاعل
168
النقاط
43
ابداع وتميز ماشاء الله عليك
بانتظار الدرس القادم
مودتي
 

shqawe

:: الإدارة العامة ::
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
662
مستوى التفاعل
696
النقاط
93
الإقامة
K.S.A
اشكرك اخوي سعيد وشرفني مرورك وردك على الموضوع

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

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

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

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

المواضيع
653
المشاركات
5,047
الأعضاء
237
آخر عضو مسجل
العربي الشهم
أعلى