Extra Node Icons

[s0ct0j0c]

A few people have requested a mod to add extra icons next to the forum nodes.
This version is made with fairly simple templates edits and should give you the same result with no file edits.

Please note that currently it's not possible to enable icons only in certain nodes due to the lack of support of arrays in the templates without file edits.

Kier posted that he is going to implement support for more complex conditionals.

When he does that I will include that option

1) in node_forum_level2 template look for:

<span class="nodeIcon" title="{xen:if '{$forum.hasNew} OR !{$visitor.user_id}', '{xen:phrase unread_messages}', ''}"></span>

Directly below add:

<span class="node_icons"><img src="@imagePath/xenforo/node_icons/{$forum.node_id}.png" alt="" /></span>

2) in node_page_level2 template look for

<span class="nodeIcon" title="{xen:if '{$forum.hasNew} OR !{$visitor.user_id}', '{xen:phrase unread_messages}', ''}"></span>

Directly below add

<span class="node_icons"><img src="@imagePath/xenforo/node_icons/{$page.node_id}.png" alt="" /></span>

3) In node_category_level_2 template look for

<span class="nodeIcon" title="{xen:if '{$category.hasNew} OR !{$visitor.user_id}', '{xen:phrase unread_messages}', ''}"></span>

Directly below add

<span class="node_icons"><img src="@imagePath/xenforo/node_icons/{$category.node_id}.png" alt="" /></span>

4) In node_link_level2 template look for

<span class="nodeIcon" title="{xen:if '{$forum.hasNew} OR !{$visitor.user_id}', '{xen:phrase unread_messages}', ''}"></span>

Directly below add

<span class="node_icons"><img src="@imagePath/xenforo/node_icons/{$link.node_id}.png" alt="" /></span>

5) Create a new template with the name node_icons.css

Inside the node_icons.css template enter the below CSS:

.node_icons { float:left; height:36px; margin:10px; width:36px; }

6) In PAGE_CONTAINER template look for

<!--XenForo_Require:CSS-->

Directly below add

<!-- node icons css --> <xen:require css="node_icons.css" />

7) create a new folder called node_icons here:

http://yourforum.com/styles/your_skin_name/xenforo/node_icons

Please note replace your_skin_name with your actual skin folder name and yourforum.com with your actual XenForo domain name or installation directory!

8) Upload your new custom icons in the node_icons folder.

Default image size is 36px by 36px but you can change that in the node_icons.css template.

!Important: Icons must be named accordingly to the corresponding node ids

example: 1.png, 4.png, 5.png, 7.png

Please note:
Snow Drives by Janik Baumgartnerare are used in my screenshot for illustrative purpose only and they are not included.
I'm sure if you are going to use this mod you are going to have your custom icons tailored for your own forum niche

How do you determine the correct node id for a specific node?

In XenForo Admin CP go to Application, Display Node Tree.

Under Node Tree simply hover on the name of the forum nodes or click on them to edit and you see the actual id in the URL

For example: http://xenforo.dev/admin.php?nodes/official-forums.7/edit

7 is the correct id for the "Official Forums", so my icon will be named 7.png