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

XF 1.1 How Can I Use Custom Forum Node Icons?

Discussion in 'Styling and Customization Questions' started by Shyuan, Jul 3, 2013.

  1. Shyuan

    Shyuan Well-Known Member

    Hi guys,

    May I know is there an addon for changing custom forum node icons? Or is there tutorials on how to do so?

    Thanks. :)
     
  2. Tracy Perry

    Tracy Perry Well-Known Member

    One resource is
    http://xenforo.com/community/threads/node-secondary-images.45788/

    Or, you can do like this in EXTRA.css

    Code:
    .node.node_7 .forumNodeInfo .nodeIcon, .node.node_7 .categoryForumNodeInfo .nodeIcon {
        background-image: url("images/nodes/iPhone.png");
        background-position: 0px 0px;
        opacity: 0.4;
    }
    .node.node_7 .forumNodeInfo.unread .nodeIcon, .node.node_7 .categoryForumNodeInfo.unread .nodeIcon {
        background-image: url("images/nodes/iPhone.png");
        background-position: 0px 0px;
    }
    Where the # is the actual node number and the icon is your custom icon. I use the same one for both and apply opacity to the read ones.
    To make sure that the unread ones are at 100% opacity I have this in EXTRA.css (you might not need the !important - I haven't tried it without it yet it's not needed at least on mine)
    Code:
    /* Adjust opacity on new message icons in forum list */
    .node .forumNodeInfo.unread .nodeIcon, .node .categoryForumNodeInfo.unread .nodeIcon {
            opacity: 1.0;
            }
     
    Jeffin and Shyuan like this.
  3. Shelley

    Shelley Well-Known Member

    Shyuan likes this.
  4. Shyuan

    Shyuan Well-Known Member

    Thanks guys, I will take a look at the three solutions. :)
     
  5. Shyuan

    Shyuan Well-Known Member

    @Tracy Perry, may I know what if the node is a link? I can't seem to get it works. Thanks.
     
  6. Matthew Hawley

    Matthew Hawley Well-Known Member

  7. Jon W

    Jon W Well-Known Member

    Shyuan likes this.
  8. Shyuan

    Shyuan Well-Known Member

  9. Tracy Perry

    Tracy Perry Well-Known Member

    If you use Chrome, you can use Chrome Developer you can usually find what you need out of it (FireFox has something I think is called FireBug - but I don't do FireFox so not sure of the name). Below is a capture from where I put the mouse cursor of the page icon and then inspected the element. Near the very top you can see what you need, and you can edit it to try it out before you place it in your EXTRA.css

    example.png
     
    Shyuan likes this.

Share This Page