custom forum node icons ? sprites?

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:
 
You can create separate icons for each forum:

http://xenforo.com/community/threads/rc-1-custom-node-status-icons-read-unread.10886/

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:

Rich (BB code):
/* 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;
}
 
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).
 
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).

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.
 
You can create separate icons for each forum:

http://xenforo.com/community/threads/rc-1-custom-node-status-icons-read-unread.10886/

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:

Rich (BB code):
/* 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;
}

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!
 
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:

Code:
.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.
 
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:

Code:
.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.

Only works for unread forums, what about for read forums?
 
Top Bottom