custom forum node icons ? sprites?

[erich37]

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!

 

[Jake Bunce]

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:

/* 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;
}

 

[erich37]

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).

 

[Jake Bunce]

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.

 

[Shelley]

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.

 

[erich37]

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:

/* 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!

 

[Jake Bunce]

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!

That requires HTML or javascript. It can't be done with raw CSS.

You can edit this template:

Admin CP -> Appearance -> Templates -> node_forum_level_2

Similar to this:

http://xenforo.com/community/thread...-a-forum-in-the-forum-home.28664/#post-369577

 

[erich37]

Great, thanks a lot for your kind help!

 

[Chi Bearhawks]

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.

 

[eagle eyes]

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.

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

 

[Jeremy]

There is an unread class that can be used.