XF 2.x widget grid position

maszd

cXF Pack A
cXF Donor
Messages
112
Likes
43
#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
775
Likes
404
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;
    }
}
 

Create an account or login to comment

You must be a member in order to leave a comment

Create account

Create an account on our community. It's easy!

Log in

Already have an account? Log in here.

Top