What's new

[Nulumia] Node Grid & Backgrounds

On the next page, you can configure the following settings:

General

  • Separate node title & description
    Check to move the node category description into a separate row, which can be styled via the Node/forum list property group
  • Use hover node colors
    Check to apply a hover background color to node rows, which can be styled via the Node/forum list property group
  • Use alternating row colors
    Check to apply alternating background colors to node rows, which can be styled via the Node/forum list property group

Settings

  • Hide read/unread icon
    Check to hide the read/unread status icon
  • Hide stats block
    Check to hide the block containing the total messages and posts info
  • Hide last post block
    Check to hide the last post block property group
  • Node stats location
    Choose which position to display the total messages and posts info
  • Iconify node stats
    Check to use Font Awesome icons in place of the "Messages" and "Posts" labels

Grid Nodes

  • Enable node grid
    Check to enable the node grid system, which you can configure via the following options
  • -- Enable grid for subforums
    By default, subforums within nodes or categories will not use the grid layout. Check this option to extend the node grid layout to subforums.
  • Spacing between grid nodes
    Enter a value in pixels for the space or gutter between the grid nodes. You may enter 0 to completely remove spacing. Note that entering 0 will remove drop shadows behind the nodes
  • Max nodes per row
    Select a maximum limit for nodes per row. Nodes will automatically stretch and fit up to this limit, based on the space available.
  • Node min width
    This setting helps to prevent grid nodes from contracting below an acceptable width
  • Stretch nodes
    Choose whether to stretch nodes to best fit, or remain in fixed widths
  • Node title overflow
    Choose whether longer node titles will overflow to a new line when necessary, or trim via ellipsis (...)

Image Nodes

  • Enable custom node backgrounds
    Check to enable the custom node background feature.
  • -- Enable grid for subforums
    By default, subforums within nodes or categories will not use the grid layout. Check this option to extend the node grid layout to subforums.
  • Spacing between grid nodes
    Enter a value in pixels for the space or gutter between the grid nodes. You may enter 0 to completely remove spacing. Note that entering 0 will remove drop shadows behind the nodes
  • Max nodes per row
    Select a maximum limit for nodes per row. Nodes will automatically stretch and fit up to this limit, based on the space available.
  • Node min width
    This setting helps to prevent grid nodes from contracting below an acceptable width
  • Stretch nodes
    Choose whether to stretch nodes to best fit, or remain in fixed widths
  • Node title overflow
    Choose whether longer node titles will overflow to a new line when necessary, or trim via ellipsis (...)

Adding Custom Node Backgrounds

To use this feature, you will need to have a basic understanding of editing CSS. In your Xenforo admin Templates area, search for the template 'nl_node_backgrounds.css' within your theme.

On the next page, you will see some default examples of how the CSS works:

Your theme will include custom settings for a few dozen nodes by default. Each custom node background is handled by a CSS entry in the following format:

.node_1 .nodeImgPreview {
background-image: url( http://your-image-path-here.jpg ) !important;
}

In order to add custom backgrounds for specific nodes, you only need to copy and paste any of these entries, and change the node_ID number, and the background image URL path.

For example, here's how it would look to add a picture to your node with an ID of 17:

.node_17 .nodeImgPreview {
background-image: url( http://yoursite.com/fluffy-cat.jpg) !important;
}

Getting the Node ID

In order to get the node ID number for each node you'd like to edit, you can find this by hovering over your node on the front-end of your site, and looking in the URL preview in the lower left corner of your browser (or, by clicking your node, and checking the new URL in the address bar of your browser.)

You will notice that your node will have its ID number appended to the end:

In the above example, the node ID is 2.

Start by customizing the image URL for the .nodeImgPreview entry first. Then, edit each entry corresponding to your node IDs, adding new entries when necessary.

Top