Yan Yana Widget Tasarımı

[Michaelgen]

3 Widget'ı yan yana göstermek istediğiniz yerde responsive şekilde aşağıdaki kodları kullanmanız yeterlidir.

NASIL YAPILIR:
1- Bir "HTML Widget" tanımlayarak /admin.php?widgets/ , yukarıdaki görüntüyü elde etmek için konum olarak "Forum List: Above Nodes" seçip aşağıdaki kodu Template bölümüne ekliyoruz.

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

Burada "Widget key" kısmını istediğimiz widget'a göre değiştiriyoruz. 2- Temamızın " Extra.less " şablonuna

aşağıdaki kodu ekliyoruz.

.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;
    }
}