XF 2.2 Two equal half column layout

[asprin]

Is there any specific XF tag (apart from <xf:datalist>) that can show content in two columns of equal width?

Or is this something that will need to be done via custom CSS?

 

[Davyc]

This might help you:

Columns in posts/articles bbcode

"Why would I want columns in posts?" I hear you ask. Well, given that with xenForo 2.2 we have article threads, some people might like their articles to look more magazine like. "Why can't I just use tables" Because with columns, as you add to...

xenforo.com

Or take a look at this CSS example and then apply it to the section/forum you want it to show in - you will need to identify which CSS elements need to have this applied to.

How To Create a Two Column Layout

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

I did this a while back but can't remember what I did - it's an age thing lol. Hope the above gets you moving in the right direction.

 

[asprin]

This might help you:

Columns in posts/articles bbcode

"Why would I want columns in posts?" I hear you ask. Well, given that with xenForo 2.2 we have article threads, some people might like their articles to look more magazine like. "Why can't I just use tables" Because with columns, as you add to...

xenforo.com

Or take a look at this CSS example and then apply it to the section/forum you want it to show in - you will need to identify which CSS elements need to have this applied to.

How To Create a Two Column Layout

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

I did this a while back but can't remember what I did - it's an age thing lol. Hope the above gets you moving in the right direction.

Thanks. I'm aware of this. But I'm trying to implement it in a custom template and not related to the forum view. So was wondering if there is something out of the box available.

 

[Davyc]

You will probably need to generate some custom code and CSS to inject into your template. I used a Pages node which uses HTML and custom CSS on my Rock Reaction site to create three columns which house the three large images on the home page. If this is something you'd be interested in, then I can help with the HTML and CSS. The links to my sites are in my signature.

 

[asprin]

Created a suggestion https://xenforo.com/community/threads/xf-tag-to-create-two-equal-column-layout.216367/#post-1644809. Hope it finds merit.

In any case, I went ahead with display:grid and grid-template-columns: repeat(2, 1fr); approach.

 

[Davyc]

In any case, I went ahead with display:grid and grid-template-columns: repeat(2, 1fr); approach.

That's as good as any and I use it myself on all my sites to change the look of the layout, but do it with CSS affecting already installed elements like so:

    .structItemContainer-group{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        padding: 10px;
        grid-gap: 10px;
        gap: 10px;
        
    }

    .structItem {
    flex-direction: column;
    border-width: 1px;
    display: flex;
    align-items: center;
    border-style: solid;
    border-color: #525151;
    border-radius:5px;
    justify-content: space-between;   
}