• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
  • This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Extra Node Icons.

Miko

Well-known member
#1
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:

screen-capture.png


1) in node_forum_level_2 template look for:

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

Directly below add:

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

2) in node_page_level_2 template look for:


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

Directly below add:

Code:
<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:

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

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

4) In node_link_level_2 template look for:

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

Code:
<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:

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

6) In PAGE_CONTAINER template look for:

Code:
<!--XenForo_Require:CSS-->
Directly below add:

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


7) create a new folder called node_icons here:

Code:
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

screen-capture-1.png


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

Miko

Well-known member
#2
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:

Code:
<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.
Code:
<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:

Code:
 <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:

Code:
<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>
 

CFodder

Well-known member
#3
Thanks heaps for this Miko. I just commented out the read/unread code and put the icons in it's place - sure we don't get the new message indicator but meh, no great loss for now :)

icons.png
 

CFodder

Well-known member
#6
Where Miko has said search for the code. Once you've found the code in each of the templates comment it out by using <!-- and -->. Then just put in the code he has suggested below it.

For example, your node_forum_level2 template would have in it:

<!--
<span class="nodeIcon" title="{xen:if '{$forum.hasNew} OR !{$visitor.user_id}', '{xen:phrase unread_messages}', ''}"></span> -->
<span class="node_icons"><img src="@imagePath/xenforo/node_icons/{$forum.node_id}.png" alt="" /></span>
 

Miko

Well-known member
#10
I can't do it today as I have to much work to do, but if I'm free tomorrow I will add how to swap the original icons for custom ones with read/unread status too.
 

CFodder

Well-known member
#11
Excellent, one thing I did find though the icons really slowed the site down, Total size of them all (and didn't use the lot) is only 1.78MB so wonder if this may be the price of shared hosting or just the fact my connection is absolute @#$#$% at the moment :(
 

Miko

Well-known member
#12
How many icons are you using?
Maybe save them as gif or 8bit png for smaller file size.

Or you could only add icons to your special forums and leave the other normal.
A simple conditional should allow you to that.
 

Shelley

Well-known member
#17
Excellent, one thing I did find though the icons really slowed the site down, Total size of them all (and didn't use the lot) is only 1.78MB so wonder if this may be the price of shared hosting or just the fact my connection is absolute @#$#$% at the moment :(
For icons to be 1.78mb is an awfully awfully lot of space. I could use 15 icons and they would amount to the size of 1 of your icons in size by saving to png-8. If your using fireworks cs5 load them up and save them to png-8. I'd advise rebuilding the colour palette and check to see how many colours each icon is using as chances are you'll be able to lower the colour count and still retain the quality whilst lowering the file size even further. .
 

CFodder

Well-known member
#18
Thanks for the tip Shelley, but unfortunately I didn't make them and to be honest I didn't understand anything after your first sentence :(
 

Shelley

Well-known member
#19
If your still having trouble with them being such a large size I can take a look for you and re-save them. Hopefully the colour pallete on them can be re-built and lowered though even if colour count can't be lowered you'll still save alot of space.