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

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

shqawe

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

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

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

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

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

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




وباذن الله سوف نكمل اليوم تكويد باقي القوالب

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

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

h-.jpg

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

ولحذف هذا الكود نقوم بفتح قالب PAGE_CONTAINER

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

HTML:
<header class="p-header" id="header">
    <div class="p-header-inner">
        <div class="p-header-content">

            <div class="p-header-logo p-header-logo--image">
                <a href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
                    <img src="{{ base_url(property('publicLogoUrl')) }}"
                        alt="{$xf.options.boardTitle}"
                        {{ property('publicLogoUrl2x') ? 'srcset="' . base_url(property('publicLogoUrl2x')) . ' 2x"' : '' }} />
                </a>
            </div>

            <xf:ad position="container_header" />
        </div>
    </div>
</header>
ونقوم بحذفه او نضعه داخل علامة التهميش الخاصة بلغة ال html وهي

HTML:
<!-- ضع القالب هنا -->
ومن ثم نقوم بحفظ التعديلات

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

افتح القالب والصق في اخره هذا الكود ثم احفظ التعديل

CSS:
.p-navSticky {
    margin-top: -30px;
}
لتكون النتيجة كالتالي:

991


انتيهنا من تعديلات درسنا السابق ولنبدأ في درس اليوم

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

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

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

l-1.jpg

وهذه الاكواد التي سوف نسختدمها في رس اليوم:

اكواد ال Html:

HTML:
<!-- START ADDITIONAL HEADER BY SHQAWE FOR XENARABIA-->
  <div class="header-a-bg">
    <div class="header-a-r"></div>
    <div class="header-a-l"></div>
  </div>
<!-- /END ADDITIONAL HEADER BY SHQAWE FOR XENARABIA-->

<!-- START ADDITIONAL FOOTER BY SHQAWE FOR XENARABIA-->
  <div class="footer-a-bg">
    <div class="footer-a-r"></div>
    <div class="footer-a-l"></div>
  </div>
<!-- /END ADDITIONAL FOOTER BY SHQAWE FOR XENARABIA-->
اكواد ال Css:

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

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

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

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

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

    .footer-a-l {
      background: url('styles/xenarabia/footer-a-l.jpg') no-repeat;
      height: 27px;
      width: 39px;
      float: right;
      position: relative;
    }
للتعديل على اقسام المنتدى في الرئيسية نقوم بفتح قالب node_list_category ونبحث عن

HTML:
<xf:macro name="depth1" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
ونضيف بعده اكواد ال html الخاصة بالهيدر

ثم نبحث عن:

HTML:
<xf:macro template="forum_list" name="node_list"
                    arg-children="{$children}"
                    arg-extras="{$childExtras}"
                    arg-depth="{{ $depth + 1 }}" />
            </div>
        </div>
ونضيف بعده اكواد ال Html الخاصة بالفوتير نحفظ القالب ونرى النتيجة:

l-3.jpg

الان للننتقل الى التعديل على قالب عرض المواضيع والقالب الخاص به هو قالب forum_view

نفتح القالب ونبحث عن:

HTML:
<xf:set var="$sortOrders" value="{{ {
        'last_post_date': phrase('last_message'),
        'post_date': phrase('first_message'),
        'title': phrase('title'),
        'reply_count': phrase('replies'),
        'view_count': phrase('views'),
        'first_post_reaction_score': phrase('first_message_reaction_score')
    } }}" />
ونضيف بعده اكواد ال Html الخاصة بالهيدر

ثم نبحث عن :

HTML:
<xf:else />
                    <div class="structItemContainer-group js-threadList">
                        <div class="structItem js-emptyThreadList">
                            <div class="structItem-cell">{{ phrase('there_no_threads_in_this_forum') }}</div>
                        </div>
                    </div>
                </xf:if>
            </div>
        </div>
    </div>

ونضيف بعده اكواد قالب ال Html ثم نقوم بحفظ القالب ولنرى النتيجة

l-4.jpg

الان للنتقل الى عرض المشاركات والقالب المختص بها هو قالب post_macros

نفتح القالب ونبحث عن:

HTML:
<article class="message message--post js-post js-inlineModContainer {{ $isIgnored ? 'is-ignored' : '' }} {{ $post.isUnread() ? ' is-unread' : '' }}"

ونضيف قبله اكواد ال Html تبع الهيدر

ثم نبحث عن:

HTML:
</div>
            {$extraAfterMessage|raw}
        </div>
    </article>
ونضيف بعدها اكواد ال Html الخاصة بالفوتير

ثم نحفظ القالب ولنرى النتيجة:

997


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

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

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


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

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

XenArabia

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

shqawe

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

الحمد لله ان الدرس نال اعجابك وان شاء الله ينال اعجاب باقي الاعضاء

ولك مثل ما دعيت والله يقبل مني ومنك ان شاء الله

ومنتظر التطبيق :p مش ح اسيبك

احترامي وتقديري

اخوك
شقاوي
 

MesterPerfect

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

shqawe

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

واللهم امين واياك ومن يقرأ هذا الموضوع ان شاء الله

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

أبو عبدالله

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

شرح روعة وبسيط وواضح ببساطه انت انشان رهيب يا استاذ تركي

الله يوفقك ويزيدك علم وينفع بك

شكرا لك
 

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

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

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

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