XenForo Tutorial

This tutorial explains how to configure compact nodes. Tutorial applies to all styles based on Artodia styles framework.

What are compact nodes?

Compact nodes, side-by-side nodes, dual/triple column nodes all stand for the same concept: short nodes displayed as grid.

This is a sample of default nodes layout:


Nodes are listed as one node per row. Compact nodes list changes that layout to fit multiple nodes per row.

Samples of nodes list with 2 nodes per row and 3 nodes per row:

How to enable compact nodes

It is very simple: go to styles page in admin panel, click style properties link for your style, select "Compact Nodes List" group.



Then enable option "Enable compact nodes list" and submit form.



That's all. The rest of tutorial explains what other options on that page do.

Compact nodes list break point

This option is basically a minimum width for compact node.

Unlike most other solutions, compact nodes list is dynamic. Style uses JavaScript to split nodes into columns.

Compact nodes list requires nodes list container to be wide enough to fit at least 2 columns. Default value is 370px, which means compact nodes list will be shown only if nodes list container is at least 740px wide.

Adjust this value to whatever minimum width of compact nodes you are comfortable with.

Maximum number of columns

This option is self explanatory.

Compact nodes smart behavior

Columns will not always be split to number of columns allowed by maximum number of columns option. If nodes list container is wide enough to fit fewer columns, limit will be dynamically changed to whatever browser allows.

For example, limit is set to 4 columns, but nodes list container is wide enough to fit only 2 columns: nodes will be split into 2 columns.


In last row of compact nodes list limit is ignored. For example, if you have 3 nodes and maximum number of columns is 2, nodes will be split into 2 nodes + 1 node:



Exception from rule is when there are two rows and number of nodes is even. Then nodes are split evenly between 2 rows. For example, 4 nodes, browser window is wide enough for 3 columns. Instead of splitting nodes into 3 columns + 1 full node, style will split nodes into 2 columns + 2 columns.



With smart compact nodes list all nodes will be as wide as possible and there will not be any empty spaces.

Problems

If you have any questions or ran into problems, please post your questions on support forum.