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.

[RC 1] Custom Node Status Icons ( Read & Unread)

Discussion in 'Template Modifications [Archive]' started by Miko, Jan 21, 2011.

  1. Miko

    Miko Well-Known Member

    Hi everyone,
    With the release of XenForo Release Candidate 1 (it will not work with prior versions of XF) , nodes id are included in the templates, allowing us to easily change the Status Icons without any complicate template edits.

    I know many of you already know how to do this by many others are still a little bit confused about it so here is how you do it :)



    In the template editor open the EXTRA.css template and enter the following CSS for each custom icon.

    /* custom status icons */
    .node .node_7 .forumNodeInfo .nodeIcon, .node .node_7 .categoryForumNodeInfo .nodeIcon {
        background-image: url("@imagePath/xenforo/widgets/forum-read-7.png");
    .node .node_7 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
        background-image: url("@imagePath/xenforo/widgets/forum-unread-7.png");
    In the example above I'm replacing the status icons from a node with an id of 7

    Nodes ids are unique to each nodes on your forum so make sure to enter the correct id in the css

    In the example above I also entered the custom images in the default location of the default icons and simply renamed with the node id at the end of the name for simplicity forum-unread-7.png and forum-read-7.png

    Nothing stops you from having them in a custom folders or naming them differently.

    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 icons will be named forum-unread-7.png and forum-read-7.png


    Still confused?

    Let's just say that for example you want to change the icons of nodes with IDs 2,7 and 15

    Your CSS should look like this:

    /* custom status icons */
    /* node id 2*/
    .node .node_2 .forumNodeInfo .nodeIcon, .node .node_2 .categoryForumNodeInfo .nodeIcon {
        background-image: url("@imagePath/xenforo/widgets/forum-read-2.png");
    .node .node_2 .forumNodeInfo.unread .nodeIcon, .node .node_2 .categoryForumNodeInfo.unread .nodeIcon {
        background-image: url("@imagePath/xenforo/widgets/forum-unread-2.png");
    /* node id 7*/
    .node .node_7 .forumNodeInfo .nodeIcon, .node .node_7 .categoryForumNodeInfo .nodeIcon {
        background-image: url("@imagePath/xenforo/widgets/forum-read-7.png");
    .node .node_7 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
        background-image: url("@imagePath/xenforo/widgets/forum-unread-7.png");
    /* node id 15*/
    .node .node_15 .forumNodeInfo .nodeIcon, .node .node_15 .categoryForumNodeInfo .nodeIcon {
        background-image: url("@imagePath/xenforo/widgets/forum-read-15.png");
    .node .node_15 .forumNodeInfo.unread .nodeIcon, .node .node_15 .categoryForumNodeInfo.unread .nodeIcon {
        background-image: url("@imagePath/xenforo/widgets/forum-unread-15.png");

    What size should my custom images be?

    The XenForo default status images are 40px by 40px in size.
    I recommend creating your custom images the same size as the default one to avoid them to be cut off or pixelated.

    If you wish to to change the images size and use bigger ones you can edit the default size here:

    Appearance > Styles > Default Style (or your style name) > Style Property Groups > Style Properties: Forum List > Node Icon

    Change the width and height from the default 36px to your new custom size.


    Hope it make sense, if not give me a holler and I will try to help you :)

    - Miko
    ibrian, saucylost, TomC and 53 others like this.
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Great stuff Miko.

    That will please a lot of people, I'm sure.

    It might just be worth pointing out that all icons should have the same dimensions as they inherit that css from .node .nodeIcon which is common to all.
    Of course, specific css can also be applied on a per node basis.
  3. ArnyVee

    ArnyVee Well-Known Member

    Good work Miko :)
  4. Miko

    Miko Well-Known Member

    Added instructions on how to change the images size if needed :)
  5. fattony69

    fattony69 Well-Known Member

    Amazing work Miko! Exactly what I wanted!
  6. jgas

    jgas Active Member

    Thanks, this thread is very clear and simple to understand.

    One small question: what about if I want to use the same icon for read and unread, and just play with trasparency/opacity?
  7. Brogan

    Brogan XenForo Moderator Staff Member

    You should be able to edit the css to suit.
    Just make the image path the same and add an opacity element to the read or unread css as required.
  8. patrick91

    patrick91 Member

    Thanks for this one! is will try it out soon...:D
  9. @lex

    @lex Member

    Good work, I like ! :D
  10. Rich

    Rich Active Member

    thanks , good work!
  11. Bain

    Bain Active Member

    Is there a way to do this without additional CSS? Such as on my forum, where I have roughly 200 or so categories (which I am working on streamlining).
    Would there be a simpler way of doing this via CSS by automatically calling a node id versus manually creating a new css code for each node id that we want the image replaced for?
  12. Floris

    Floris Guest

    Isn't it possible to just have an xen:if conditional with in_array to check current forumid against list of id numbers?
    if it exists, load image node_$forumid.png

    i rather set with a conditional an array for 1,5,6,122,4,33
    then create 6x same css block.
  13. Miko

    Miko Well-Known Member

    Wonder if Kier has a good solution to forums with 200 nodes.... still haven't worked a quick and easy solution
    Bain likes this.
  14. Bain

    Bain Active Member

    Those were from the old IPB forum I had, where I had forums side by side and certain forums were created into categories.
    I literally had 3 or 4 levels deep. But I am liking XF more and more.

    The skin I had on IPB, the icons were hardcoded dynamically to grab forum id and all I had to worry about was to ensure that I created the icon for the forum id.

    I am sure there has to be a way, and maybe I will figure it out... but still relatively new to XF.
  15. wickedstangs

    wickedstangs Well-Known Member

    hello I copied the above and three are not showing? how can I fix that?
  16. CFodder

    CFodder Well-Known Member

    What I'd like to try and do is use the same icon for read/unread posts, but where there are no unread posts to just change the opacity of the icon and not have to have it set for each and every node. I know how to set the opacity but having probs figuring out where/how to put the css up for it

    Tried as shown below but it didn't seem to have any effect:
  17. Bain

    Bain Active Member

    I am trying to get this working with a LinkNode. How would I go about making it work there?
  18. Miko

    Miko Well-Known Member

    shenmuee and Bain like this.
  19. Bain

    Bain Active Member

    I tried that but it doesn't appear to be working. Any other ideas on how this may work?
  20. Miko

    Miko Well-Known Member

    Sorry I forgot a .node or !important.... both versions will work

    In this example i'm changing the icon of a LinkNode with id 6
    .node .node_6 .linkNodeInfo .nodeIcon {
        background-image: url("@imagePath/xenforo/widgets/link_6.png");

    .node_6 .linkNodeInfo .nodeIcon {
        background-image: url("@imagePath/xenforo/widgets/link_6.png") !important;
    dondomainer and ekeza like this.

Share This Page