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

custom forum node icons ? sprites?

Discussion in 'XenForo Questions and Support' started by erich37, Jun 10, 2012.

  1. erich37

    erich37 Well-Known Member

    I do have about 20 different Forum-Nodes and would like to have a different custom image for each Node.

    I assume that when putting those images into "node-sprite.png" that this will reduce image-loading times?

    All my custom images have a size of 134px by 36px , so the image-height is the same as the one of the default Forum-Node-icon.

    Could you please give me a simple step-by-step guide of how to properly do this?

    BTW: how to add a link to each of those Node-images, so that those would be linking towards each Forum-Node?

    Appreciate your help! :)
    Many thanks! :barefoot:
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    You can create separate icons for each forum:


    But in 1.1 you must also set the background-position unless you are using sprites that mirror the default node icons. Here is the code from that thread with the background-position added:

    /* custom status icons */
    .node.node_7 .forumNodeInfo .nodeIcon, .node.node_7 .categoryForumNodeInfo .nodeIcon {
        background-image: url("@imagePath/xenforo/widgets/forum-read-7.png");
        background-position: 0px 0px;
    .node.node_7 .forumNodeInfo.unread .nodeIcon, .node.node_7 .categoryForumNodeInfo.unread .nodeIcon {
        background-image: url("@imagePath/xenforo/widgets/forum-unread-7.png");
        background-position: 0px 0px;
  3. erich37

    erich37 Well-Known Member

    Many thanks Jake!

    I actually do not need the "read / unread" feature for my new custom Node-images.
    I just would like to put those images somehow into this sprite-file. Would this reduce the loading-time when having those many images in the sprite-file at all ?

    Would be cool to also have a way to make those images click-able (linking to each Forum-Node).
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Yes you can use sprites. You just need to set appropriate background positions. Using a sprite image reduces the number of requests on the page which speeds up loading.
    erich37 likes this.
  5. Shelley

    Shelley Well-Known Member

    It wouldn't be difficult to simply add your custom node icons on the spritesheet then adding the coordinates to each custom image on the spritesheet. would it reduce loading time? It should do if you can also optimise's the spritesheet meaning if the sheet doesn't consist of tons of images then you may get away with saving it to png-8 if it doesn't exceed the 256 colour limit.
    erich37 likes this.
  6. erich37

    erich37 Well-Known Member

    Hi Jake,

    by using this code, is there a way to include a Link in order to make each custom Node-icon "click-able" ?

    Many thanks!
  7. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    erich37 likes this.
  8. erich37

    erich37 Well-Known Member

    Great, thanks a lot for your kind help! :)
  9. Chi Bearhawks

    Chi Bearhawks Member

    I know it's a year later, but for whoever sees this: If you want to have the same icon for both read AND unread on a forum, you can save half the code, by entering this instead:

    .node.node_7 .forumNodeInfo .nodeIcon, .node.node_7 div .nodeIcon {
        background-image: url("@imagePath/xenforo/widgets/forum-unread-7.png");
        background-position: 0px 0px;}
    This is of course using the same example in the OP, as if we were styling forum 7. Edit to whatever forum id you need, of course.
  10. eagle eyes

    eagle eyes Active Member

    Only works for unread forums, what about for read forums?
  11. Jeremy

    Jeremy Well-Known Member

    There is an unread class that can be used.

Share This Page