XF 1.5 Change Node Icons

DaveM

Well-known member
I want to change my default node icons to the following

Unread
Motorbike.png

Read
Motorbike_BW.png

So now I go to - Style - Properties - Node Icons

In the Node Icon : Forum I have the following entry

Code:
@imagePath/xenforo/node-sprite.png

So I change it to any of these two but I just get a blank where the icon should display when viewing the forum lists

Code:
@imagePath/xenforo/data/Motorbike.png

Or

/xenforo/data/Motorbike.png

So what am I doing wrong here or how do I actually do this?
 
So what am I doing wrong here or how do I actually do this?
Did you remember to remove the CSS positioning directives from the node image locations?
Screen Shot 2015-11-03 at 12.42.12 AM.webp


you have to work with the node-sprite.png
Incorrect. ;)

What I do is simply make a new subdirectory called site_images. Under that I'll have additional subdirectories named icons, background, etc (whatever they are for).
Then place the images in there (one for read one for unread) then edit the style properties for the node icons and place the /path/to/image.png (remembering to REMOVE the CSS location positions).

It's BETTER to place them in a sprite sheet... that way it's only one large file to download for the user - but not required.
 
I can see it, and looks great. :D clear the cache of your browser

Screen shot 2015-11-03 at 3.44.25 PM.webp

There are also some nodes with custom images like:

Screen shot 2015-11-03 at 3.50.32 PM.webp

maybe on your extra.css
 
Last edited:
That add-on takes over the node icons from what I remember.. and if you remove it, it also removes any that you configured and fails to reset the default.
Much better to do it via the CSS (there are many examples in topics here).

I am really not that great with anything involving coding unfortunately :(
 
It's really not that hard
Code:
.node.node_259 .forumNodeInfo .nodeIcon, .node.node_259 .categoryForumNodeInfo .nodeIcon {
    background-image: url("images/forum/adventure.png");
    background-position: 0px 0px;
    opacity: 0.4;
}
.node.node_259 .forumNodeInfo.unread .nodeIcon, .node.node_259 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("images/forum/adventure.png");
    background-position: 0px 0px;
}
where the background image points at your node image, the position is 0px 0px unless using a sprite sheet (then you use the associated location) and the node_XXX (for the XXX) the actual node number (visible when you hover over it from the index).
 
Top Bottom