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

Separate Icons For Each Node?

Discussion in 'Styling and Customization Questions' started by TheJoker, Feb 28, 2013.

  1. TheJoker

    TheJoker Member

    I'd like to use a different, static icon for each node on my board.

    For example,

    Say I have two nodes: Mac, and iPhone

    I want the Mac status icon to be a picture of a Mac (that I supply) and the iPhone node to have a picture of an iPhone.

    Is there some way to do this? Preferably a mod?
     
  2. Slavik

    Slavik XenForo Moderator Staff Member

    Can be done via css by specifying the node ID and changing the relevent image :)
     
  3. TheJoker

    TheJoker Member

    How?

    I think I may have used the incorrect terms here. I meant each forum, not each category.

    Thanks!

    Dustin :)
     
  4. Slavik

    Slavik XenForo Moderator Staff Member

    You mean as in, when looking at the list of nodes on the home page correct?

    Similar to xfshowcase.com?
     
    Microsuck likes this.
  5. TheJoker

    TheJoker Member

    Yes exactly! And thanks for the quick response, by the way!
     
  6. Slavik

    Slavik XenForo Moderator Staff Member

    Then

    Code:
    .node .node_X .forumNodeInfo.unread .nodeIcon, .node .node_X .categoryForumNodeInfo.unread .nodeIcon {
        background-image: url("image path");
    }
     
    .node .node_X .forumNodeInfo.read .nodeIcon, .node .node_X .categoryForumNodeInfo.read .nodeIcon {
        background-image: url("image path");
    }
    replace X with the node id and enter your custom image in
     
    Microsuck and Shelley like this.
  7. Shelley

    Shelley Well-Known Member

    Microsuck and Slavik like this.
  8. Slavik

    Slavik XenForo Moderator Staff Member

  9. Shelley

    Shelley Well-Known Member

    It took me a while to find it. :) I'm almost sure there is an updated one though i could be wrong.
     
  10. Slavik

    Slavik XenForo Moderator Staff Member

    I'm suprised it wasnt entered into the RM. hint hint :)
     
  11. TheJoker

    TheJoker Member

    Thanks so much!
     
  12. TheJoker

    TheJoker Member

    Do either of you know the exact dimensions of a single status icon on XF?
     
  13. Shelley

    Shelley Well-Known Member

    I'm quite sure it's 36px by 36px.
     
    Microsuck likes this.
  14. JABRONI

    JABRONI Well-Known Member

    You can edit that in your Styles Properties.

    Styles Properties > Node Icons

    [​IMG]
     
    Microsuck likes this.
  15. TheJoker

    TheJoker Member

    You people here are saviours, I swear. :)

    Thanks so much!
     
    Shelley likes this.
  16. TheJoker

    TheJoker Member

    Hey Slavik - the help is much appreciated but I am having a problem. The image is being called but in the browser it shows no icon rather than the proper one. Here's the link if this doesn't make sense:

    http://themacforum.net/
     
  17. Slavik

    Slavik XenForo Moderator Staff Member

    You havent defined the image path correctly.
     
  18. TheJoker

    TheJoker Member

    I did though, because if you use Inspect Element, you'll notice that image is there, and it's specified correctly, but it's not showing.

    Here's the code:

    Code:
    .node .node_41 .forumNodeInfo.unread .nodeIcon, .node .node_41 .categoryForumNodeInfo.unread .nodeIcon {
        background-image: url("mac.png");
    }
     
    .node .node_41 .forumNodeInfo.read .nodeIcon, .node .node_41 .categoryForumNodeInfo.read .nodeIcon {
        background-image: url("mac.png");
    }
     
  19. Slavik

    Slavik XenForo Moderator Staff Member

    mac.png isn't a valid path, it would need to be /style/images/mac.png or where ever you put it.
     
  20. TheJoker

    TheJoker Member

    I put it in the root folder just for testing.
     

Share This Page