1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. 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.
    Dismiss Notice
  3. 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.

Discussion in 'Template Modifications [Archive]' started by Miko, Oct 18, 2010.

  1. 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 :)
     
    Naix, Veer, Sergio Bambaren and 7 others like this.
  2. Miko

    Miko Well-Known Member

    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>
    
     
    Veer likes this.
  3. CFodder

    CFodder Well-Known Member

    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
     
  4. Forsaken

    Forsaken Well-Known Member

    You can use those with read/unread, you just replace the old icons with those, and change opacity on unread.
     
    hcmagix likes this.
  5. Perspektif

    Perspektif Active Member

    How do we cancel the original icons?
     
  6. CFodder

    CFodder Well-Known Member

    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:

     
  7. CFodder

    CFodder Well-Known Member

    True, but I don't think can do it for individual icons for each forum????
     
  8. Forsaken

    Forsaken Well-Known Member

    Its possible, I'll play with it later.
     
    CFodder likes this.
  9. CFodder

    CFodder Well-Known Member

    Sounds good :)
     
  10. Miko

    Miko Well-Known Member

    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.
     
  11. CFodder

    CFodder Well-Known Member

    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 :(
     
  12. Miko

    Miko Well-Known Member

    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.
     
  13. CFodder

    CFodder Well-Known Member

    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.
     
  14. Miko

    Miko Well-Known Member

  15. hcmagix

    hcmagix Active Member

  16. fattony69

    fattony69 Well-Known Member

    Did anyone get this to work?
     
  17. Shelley

    Shelley Well-Known Member

    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. .
     
    Claudio likes this.
  18. CFodder

    CFodder Well-Known Member

    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 :(
     
  19. Shelley

    Shelley Well-Known Member

    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.
     
  20. fattony69

    fattony69 Well-Known Member

    Does replacing the node icons with custom ones and different opacity work?
     

Share This Page