[Template] Extra Node Icons Modification

[Miko]

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

Example Screenshot:




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




Hope it make sense and that you like it as it's fairly basic template modification

 

[Miko]

A) Do you want to display the extra icons only in some forums? Here is how to do it:


You need to wrap the new icons code around a conditional:

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

Let's just say for example I want the icons to show in only four forums...
I will first need to look up the ids of those forums, in these example the id are 1, 6, 9 and 15

Now that I know the different IDS I can create the conditional.

<xen:if is="{$forum.node_id} == 1 OR {$forum.node_id} == 6 OR  {$forum.node_id} == 9 OR {$forum.node_id} == 17">   Insert icons code  here  </xen:if>

The final code it will look like:

 <xen:if is="{$forum.node_id} == 1 OR {$forum.node_id} == 6 OR  {$forum.node_id} == 9 OR {$forum.node_id} == 17"><span  class="node_icons"><img   src="@imagePath/xenforo/node_icons/{$forum.node_id}.png" alt=""   /></span></xen:if>

Let me know if you need help



B) Do you want to restrict the icons top level forums only and not showing in sub-forums?

You need to add an extra conditional around the icons code like this:

<xen:if is="{$level} == 1"><xen:else /><span  class="xeno_node_icon"><img  src="@imagePath/xenforo/node_icons/{$forum.node_id}.png" alt=""  /></span></xen:if>

 

[Floris]

I can't believe how awesome you are when it comes to template mods and skinning xenforo.

 

[Miko]

haahah that is a bit of exaggeration, but thank you Floris

 

[Floris]

haahah that is a bit of exaggeration, but thank you Floris

Sorry if the truth hurts

 

[Floris]

Would it be possible to get the forum icons replaced by those .. new forum icons? So it's unique per forum?

I kinda want to use a news icon for news forum and a download one for the resources ones.

 

[Miko]

Do you want to replace the current XenForo icons with custom one per forum without the extra one, is that right?

If that is what you are after i can post here how to do it

 

[Floris]

That's correct.

 

[Miko]

2am here and getting sleepy so I won't go in super details but I'm sure you will be ok.

Easiest way to do it is to add an extra class to the XF default icons.

Basically do a template search for

class="nodeIcon"

change it to:

class="nodeIcon {$forum.node_id}"

Note that the {$forum.node_id} is different in all 4 templates from memory link.node_id category.node_id
so make sure to add the correct id.

Do the same for the read and unread icons and you are set!

Once you have added that code is easy.

Look at the node id of the forum that you wish to change and add some new css for example for id 10

.nodeIcon.10 {
    background-image: url("styles/default/xenforo/widgets/my-custom-icon-unread.png");
}

Hope it make sense.... if not let me know and I will post it during the day once I'm awake

 

[Floris]

Makes perfect sense Thank you.

 

[Miko]

On a clear head today I notice a mistake.

make sure to add a word o a letter before the {$forum.node_id} as CSS element cannot start with a number.

so for example I have added icon to my forum

class="nodeIcon icon{$forum.node_id}"

and then in my custom css i have added

example of forum id 2

.node .forumNodeInfo .nodeIcon.icon2, .node .categoryForumNodeInfo .nodeIcon.icon2 {
    background: url("@imagePath/xenforo/widgets/forum-read-2.png");
}
.node .forumNodeInfo.unread .nodeIcon.icon2, .node .categoryForumNodeInfo.unread .nodeIcon.icon2 {
    background: url("@imagePath/xenforo/widgets/forum-unread-2.png");
}