شرح عرض 3 ويدجت بجانب بعضها بشكل متجاوب

[codeNET]

عرض 3 ويدجت بجانب بعضها بشكل متجاوب

يمكنك عرض 3 ويدجت بجانب بعضها بطريقة متجاوبة، وذلك باستخدام الأكواد التالية.

طريقة التركيب:

1- إنشاء ويدجت HTML

انتقل إلى:

admin.php?widgets/

قم بإنشاء ويدجت من نوع HTML Widget، واختر موضع Forum List: Above Nodes للحصول على الشكل المطلوب، ثم أضف الكود التالي في قسم Template:

<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>

يمكنك تغيير قيمة Widget key حسب الودجت الذي تريد عرضه.

2- إضافة كود Extra.less

انتقل إلى قالب extra.less في التصميم المستخدم لديك، وأضف الكود التالي:

.grid-main {
    display: flex;
}

.grid {
    display: flex;
    flex-direction: column;
    flex: 1 1 250px;
    margin-left: 2%;
}

.grid:first-of-type {
    margin-left: 0;
}

.grid .block, .grid .block-container {
    height: 100%;
}

@media (max-width: @xf-responsiveMedium)
{
    .grid-main {
        display: inherit;
    }

    .grid {
        margin-left: inherit;
    }
}

ملاحظة:
يمكنك استبدال مفاتيح الودجت الموجودة في الكود بالـ Widget key الخاصة بالودجتات التي تريد عرضها، وسيتم ترتيبها بجانب بعضها على الشاشات الكبيرة، بينما تتحول تلقائيًا إلى عرض متجاوب على الشاشات الصغيرة.


حقوق كود نت ..