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

XF 1.5 Change Node Icons

DaveM

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

Unread

Read

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?
 

Cool

Active member
#2
you have to work with the node-sprite.png
and place your icons inside there.
depending on size you have to udjust more.
 

Tracy Perry

Well-known member
#5
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.png


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.
 

rafass

Well-known member
#8
I can see it, and looks great. :D clear the cache of your browser

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

There are also some nodes with custom images like:

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

maybe on your extra.css
 
Last edited:

Tracy Perry

Well-known member
#10

DaveM

Well-known member
#11
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 :(
 

Tracy Perry

Well-known member
#12
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).