XenForo Tutorial

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

What are node sprites?

Here is a sample of category where you can see one forum with new posts, one forum without new posts, one page node and one link node:

There are 4 images:
  • Read forum
  • Unread forum
  • Page
  • Link
Link image is used for nodes with node type set to link. Page image is used for nodes with node type set to page. Other node types (categories, forums) use one of first 2 images, depending on node state.

Node sprite is one big image that is composed out of 4 images representing all 4 possible states of that node. Example:

As you can see, that sprite has 4 images:
  • Icon for read forum
  • Icon for unread forum
  • Icon for page
  • Icon for link

That is node sprite. It is one image that is used instead of 4 separate images.

Why not use 4 images instead? Because images are small, loading one sprite image is usually faster than loading even 2 small images.

Sprite dimensions

Default XenForo sprite size is 144x36 pixels.

Each image in sprite is a square. It has same width and height. Default is 36x36. Therefore 4 images combined make total width of sprite image 36 * 4 = 144

Some styles support high definition node sprites. For example, node sprite shown above is a high definition node sprite. It is 2 times bigger, while maintaining same width/height ratio: 288x72 pixels.

How to combine images

To create custom node sprite, make blank image 144 pixels wide, 36 pixels high (or double/tripple of it if you want high definition sprite).

Split image in 4 equal parts. In software like Adobe Photoshop it is easy to do using guides feature.

Put different images in separate parts. Make sure images do not overlap each other. Order of images is the same as listed above.

If you are planning to use node sprite only for nodes of specific type, you can skip images not used by those nodes. For example, for forums and categories you do not need page and link images. That means you can leave last two parts of sprite image empty. Do not remove unused parts of sprite, those parts must still be there, just leave them empty.

Saving sprite

Next save your sprite. To save it in Adobe Photoshop navigate to File -> Save for Web.
In preset field select "PNG-24", make sure transparency box below it is checked:

Save it by clicking "Save" button.

High definition sprite images

You might have noticed that screenshot above has arrow pointing to image size field. Values are set to 288 and 72, which is twice bigger than normal node sprite. That is because sample shows high definition sprite. Screenshot above shows how how definition sprite is created.

If you make a high definition sprite image, you do not need to make separate image for standard displays. Save high definition sprite, then open "Save for Web" dialog again. Change width to 144, height should automatically change to 36. Click "Save" again and save file.

That's it. Now you have two images: 288x72 high definition sprite and 144x36 standard sprite.

How to assign custom sprite image to forum node

To find out how to assign custom node sprites to forums, check out tutorial "How to setup custom node sprites".


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