XenForo Article Forum Symmetrical Grid Layout

CR LEAKS

CR LEAKS

Administrative
Joined
Mar 25, 2022
Messages
1,272
Reaction score
5,192
Points
113
Credits
19,898
In the default style, an article forum in preview mode has a layout of 1:2:2:4:4 in terms of the number of threads (articles) shown on each row, like so:



This can be changed by adding some custom CSS to the extra.less template.

Equal Grid - Floating Footer​

Adding this code will produce a uniform grid layout with the footer at the default location, floating below the content in each article:



Less:
Please, Log in or Register to view codes content!

Equal Grid - Fixed Footer​

Using this code will result in an equal grid layout with the footer fixed to the bottom of each article:



Less:
Please, Log in or Register to view codes content!


Specific Nodes​

To only apply the layout to a specific node, wrap the code like so, replacing the 2 with the node ID:



Less:
Please, Log in or Register to view codes content!
To apply it to multiple nodes, add additional node IDs comma separated like this:



Less:
Please, Log in or Register to view codes content!
Here you can see the layout is applied to one node but not the other.



The styling can of course be adjusted to suit your particular needs.
If you found this tutorial useful, donations of positive emojis are gladly received.
 
4,485Threads
10,413Messages
39,636Members
mxnufLatest member
Top