XF 2.1 Nodes png icons

[Faust]

Hello. I would like to ask how I can change nodes icons with png icons ? Or if there are any addon which can do this Thanks.

 

[gogo]

Google 'change node icons xenforo'.

 

[Faust]

Google 'change node icons xenforo'.

Thanks, but I don’t think funny mate.

 

[gogo]

Thanks, but I don’t think funny mate.

I meant to help. Anyway there are indeed many resources.

Maybe you can try: https://xenforo.com/community/resources/xfa-nodes-icon-tweak-xf2.5683/

 

[Faust]

I meant to help. Anyway there are indeed many resources.

Maybe you can try: https://xenforo.com/community/resources/xfa-nodes-icon-tweak-xf2.5683/

I tried, that's very buggy addon. Unfortunately developer will fix the issue in couple of weeks which disappoints me for a paid addon.

 

[alfaNova]

open the node_list_forum template

Find below code.

<span class="node-icon" aria-hidden="true"><i></i></span>

Replace this code with follows.

<span class="node-icon" aria-hidden="true">
<img class="cticnbrdr" src="/styles/default/xenforo/icon/{$node.node_id}.png" alt="{$node.title}" />
</span>

Icon location: /styles/default/xenforo/icon/ this is icon location in FTP, you replace it with your own.
Icon name: Icon name should match with node id. That's mean your icon name for node id 5 should be 5.png

 

[Faust]

open the node_list_forum template

Find below code.

<span class="node-icon" aria-hidden="true"><i></i></span>

Replace this code with follows.

<span class="node-icon" aria-hidden="true">
<img class="cticnbrdr" src="/styles/default/xenforo/icon/{$node.node_id}.png" alt="{$node.title}" />
</span>

Icon location: /styles/default/xenforo/icon/ this is icon location in FTP, you replace it with your own.
Icon name: Icon name should match with node id. That's mean your icon name for node id 5 should be 5.png

would this work with read and unread , also with TH nodes addon ?

 

[l3ta]

would this work with read and unread , also with TH nodes addon ?

So you want two different images, right? One for read and another for unread?

 

[Faust]

So you want two different images, right? One for read and another for unread?

That's right. I'm using TH nodes. Which unfortunately aren't supporting png files.

 

[l3ta]

That's right. I'm using TH nodes. Which unfortunately aren't supporting png files.

They do support png files. I have them in my forum: ALIENBABBLE.COM

 

[Faust]

They do support png files. I have them in my forum: ALIENBABBLE.COM

Are you sure? As I could not found where. I want read and unread png files to set up for each node individually.

 

[l3ta]

Are you sure? As I could not found where. I want read and unread png files to set up for each node individually.

Very well. Are you ready to begin?

 

[Faust]

Very well. Are you ready to begin?

Yes, why no.

 

[l3ta]

Yes, why no.

Very well. Now, please post the node images you want to use for both read and unread so I can work on the code in my test forum.

 

[Faust]

Very well. Now, please post the node images you want to use for both read and unread so I can work on the code in my test forum.

I have only read one at the moment. By the way, I have 30 nodes my forum.

 

[l3ta]

I have only read one at the moment. By the way, I have 30 nodes my forum.

Is this how your forum setup looks like:

 

[Faust]

Is this how your forum setup looks like:

Yes, but instead of normal node icons, I want my own png icons.

 

[l3ta]

Yes, but instead of normal node icons, I want my own png icons.

TH has that ability to change the icons to pngs built in. See the pic below:

The aliens are the read images and the flying saucers the unread ones. Is that wut you want or something else?

 

[Faust]

TH has that ability to change the icons to pngs built in. See the pic below:

The aliens are the read images and the flying saucers the unread ones. Is that wut you want or something else?

this is what I want, how I can achieve this ?

 

[l3ta]

this is what I want, how I can achieve this ?

OK. Go to your admin control panel, click on Appeareance>Styles>Styles properties>Node icons. When you get to node icons, you are going to thick the box that says "use images for node icons." After that, you are going to change replace the read and unread icon urls with your png images urls> See the pic below: