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

[shqawe]

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

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

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

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

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

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

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

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

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



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

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

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

<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 وهي

<!-- ضع القالب هنا -->

ومن ثم نقوم بحفظ التعديلات

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

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

.p-navSticky {
    margin-top: -30px;
}

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




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

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

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

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



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

اكواد ال 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:

.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 ونبحث عن

<xf:macro name="depth1" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">

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

ثم نبحث عن:

<xf:macro template="forum_list" name="node_list"
                    arg-children="{$children}"
                    arg-extras="{$childExtras}"
                    arg-depth="{{ $depth + 1 }}" />
            </div>
        </div>

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



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

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

<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 الخاصة بالهيدر

ثم نبحث عن :

<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 ثم نقوم بحفظ القالب ولنرى النتيجة



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

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

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

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

ثم نبحث عن:

</div>
            {$extraAfterMessage|raw}
        </div>
    </article>

ونضيف بعدها اكواد ال Html الخاصة بالفوتير

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




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

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

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


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

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

 

[أبو غَيْث]

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

 

[shqawe]

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

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

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

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

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

اخوك
شقاوي

 

[MesterPerfect]

شروحات في غاية الروعة
جزاك الله عن هذه الدورة كل خير أخي الكريم وبورك فيك
تقبل تحياتي

 

[shqawe]

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

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

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

 

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

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

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

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

شكرا لك