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

XF 1.2 Custom node icons not working

Discussion in 'Styling and Customization Questions' started by Thierry Martin, Mar 10, 2014.

  1. Followed instructions for replacing node icons but all I end up with are a couple of pixels and a blank space. Using this in my extra.css

    /* custom status icons */
    .node .node_25 .forumNodeInfo .nodeIcon, .node .node_25 .categoryForumNodeInfo .nodeIcon {
    background-image: url("http://onlinetradersforum.com/styles/default/xenforo/widgets/forumreadbull.jpg");
    .node .node_25 .forumNodeInfo.unread .nodeIcon, .node .node_25 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("http://onlinetradersforum.com/styles/default/xenforo/widgets/forumunreadbull.jpg");
  2. Tracy Perry

    Tracy Perry Well-Known Member

    Instead of using the http:// format, use an absolute path. I personally install all my custom icons in a directory called /images (off the web root) and then subdirectories off of there. In the case of the node icons it is /images/nodes so the call to a file would be
    background-image: url("images/nodes/archlinux.png");
  3. Tried that still doesn't work.

    Screen Shot 2014-03-10 at 7.13.13 PM.png
  4. Brogan

    Brogan XenForo Moderator Staff Member

    You have background-position: -36px 0; specified.
    Remove that as you're not using a sprite.
    Or rather, add background-position: 0 0; to your CSS.
    Tracy Perry likes this.
  5. Tracy Perry

    Tracy Perry Well-Known Member

    Good catch @Brogan.... I hadn't gone to his site to check it out.
    @Thierry Martin, here is a snippet of mine (I use the same icon for both read/unread and just apply an opacity).

    .node.node_2 .forumNodeInfo .nodeIcon, .node.node_2 .categoryForumNodeInfo .nodeIcon {
        background-image: url("images/nodes/archlinux.png");
        background-position: 0px 0px;
        opacity: 0.4;
    .node.node_2 .forumNodeInfo.unread .nodeIcon, .node.node_2 .categoryForumNodeInfo.unread .nodeIcon {
        background-image: url("images/nodes/archlinux.png");
        background-position: 0px 0px;
        opacity: 1.0;
    apsmith21 likes this.
  6. That fixed the problem thank you guys when I have all this figured out it will be my turn to help the next round of new arrivals.
    iGloo' likes this.
  7. OK the icons for forums work great but now I have a category which displays the custom icon correctly however I can't get custom icons working for the category's subforums using the same code in extra css that I used for forums. I have searched here and only found old posts with the same problem unanswered. How to show custom icons for subforums?
    Last edited: Apr 3, 2014
  8. Tracy Perry

    Tracy Perry Well-Known Member

    The code I provided should work just fine as long as you use the correct node ID.
    screenshot.png screenshot1.png
    Thierry Martin likes this.
  9. super duper thanks so much!

Share This Page