1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 Adding individual category icons to nodes?

Discussion in 'XenForo Questions and Support' started by Carlos, Oct 14, 2013.

  1. Carlos

    Carlos Well-Known Member

    With the release of 1.2, adding individual category icons is accomplished, how?
     
  2. Shelley

    Shelley Well-Known Member

  3. Carlos

    Carlos Well-Known Member

  4. Chris D

    Chris D XenForo Developer Staff Member

    Do @Brogan's posts in that thread not point you in the right direction? It's not about finding some code that works, the code clearly does work. It's about adjusting the CSS and the images you're using accordingly.

    Chances are the images are too big and need to be made smaller. Or the container the images are in are too small so you adjust the CSS of those until you can see the whole image.
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

  6. Carlos

    Carlos Well-Known Member

    It "works." But going to Style Properties and changing the node height and width size didn't work - I set the requirements to 48px x 48x - and that broke the actual modification.
    That's what I did!
    I like Shelley's works, but that does not appeal to me.
     
  7. Chris D

    Chris D XenForo Developer Staff Member

    Are you being serious? o_O

    That guide tells you exactly what you are asking about. You can use any images you need. You can replace the Shelley graphics with whatever you like...
     
  8. Carlos

    Carlos Well-Known Member

    Yes, I am being serious.
    No, it's not. It'll just "add" one more image next to the icons. I want to replace the current icons with custom ones, which is what this does:
    Code:
    /* 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");
    }
    Which is meant for 1.x [RC1].
    I know that.
     
  9. Shelley

    Shelley Well-Known Member

    Stop being so rude and speaking down to people like that when they are helping you out.

    What's actually the issue? Your able to added each image and define a height for each image on the secondary node icons.

    For example I just applied 96px square images so I increase the padding and defined the height for each node as you can see in the example.

    Code:
    .node .nodeText {padding-left: 100px;}
    
    .nodeList .node_2 .nodeText{ background: url("@imagePath/xenforo/icons/node2.png") no-repeat scroll left transparent;
    height: 96px;}   
    .nodeList .node_3 .nodeText{ background: url("@imagePath/xenforo/icons/node3.png") no-repeat scroll left transparent;
    height: 96px;}   
    .nodeList .node_7 .nodeText{ background: url("@imagePath/xenforo/icons/node7.png") no-repeat scroll left transparent;
    height: 96px;} 
    
    The output of that is as follows.
    Screenshot_13.png
     
    Chris D and Tracy Perry like this.
  10. Carlos

    Carlos Well-Known Member

    The issue is that, when I implemented this code on 1.2:
    Code:
    /* 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");
    }
    The unread icons looks "fine" but the read icons are cut off from the container - to the left, so this icon:
    forum-unread-45.png.png
    Looks like it's broke in half - only the right side of that image is visible.
    But I don't want secondary node icons...!
    I know that. It's not the result I want.
     
  11. Tracy Perry

    Tracy Perry Well-Known Member

    The below works just fine on my 1.2.x series forms (3 of them)
    Code:
    .node.node_83 .forumNodeInfo .nodeIcon, .node.node_83 .categoryForumNodeInfo .nodeIcon {
        background-image: url("images/nodes/aprilia.png");
        background-position: 0px 0px;
        opacity: 0.4;
    }
    .node.node_73 .forumNodeInfo.unread .nodeIcon, .node.node_83 .categoryForumNodeInfo.unread .nodeIcon {
        background-image: url("images/nodes/aprilia.png");
        background-position: 0px 0px;
    }
    
    /* BMW Bikes */
    .node.node_55 .forumNodeInfo .nodeIcon, .node.node_55 .categoryForumNodeInfo .nodeIcon {
        background-image: url("images/nodes/bmw.png");
        background-position: 0px 0px;
        opacity: 0.4;
    }
    .node.node_55 .forumNodeInfo.unread .nodeIcon, .node.node_55 .categoryForumNodeInfo.unread .nodeIcon {
        background-image: url("images/nodes/bmw.png");
        background-position: 0px 0px;
    }
    screenshot.jpg

    I have a separate entry that if they are unread changes the opacity to 1.0.

    Are you using one of Arty's styles?
     
    otto and Shelley like this.
  12. Carlos

    Carlos Well-Known Member

    Thanks @Tracy Perry, that's EXACTLY what I wanted my icons to be positioned. I'll take a look at this - once I wake up from my sleep. Me go to sleep now! :)
     
  13. Shelley

    Shelley Well-Known Member

    Could you post one of the read icons in your post your having issue with? It could be that the read icon is larger and is being cropped. I haven't tested this since I haven't got that TM installed but you could define the height of the read image/icon.
     
    Chris D likes this.
  14. Chris D

    Chris D XenForo Developer Staff Member

    Why on earth would we think you want to replace your node icons when you linked to a thread specifically about adding secondary node icons?
     
    Tracy Perry likes this.
  15. Carlos

    Carlos Well-Known Member

    Because the person had the same issue as I do. Only different circumstances.
    I know, I did that. But it didn't go as planned. So, now I'm looking at this new code by Perry in 5-8 hours from now. I'm sleepy.
     
  16. Tracy Perry

    Tracy Perry Well-Known Member

    Don't thank me... I got the code from some of @Shelley's postings with help from @Brogan and a few others. @Shelley is one of the CSS guru's when it comes to styling and if you clearly explain what is wanted she can usually figure it out (or already has!).
     
    Chris D likes this.
  17. Carlos

    Carlos Well-Known Member

    Now I'm embarrassed! :oops: I'm sorry, @Shelley if you felt hurt or anything like that. Not intended. :(
    Just caught this. Yes. I am. The latest version of one of his skins. Yes.
     
  18. Chris D

    Chris D XenForo Developer Staff Member

    For what it's worth, if you'd have explained properly in the first place, myself and @Brogan would have given you the answer you needed also.
     
    MattW likes this.
  19. Shelley

    Shelley Well-Known Member

    You didn't hurt my feelings, I know the resource works. It's chris you should be apologizing to, not me.
     
    Chris D likes this.
  20. Carlos

    Carlos Well-Known Member

    Alrighty then: I apologize to @Chris Deeming if I had offended you in any way. Not intended, but it may have come off that way. :(

    I am sorry.
     

Share This Page