• 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

Miko

Well-known member
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 :)
 
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>
 
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
 
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>
Click to expand...
 
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.
 
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 :(
 
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.
 
Yeah, I tried 10 of them, each about 37KB. May get the chap who did them for us to convert them to gif to see if that helps.
 
CFodder said:
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 :(
Click to expand...

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. .
 
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 :(
 
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.
 
You must log in or register to reply here.

Similar threads

digitalpoint
Fixed Node "sub-type" icons not always being used
Replies
1
Views
392
XF Bug Bot
XF Bug Bot
bytrislasis
XF 2.2 Issue with customized alert, I'd appreciate any assistance.
Replies
12
Views
396
bytrislasis
bytrislasis
Joan1211
  • Solved
XF 2.2 Unread nodes title - inspector strike css
Replies
2
Views
199
Joan1211
Joan1211
digitalpoint
  • Suggestion
Abstraction of node sub-types
Replies
2
Views
484
digitalpoint
digitalpoint
Digital Jedi
  • Question
XF 2.2 Clarification on How Creating Custom .LESS Templates Work
Replies
4
Views
352
Digital Jedi
Digital Jedi
Back
Top Bottom