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.

 

[kick]

idk, check it yourself, but the ideas should

 

[Faust]

idk, check it yourself, but the ideas should

Can I usee capacity css code instead of 2 png icons?

 

[l3ta]

This doesn't work either . It's not even display on forum.

It works if it is done correctly. The other methods ppl are suggesting are too advanced, imo. Changes to templates are tricky if you don't know wut you are doing. That is why it is better whenever possible to make the changes in extra.less.

 

[kick]

Can I usee capacity css code instead of 2 png icons?

Example

• Node id - 2
• Link to image of unread forums - url("styles/xenforo/forum_new.png")
• The link to the image of the read forums is url ("styles/xenforo/forum_old.png"), if not specified, then the grayscale filter will be used, with a value of 100%
• Height - 42px, this parameter has a default value, but you can change it to your own if you wish
• Width - 42px, this parameter has a default value, but you can change it to your own if you wish

You can use false and used grayscale

This is where the condition occurs, and if not specified, then a filter is applied

 

[Faust]

The problem is, that doesn't appear on forum nodes

 

[Faust]

.m-nodeImgIcons(@node-id; @unreadImage; @readImage: false; @height: 40px; @width: 40px) {
    .node--id@{node-id} {
        .node-icon i {
            &:before {
                content: none;
            }

            .node--read& {
                & when (@readImage = false) {
                    -webkit-filter: grayscale(100%);
                    filter: grayscale(100%);
                }
            }

            .node--forum&,
            .node--category& {
                & when (isurl(@unreadImage)) {
                    background: @unreadImage no-repeat;
                }
                & when (ispixel(@height)), (ispixel(@width)) {
                    height: @height;
                    width: @width;
                }

                .node--read& when (isurl(@readImage)) {
                    background: @readImage no-repeat;
                }
            }

            .node--page& {
                & when (isurl(@unreadImage)) {
                    background: @unreadImage no-repeat;
                }
                & when (ispixel(@height)), (ispixel(@width)) {
                    height: @height;
                    width: @width;
                }
            }

            .node--link& {
                & when (isurl(@unreadImage)) {
                    background: @unreadImage no-repeat;
                }
                & when (ispixel(@height)), (ispixel(@width)) {
                    height: @height;
                    width: @width;
                }
            }
        }
    }
}

// NODE IDS
.m-nodeImgIcons(2; url("styles/xenforo/forum_new.png"); url("styles/xenforo/forum_old.png"); 42px; 42px);
.m-nodeImgIcons(3; url("styles/xenforo/forum_new.png"); false; 42px; 42px);
.m-nodeImgIcons(4; url("styles/xenforo/forum_new.png"); false; 42px; 42px);
.m-nodeImgIcons(5; url("styles/xenforo/forum_new.png"); false; 42px; 42px);

What should I change here?

 

[kick]

To do this, you need to see a live

 

[Faust]

This is what I'm doing, I guess might not work with TH nodes addon

 

[alfaNova]

I am using this method and is working very well to me.

 

[Faust]

I am using this method and is working very well to me.

And do you using it on TH nodes with UIX theme?

 

[alfaNova]

And do you using it on TH nodes with UIX theme?

No. I am using almost default theme with small changes.

 

[kick]

And do you using it on TH nodes with UIX theme?

I said you need to watch live, I do not know how to guess from screenshots and there are no additions.

 

[Faust]

Probably on mine is a bit complicated here.

 

[Gemma]

And do you using it on TH nodes with UIX theme?

All the codes that have been provided should work with [TH] Nodes and UI.X based themes. I've used both together on previous sites without any problems and my test site on localhost has no problems either. You are either going to need to provide a link or give someone access to your site to see what the problem is.

 

[Faust]

All the codes that have been provided should work with [TH] Nodes and UI.X based themes. I've used both together on previous sites without any problems and my test site on localhost has no problems either. You are either going to need to provide a link or give someone access to your site to see what the problem is.

Thanks, the issue is, once I have css code into extra.less then the original icon disappears and the new png file is not appearing at all on forum.

 

[l3ta]

Thanks, the issue is, once I have css code into extra.less then the original icon disappears and the new png file is not appearing at all on forum.

Did you tick the box that says "use images for node icons"?

Copy and paste the code you have in css so we can see if something is missing.

 

[Faust]

Did you tick the box that says "use images for node icons"?

Copy and paste the code you have in css so we can see if something is missing.

Thanks. I will give it a try again today, and will get back here with results.

 

[Faust]

If you follow my posts. You can change node icon for each node. And with last extra.less code you can set %50 opacity of read nodes.

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

if you upload icon to ftp as named;
for example
node id 1 --> 1.png
node id 2 --> 2.png
node id 3 --> 3.png
node id 4 --> 4.png

your node icon change automatically. and if you add below code to extra.less, node icon will seen %50 opacity if there is no new posts in forum.

/* Node Forum Icon Use - Start */
.node--read .node-icon {
opacity: 50%;
}
/* Node Forum Icon Use - End */

This isn't working

 

[Fecom]

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

Thank you! It works perfectly.