XenForo Tutorial

This tutorial explains how to assign custom node sprites to forums.
If you want to know how to create custom node sprites, check out tutorial "How to create custom node sprites".

How to find out node IDs

To be able to assign custom node sprites to nodes, first you need to find ids of those nodes.

Admin panel of your forum is the easiest place to find node IDs. On main page click "Display Node Tree" button. That will show you list of forums:



Move mouse over forum and look at link it leads to. URL will look something like this: admin.php?nodes/something.123/edit

Look at number before /edit, that is the node ID.



In screenshot above node id is 6.

How to assign custom node glyph to node in CSS

Every XenForo style has template called "EXTRA.css". All custom CSS rules should be added to that file.

To add custom node sprite to node 6, add the following code to EXTRA.css:
Code:
.node.node_6 .nodeIcon
{
    background-image: url('path/to/node/sprite.png');
}
Change path/to/node/sprite.png to correct path to sprite image, change number "6" to id of node or category.

That's it. Code is very simple.

High definition node sprites

What if you have 2 node sprites: one for usual displays and one for high definition displays? Then you need to add entry for high definition display after entry for normal display using media queries:
Code:
/* Entries for normal display */
.node.node_6 .nodeIcon
{
    background-image: url('path/to/node/sprite.png');
}

/* Entries for high definition displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 1.5dppx)
{
    .node.node_6 .nodeIcon
    {
        background-image: url('path/to/node/sprite-hd.png');
        background-size: 144px 36px;
    }
}

Assigning custom node sprite to multiple nodes

To assign same node sprite to several nodes, add entries for each of those nodes in css like this:
Code:
.node.node_6 .nodeIcon,
.node.node_5 .nodeIcon,
.node.node_10 .nodeIcon
{
    background-image: url('path/to/node/sprite.png');
}
Make sure there is no comma after last entry or your CSS rule will not work!

Problems

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