Skip to main content

Node layout and styling

To customize a node, navigate to Forums > Node layout Styling > Select a node to customize.

To customize all nodes to be the same, navigate to Forums > Node layout Styling > Choose Default layout and styling. Changes made to an individual node will override the settings made here.

To enable node style, navigate to Forums > Node layout Styling > Enable styling for style. When it is enabled, it will then have the option to disable it. This is the same as selecting the "enable node styling" property in style properties for this style.

Node Styling​

Node class - This setting allows you to set a custom class to the selected node.

Background image - This setting allows you to set a custom background image to the selected node.

Background color - This setting allows you to set a custom background color to the selected node.

Custom Color 1 - This option allows you to define a custom color that will be accessible as a CSS variable for advanced styling.

Navigate to Nodes > Node layout and styling > Click on a node before scrolling down and look for Custom Color 1 > Input your own HEX color code or select a color by clicking on the white box.

To add more custom colors, navigate to Setup > Options > [TH] Nodes > Look for the option marked “Number of custom colors”. From there input your own number or use the plus/minus buttons to either increase or decrease the amount of custom colors that you want to show.

To see this in action, view the video below.

Text color - This setting allows you to set a custom text color to the selected node.

Retain Text Styling - This setting allows you to choose if the text color styling should retain after background image is assigned to the node or not.

Node Icons​

Category icon class - This setting allows you to set a custom icon class for the read based icon on a category based forum.

Category icon class (unread) - This setting allows you to set a custom icon class for the unread based icon on a category based forum.

Forum icon class - This setting allows you to set a custom icon class for the read based icon on a regular forum.

Forum icon class (unread) - This setting allows you to set a custom icon class for the unread based icon on a regular forum.

Page icon class - This setting allows you to set a custom icon class for a page forum.

Link forum icon class - This setting allows you to set a custom icon class for a link forum.

You can use the default Material based icons which can be found here: https://pictogrammers.github.io/@mdi/font/5.8.55/

You are able to add Material based icons as your own node icons by using this format: mdi mdi-example

Node Grid​

To customize a node grid, navigate to Forums > Node layout Styling > Choose Default layout and styling.

To customize a category grid node grid, navigate to Forums > Node layout Styling > Select a category to customize.

Maximum columns - This setting allows you to choose the maximum number of columns that should be shown below your category. Depending on the number forums assigned to that category will depend on how many maximum columns you use.

Maximum column widths - This setting allows you to choose what the width should be for the columns themselves. Be sure to use px when setting the width. Be sure to have a few forums added to the category before editing the width of the maximum column.

Fill last row - This setting allows you to change up the last row itself. Such drop-down settings include:

  • Divide last row into equal widths
  • Don't Fill (Will leave empty spaces)
  • Make remaining nodes full width on their own rows

Copying a style from one node to another​

To copy a style from one node to another, navigate to ACP > Forums > Node layout and styling. Choose “Copy” next to the node you would like to copy the style from. Then under Copy node layout, choose the nodes you would like to copy the style to. When you are done, choose the Copy node layout button.

Reverting node style changes​

To revert node styling changes, navigate to ACP > Forums > Node layout and styling. Choose “Revert” next to the node you’d like to remove styling and options from to revert the node back to default styling.

NOTICE: Please be sure that you have the correct administrative permissions set as if not you will not be able to view the settings. You can find the permission needed by navigating to Groups & Permissions > Staff > Administrators. The permission needed is: Manage node layout.

Limitations of Nodes​

In XenForo 2.2 we introduced a simplified node grid to enhance performance. The following options are available on the advanced node grid:

  • Node grid maximum column option is functional
  • Node grid “Fill last row” option is functional
  • When using the advanced node grid your performance will slightly decrease
  • Use of the following helper classes is supported