Subforums in two / three columns

kick

Administrator
Staff member
Joined
Apr 7, 2020
Messages
168
Reaction score
179
Points
43
To make a conclusion in two or three columns, first of all, we need to enable the change the output of the subsections in the style settings.
Appearance -> Style properties -> Node/forum list
And select the item there.
Listed below node
1589217104819.png

Then, for output in two columns, add to the template - extra.less.
Less:
.node .node-subNodeFlatList li {
  float: left;
  margin: 2px 0 2px 2%;
  width: 45%;
}
1589217169086.png

For output in three columns, add to the template - extra.less.
Less:
.node .node-subNodeFlatList li {
  float: left;
  margin: 2px 0 2px 2%;
  width: 31%;
}
1589217227685.png

If desired, if message statistics are not needed when outputting in three columns, you can hide it for the desired section by adding extra.less to
Less:
.node--id4 .node-stats {
  display: none;
}
Where is id4, this is the id of the desired section, respectively replace with your own.
1589217285184.png

Also, if you want to set the section icon and block with the last message in at the section header level, just add to - extra.less
Less:
.node-body {
    .node-icon,
    .node-extra {
      vertical-align:  top;
    }   
}
 

catui

New member
Joined
Apr 12, 2020
Messages
10
Reaction score
5
Points
3
To make a conclusion in two or three columns, first of all, we need to enable the change the output of the subsections in the style settings.
Appearance -> Style properties -> Node/forum list
And select the item there.
Listed below node
View attachment 386
Then, for output in two columns, add to the template - extra.less.
Less:
.node .node-subNodeFlatList li {
  float: left;
  margin: 2px 0 2px 2%;
  width: 45%;
}
View attachment 387
For output in three columns, add to the template - extra.less.
Less:
.node .node-subNodeFlatList li {
  float: left;
  margin: 2px 0 2px 2%;
  width: 31%;
}
View attachment 388
If desired, if message statistics are not needed when outputting in three columns, you can hide it for the desired section by adding extra.less to
Less:
.node--id4 .node-stats {
  display: none;
}
Where is id4, this is the id of the desired section, respectively replace with your own.
View attachment 389
Also, if you want to set the section icon and block with the last message in at the section header level, just add to - extra.less
Less:
.node-body {
    .node-icon,
    .node-extra {
      vertical-align:  top;
    }  
}
any tutorial for subforums grid style?
 
Top