XF 2.0 3 widgets horizontally aligned

[kankan]

Hi there,

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



If not, how can i perform this ?

Thank you.

 

[DaveL]

Hello
All your widget refers to the same CSS property : grid
I would create extra class grid2, grid3 and set custom background properties for each box.

That's the bit im stuck on. I don't suppose you have an example at all? Do I use copy the extra.less code 3 times, but add a 1 and 2 after the .grid?

 

[Nicolas FR]

Don't repeat the code.
In your HTML code add an extra class for each grid, like that

<div class="grid-main">
    <div class="grid bg1">
        <xf:widget key="xfrm_overview_top_authors" />
    </div>
    <div class="grid bg2">
        <xf:widget key="xfrm_whats_new_overview_new_resources" />
    </div>
    <div class="grid bg3">
        <xf:widget key="xfrm_stats" />
    </div>
</div>

Then in your extra.less template add

.bg1 {
    background: url("/images/background1.jpeg")
}

.bg2 {
    background: url("/images/background2.jpeg")
}

.bg3 {
    background: url("/images/background3.jpeg")
}

 

[DaveL]

Has anyone managed to get this to work with 4 columns instead of 3? If so, would you be willing to show what you additionally added to achieve this?
Thanks in advance