XF 2.x widget grid position

maszd

cXF BRONZE
cXF Donor
Messages
105
Likes
41
#1
Hi @BassMan

how to make widget position on forum list like this one:

2018-04-08_055916.png

iam try to make a html widget and insert few widget inside this html like this one:
2018-04-08_060424.png

but its show like this one:
2018-04-08_060529.png

you can see this site for example : TechPowerUp Forums

thanks.
 

BassMan

Staff member
Administrator
Messages
632
Likes
303
Website
www.customizexf.com
#2
You can try it like this:

HTML widget template:
HTML:
<div class="grid-main">
    <div class="grid">
        <xf:widget key="forum_overview_new_posts" />
    </div>
    <div class="grid">
        <xf:widget key="forum_overview_forum_statistics" />
    </div>
</div>
Add to extra.less:
CSS:
.grid-main {
    display: flex;
}
.grid {
    display: flex;
    flex-direction: column;
    min-width: 250px;
    flex: 1 1 250px;
}
.grid:first-of-type {
    margin-right: 2%;
}
.grid .block, .grid .block-container {
    height: 100%;
}
@media (max-width: @xf-responsiveMedium)
{
    .grid-main {
        display: inherit;
    }
    .grid:first-of-type {
        margin-right: inherit;
    }
}
 

Welcome to customizeXF

We are running default XenForo style customized by cXF
Registration is free!

Similar threads