@Jordyn once try the Ehren code with grid.
Grid layout for XFRM without Addon
- Thread starter hemant_bhardwaj
- Start date
Sorry mate?
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.
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
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
for that you need to modify the template it't not available by default. this mod will use only css to get grid layout
Working great for me!
This is still works great!
Tati Booyakah
Member
Still works nice on 2.2.12 but the last grid on every page is always empty. anyway to fix that?
Tati Booyakah
Member
Here is a fix for 2.3 (including FA Icons)
CSS:
@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; }
Last edited:
