XF 2.0 change Node Icons to IMG in XenForo 2.0

Jordyn

Well-known member

Saeed

Well-known member
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.
Code:
/* 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.
Code:
/**********/
.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! :giggle:
 
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.

202754

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

Jordyn

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


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

Donske

Member
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

Well-known member
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/
 
Top