درس XF-2.x بلوكات افقية اعلى المنتديات

الإهداءات
  • غزل من من قلب الغزل ..:
    ضياءٌ شعَّ من أرض المدينة و زُفَّت البشرى لرسول الله (ص) بولادة سبطه الأول الإمام المجتبى (ع).✨💚
  • غزل من قلب الغزل:
    "يارب دائمًا اعطنّي على قد نيتي وسخر لي الأشخاص اللي يشبهون قلبي🌿✨. .
  • غزل من قلب الغزل:
    مارس الرحمة قدر المُستطاع فكلما تلطفت مع خلق الله زاد الله لطفهُ حولك.💐
  • غزل من قلب الغزل:
    اللهم إنك عفوٌ كريمٌ تحب العفو فاعفو عنا ♥️😌
السلام عليكم ورحمة الله وبركاته

[العنوان] اضافة بلوكات افقية اعلى الاقسام او اسفلها او اي مكان اخر انت تحدده.
[المثال]

grid_3 (1).gif

[التوافق] منتديات الجيل الثاني فقط
[الخطوات] خطوات التركيب سهلة :

1. المظهر - القطع - انشاء قطعة جديدة
2. اختر نموذج HTML.
3. قم بتعبة البيانات الرئيسية مثل الاسم والمعرف.
4. حدد المكان الذي تود اظهار البلوكات خلاله.
5. اضف الكود HTML التالي في صندوق " القالب "

HTML:
<div class="grid-main">
    <div class="grid">
        <xf:widget key="online_list_online_statistics" />
    </div>
    <div class="grid">
        <xf:widget key="forum_overview_forum_statistics" />
    </div>
    <div class="grid">
        <xf:widget key="forum_overview_share_page" />
    </div>
</div>

6. احفظ العمل

7. ابحث في القوالب عن القالب : Extra.less
8. ضع الكود التالي آخر القالب المذكور :

CSS:
.grid-main {
    display: flex;
}
.grid {
    display: flex;
    flex-direction: column;
    flex: 1 1 250px;
}
.grid:first-of-type {
    margin-right: 2%;
}
.grid:last-of-type {
    margin-left: 2%;
}
.grid .block, .grid .block-container {
    height: 100%;
}
@media (max-width: @xf-responsiveMedium)
{
    .grid-main {
        display: inherit;
    }
    .grid:first-of-type {
        margin-right: inherit;
    }
    .grid:last-of-type {
        margin-left: inherit;
    }
}


انتهى الشرح
مودتي ..
 

أقسام الرافدين

عودة
أعلى أسفل