XenForo Tutorial

This tutorial explains how to assign custom node glyphs to nodes. It applies to all styles based on Artodia styles framework.

What are custom node glyphs?

Each node (aka forum) has an icon on left side indicating its status. Icon shows if there are new posts in that forum.

All styles based on Artodia styles framework allow you to set custom glyphs for each node that replaces node icon. You can set any glyph from Font Awesome and Glyph Icons libraries. You can customize colors of those glyphs and assign different glyphs for different states of node (read or unread).


Below is a screenshot of forum category that uses default nodes sprite:

and same category that is configured to use custom node glyphs:

How does it work?

Assigning glyphs to nodes is easy: in style properties you need to enter node id (or multiple ids) and glyph.
To do that you need 2 things: figure out what glyph you want and get id of node.

Where can I find available glyphs?

Styles support 2 types of glyphs: Font Awesome and Glyph Icons.

Click here to see list of available Font Awesome glyphs.
Click here to see list of available Glyph Icons glyphs.

When assigning glyphs to nodes, remember that Font Awesome glyphs start with "fa-" prefix, like fa-lightbulb-o, Glyph Icons glyphs start with "gi-" prefix, like gi-circle-exclamation-mark.

Where can I get node IDs?

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 glyph to node

In style properties select "Node Glyphs" group.

If you have installed styles framework add-on, you will see an easy to edit editor where you can assign glyphs to nodes:

If not, you'll see basic text area instead:

In editor in node id field enter node id, in glyph field enter glyph name. As soon as you enter valid glyph name, sample glyph will appear on left side of text (like book glyph on screenshot above).

To add another glyph for another forum click "new row" button.

If you do not have add-on, you will need to add new line for each entry. Format is simple: node id, followed by |, followed by glyph, like 7|gi-book-open. One entry per line.

That's it. Enter node ids, enter glyph ids, click "Update Style Properties" button.

How to adjust glyph position or size?

Glyphs are not always perfectly aligned. Sometimes they are a bit off to side or above or below center. Sometimes glyphs are too large compared to other glyphs.

To fix it style allows you to set custom css for each glyph. In editor it is third field, right after glyph field. In raw text area you can add it after glyph name by separating it with |:
To change font size, add font-size rule with value in pixels (default font size is 32px). Example: font-size: 30px;
To move glyph down, add "top" rule with value in pixels. Example: top: 2px;
To move glyph up, ad "top" rule with negative value. Example: top: -2px;
To move glyph to right or left, add "left" rule. Example: left: 1px;
You can combine those rules by separating them with ; top: 2px; left: 1px; font-size: 30px;

How to set custom colors

What if you want node glyph to have different colors than default? You can change color values in style properties below editor, but that will change it for all nodes that use glyphs.

There is a better way: assign custom colors for used states when configuring node glyph. In editor there are fields for that below custom style field.

In textarea you can add it after custom style by separating values with |. Values are set in this order: read node, unread node, page, link.

7|gi-book-open|font-size: 30px;|#808080|#ff0000
That code will assign glyph gi-book-open to node 7, will set its font size to 30px, will use color #808080 if node is read and #ff0000 if node is unread.

If you want to skip any field, simply leave it empty, but do not forget | that separates it. For example, code below is the same as above, but it will not change font size and will use default color if node is read:

How to set different glyphs for read and unread states of same node?

It can be done by creating several entries for same node, using different glyphs values and setting unused color value to "none".

For example, if you want to set glyph gi-book-open when node 7 is read and glyph fa-book when node 7 is unread, add these 2 entries:
On first line "none" is set where unread color is supposed to be, which makes forum skip that rule when node is unread. On second line "none" is set where read color is supposed to be.


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