XF 2.0 change Node Icons to IMG in XenForo 2.0

[Radhi]

Hello
how to change Node Icons to IMG in XenForo 2.0?

 

[RebellionRoleplaying]

I guess I was putting too much on there.

Thank you so much, I appreciate it! <3

 

[Jordyn]

I guess I was putting too much on there.

Thank you so much, I appreciate it! <3

You are a lifesaver, thank you so much for your help and patience with me. It had to have been my image paths. Although it wasn't even working when I used the imagur direct link.

Awesome mate, thats great to read, no worries, i had a feeling that was the issue.

 

[Saeed]

I bought a mod that done this, and found the mod took longer to work out than coding myself. I use this code.
Here you have unread and read. Just repeat the code for each node in your extra.less template.
Change the X to ID of your forum and of-course the image.

/* Node icons */
.node--idX .node-icon i { display: none; }
.node--idX .node-icon {
background-image: url('/images/yourimage.png');
background-repeat: no-repeat;
background-position: center;   
}
.node--forum.node--idX.node--read .node-icon {
background-image: url('/images/yourimage.png');
background-repeat: no-repeat;
background-position: center;
opacity: 0.4;
}
/* Node icons End */

If you just want to change the read and unread default XF2 nodes to 1 image.

/**********/
.node .node-icon i { display: none; }
.node .node-icon {
background-image: url('/images/yourpic.png');
background-repeat: no-repeat;
background-position: center;   
}
.node--forum.node--read .node-icon {
background-image: url('/images/yourpic.png');
background-repeat: no-repeat;
background-position: center;
opacity: 0.4;
}
/**********/

Thank you very much for this once again, Jordyn!

 

[Jordyn]

Thank you very much for this once again, Jordyn!

You're welcome mate

 

[Nomed Senkrad]

Hi! Thanks for this script! I just updated my forum from 1.4 to the latest version of XF and I'm step by step customizing some the aspects.

I managed to change the node icons with custom images, but I noticed that this changes also the icons of links and pages in the forum list.



Is there a way to change this icons too with other types, without having to specify the ID for each one of them?

 

[Jordyn]

Is there a way to change this icons too with other types, without having to specify the ID for each one of them?

I reckon this mite work for you mate.

/**********/
.node .node-icon i { display: none; }
.node .node-icon {
background-image: url('https://link-to-node.png');
background-repeat: no-repeat;
background-position: center;   
}
.node--forum.node--read .node-icon {
background-image: url('https://link-to-node-read.png');
background-repeat: no-repeat;
background-position: center;
}
/**********/
.node--link .node-icon {
background-image: url('https://link-to-node-link-icon.png');
background-repeat: no-repeat;
background-position: center;   
}
.node--page .node-icon {
background-image: url('hhttps://link-to-node-page-icon.png');
background-repeat: no-repeat;
background-position: center;   
}
/**********/

 

[Nomed Senkrad]

I reckon this mite work for you mate.

Great! It's perfect! Thank you very very much!

 

[Donske]

This is awesome and works right out of the box. I used Firefox inspector to find out which node I was changing. The only other thing I did was add one extra directory to the relative file path. The code has a' given' .png, but I needed to change mine to a .jpg
Excellent.

 

[bzcomputers]

This is awesome and works right out of the box. I used Firefox inspector to find out which node I was changing. The only other thing I did was add one extra directory to the relative file path. The code has a' given' .png, but I needed to change mine to a .jpg
Excellent.

Be aware there is also a free add-on available now that does this and works well: https://xenforo.com/community/resources/node-icon.6285/

 

[Rinkrat]

THANKS for this! Working great.