Grid layout for XFRM without Addon

[hemant_bhardwaj]

Thanks guys, i tried both your codes now. Just not having much luck lol. I'll get back to this at some point thanks.

@Jordyn once try the Ehren code with grid.

 

[Jordyn]

@Jordyn once they the Ehren code with grid.

Sorry mate?

 

[CrazyChef]

This is a great bit of code - thank you! But I seem to lose my theme's color scheme when I use it, and some of the text gets cut off at the bottom of each resource. Here's a before and after screenshot.

BEFORE:

AFTER:

 

[CrazyChef]

Well, I guess I should have read through this thread a bit more thoroughly - I just used the code from post #5 and things are much better! Thanks @Ehren!

 

[Hristo Avramov]

Hello,
do you have grid layout for Forum list/nodes without addon?
I used to have this in xenforo 1 but now I can't find it without addon.

 

[Ozzy47]

Hello,
do you have grid layout for Forum list/nodes without addon?
I used to have this in xenforo 1 but now I can't find it without addon.

There is this,

Unmaintained - Thread Grid by Xenbros

Thread Grid addon will allow you to get Grid of thread on selected forum. How does this addon work ? this addon pickup the first attachment of the thread so you can get a good layout for forum additional requirement : thread thumbnail addon...

xenforo.com

and this,

Unmaintained - Grid layout for Thread without addon

Hemant here again with Thread grid layout without Addon. Well after my Grid layout for XFRM without Addon @Neutral Singh suggest to make grid layout for the thread too. so here it is. So here a simple CSS that you need to place it in Extra.less...

xenforo.com

 

[Hristo Avramov]

@ozzy47 I mean in forum/node list but thanks for trying to help me.

 

[Ozzy47]

@ozzy47 I mean in forum/node list but thanks for trying to help me.

Ooops my bad, perhaps this will help,

[TH] Nodes for grid, custom styling, and custom icons

Nodes Get Nodes for free by using the coupon code STYLENODES during checkout. Add dimension, quality, and allure to the display of your forum list, and stand out from your competition. [TH] Nodes can help you create a visually engaging forum...

xenforo.com

 

[stunod29]

How can I get the reaction "Like" button in the grids? Not sure its possible but thought I would ask! Thanks!

 

[hemant_bhardwaj]

How can I get the reaction "Like" button in the grids? Not sure its possible but thought I would ask! Thanks!

for that you need to modify the template it't not available by default. this mod will use only css to get grid layout

 

[7emper5i]

Howdy,

may I ask, if this code addition works with the latest version of xfrm?
I added the code, and it did not change to grid view.

 

[stunod29]

Howdy,

may I ask, if this code addition works with the latest version of xfrm?
I added the code, and it did not change to grid view.

Working great for me!

 

[CavySpirit]

This is still works great!

 

[Tati Booyakah]

Still works nice on 2.2.12 but the last grid on every page is always empty. anyway to fix that?

 

[Hareon]

The icons (font awesome) aren't working fot me (a retangle is showing instead), but the grid layout is working fine.
Thank your guys!

 

[Tati Booyakah]

Here is a fix for 2.3 (including FA Icons)

@resource-grid-gap: 4px;
@resource-grid-width: 48%;
@resource-grid-thumb: 75px;

@media (min-width: @xf-responsiveMedium){
    @supports(display: grid){

        .block[data-type="resource"] .structItemContainer{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(@resource-grid-width, 1fr));
            grid-gap: @resource-grid-gap;
            padding: @resource-grid-gap;
            background-color: @xf-contentAltBg;
        }
        .structItem--resource {
            background-color: @xf-contentBg;
            border-radius: 3px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-width: 0px;
            display: grid;
            grid-template-columns: @resource-grid-thumb 1fr;
            grid-template-areas: 'icon text' 'stats stats';

            .structItem-cell--icon.structItem-cell--iconExpanded{
                width: auto;
                grid-area: icon;
            }

           .structItem-title{
               white-space: normal;
          }

            .structItem-cell--main {
                grid-area: text;
                overflow: hidden;
            }

            .structItem-cell--resourceMeta {
                grid-area: stats;
                width: auto;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: space-between;
            }

            .structItem-cell--iconExpanded .structItem-iconContainer .avatar {
                width: 100%;
                height: auto;
                font-size: 56px;
            }

            .structItem-secondaryIcon {
                display: none;
            }

            .structItem-metaItem--rating{
                flex: 1 0 100%;
            }

            .structItem-metaItem--downloads,
            .structItem-metaItem--lastUpdate{
                flex: 0 1 auto;
            }

            .ratingStarsRow--justified {
                border-bottom: 1px solid @xf-borderColorFaint;
                margin-bottom: 4px;
                padding-bottom: 4px;
            }
        }

    }
}

.structItem-metaItem--lastUpdate dt,.structItem-metaItem--downloads dt{
  font-size:0px; }
.structItem-metaItem--downloads dd{
  margin-left:18px; }
.structItem-metaItem--downloads dt:before ,.structItem-metaItem--lastUpdate dt:before {
    font-family: FontAwesome;
    font-size: 14px;
    position: absolute; }
.structItem-metaItem--downloads dt:before {
    margin-left: 0px;
   .m-faContent(@fa-var-download); }
.structItem-metaItem--lastUpdate dt:before {
  .m-faContent(@fa-var-clock);
  margin-left: -15px; }

 

[nogame]

Can we make the same look for categories on the main page of the forum?