XF 2.0 3 widgets horizontally aligned

kankan

Well-known member
Hi there,

Any way to achieve this by default :
Align some widget horizontallly :

.webp

If not, how can i perform this ?

Thank you.
 
Ok, you can achieve this with a few manually steps.

1. Create an HTML widget, choose the position in my case Forum list: Above nodes and add this code to template field:
Code:
<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>

Edit widget keys to suit your needs.

2. Copy/paste this code to EXTRA.less file:
Code:
.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;
    }
}


This should be it.
 
Last edited:
In that case, use this in EXTRA.less:
Code:
.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;
    }
}
 
Re Bassman,
May i ask something regarding CSS.
I am trying to Add custom background for each Widget.
In widget page, i am adding the following code, but the background do not appear :
Code:
<span style="background-image: url("myimageurl/forum_bg.png");">
<center><b>my_content</b><br><br></span>
Any idea why?
 
Try like this and add the code to EXTRA.less template:
Code:
.grid [data-widget-key="forum_overview_forum_statistics"] .block-container {
    background-image: url("myimageurl/forum_bg.png");
}
Change the data-widget-key and copy/paste the code for each widget and change the key.
 
Last edited:
Hello!
I add this in extra.less :
Code:
.grid [data-widget-key="service_forum"] .block-container {
background-image: url("https://www.forum-des-portables-asus.fr/forums/images/forum_bg.png");
}

in service_forum widget, do i have to add something except my content ?
In the state the background do not display
 
It works on my side:

1528212822456.webp



Add the widget key of widgets you have inside (one of those three widgets). Above is an example of widget key for forum statistics.

1528212921751.webp
 
Humm

I have this :

Code:
<style type="text/css">
    .block-minorHeader {display:none;}
  </style>

<xf:if is="$xf.visitor.isMemberOf([3])">
    <div class="grid-main">
    <div class="grid">
        <xf:widget key="service_forum" />
    </div>
    <div class="grid">
        <xf:widget key="service_premium" />
    </div>
    <div class="grid">
        <xf:widget key="service_detache" />
    </div>
    <div class="grid">
        <xf:widget key="service_refurb" />
    </div>
</div></xf:if>

in service_forum widget this :

Code:
<center>
<a href="/forums/forums/-/create-thread" class="button--cta button button--icon button--icon--write rippleButton" data-xf-click="overlay">
<span class="button-text">
Créer une discussion...</span>
</a>
</center>

in extra.less :
Code:
.grid [data-widget-key="service_forum"] .block-container {
background-image: url("https://www.forum-des-portables-asus.fr/forums/images/forum_bg.png");
}

But no image in background :

2018-06-05 17_41_16-Le forum des portables Asus.webp
 
Ok, you can achieve this with a few manually steps.

1. Create an HTML widget, choose the position in my case Forum list: Above nodes and add this code to template field:
Code:
<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>

Edit widget keys to suit your needs.

2. Copy/paste this code to EXTRA.less file:
Code:
.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;
    }
}


This should be it.

Hi @BassMan .. can you pls re-edit this code for me for a two widget horizontally aligned instead of three?

and is it possible to both widget 2 different div class? instead of just 'grid'. If it possible, kindly give them 2 different div class.
Thanks.
 
Hi @BassMan .. can you pls re-edit this code for me for a two widget horizontally aligned instead of three?

and is it possible to both widget 2 different div class? instead of just 'grid'. If it possible, kindly give them 2 different div class.
Thanks.
Hi @Justwise

remove one of this from the code:
Code:
    <div class="grid">
        <xf:widget key="forum_overview_share_page" />
    </div>

Then in code <div class="grid"> for other two widgets add extra classes like<div class="grid class1"> and <div class="grid class2">, for instance.
 
Top Bottom