XF 2.0 Display sub-forums list above thread list as grid

sbj

Well-known member
I am actually not sure what to do with the sub-forums list, which takes so much important space above the thread list. Specially seeing the subforums before the thread lists is a bit annoying.
A solution would be to display the sub forums list in grid style.
Anyone any idea how to accomplish that?

From this:
ewr.webp
to:
fdsdfs.webp
 
Try this -

Less:
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
            }
        }
    }
}

put t it in extra.less
 
Try this -

Less:
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
            }
        }
    }
}

put t it in extra.less

One info: The Microsoft Edgebrowser seems to have problems with the rgba color information in the script. rgb, on the other hand, does not cause any problems

I use the script here, also in body[data-template="category_view"]:
 
Back
Top Bottom