How to make the home page as 2 columns in default theme

[ahmt26]

How can I make the home page like this?

The landscape here is very big and wide, enxf.cc /resources/xenbros-grid-layout-for-node-without-addon.1592/


looks better in the picture, narrower
Can anyone share the code?

 

[XenFrodo]

Try this

Go to Your Xenforo ACP > Appearance > Template.

extra.less paste below code:

body[data-template="forum_view"] {
@media (min-width: 800px) {
.node-main { display: block; }
.node-stats { display: none; }
.node-statsMeta { display: inline; }
.node-extra { display: block; width: auto; margin-top: -4px; padding-top: 0; }
.node-extra-icon { display: none; }
.node-extra-row { display: inline-block; vertical-align: top; max-width: 100%; }
.p-body-pageContent .block:first-child {
.node-icon {
width: 46px;
margin: 0 9px 0 0;
padding: 10px 10px 10px 10px;
height: 47px;
display: block;
float: left;
}
.block-container .block-body {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.block-container {
background: rgba(255, 0, 0, 0);
border: none;
}
.node--depth2 {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
border-width: 1px;
border-style: solid;
background-color: #fff;
border-top-color: #dfdfdf;
border-right-color: #d8d8d8;
border-bottom-color: #cbcbcb;
border-left-color: #d8d8d8;
}
}
}
}

Click Save and you are done.


Similarly, you can modify this code to show Xenforo subforums in 3 columns.
Use the below code for 3 columns:

body[data-template="forum_view"]{
    @media (min-width:800px){
        .node-main{display:block}
        .node-stats{display:none}
        .node-statsMeta{display:inline}
        .node-stats{display:none}
        .node-extra{display:block;width:auto;margin-top:-4px;padding-top:0}
        .node-extra-icon{display:none}
        .node-extra-row{display:inline-block;vertical-align:top;max-width:100%}
        .p-body-pageContent .block:first-child{
            .node-icon{
                width:46px;
                margin:0 9px 0 0;
                padding:10px 10px 10px 10px;
                height:47px;
                display:block;
                float:left}
            .block-container .block-body{
                display:grid;
                grid-template-columns:1fr 1fr 1fr;
                grid-gap:10px}
            .block-container{
                background:rgba(255,0,0,0);
                border:none;}
            .node--depth2{
                box-shadow:0 1px 4px rgba(0,0,0,.06);
                border-width:1px;border-style:solid;
                background-color:#fff;
                border-top-color:#dfdfdf;
                border-right-color:#d8d8d8;
                border-bottom-color:#cbcbcb;
                border-left-color:#d8d8d8
            }
        }
    }
}

 

[ahmt26]

@XenFrodo
Unfortunately it didn't work.

even though I corrected the width settings

 

[XenFrodo]

@XenFrodo
Unfortunately it didn't work.

even though I corrected the width settings

ahmt26https://enxf.cc/threads/how-to-make-node-grid-view.7387/

 

[ahmt26]

@XenFrodo thank you I made the edits how do I remove the marked part in the picture

 

[Zer01ne]

@XenFrodo thank you I made the edits how do I remove the marked part in the picture

View attachment 40465

ahmt26Add it on extra.less

.node-meta {
    display: none !important;
}