XF 2.1 Nodes png icons

Faust

Well-known member
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.
 
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.
 
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
1592830232066.webp
This is where the condition occurs, and if not specified, then a filter is applied
 
Less:
.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?
 
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.
 
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.
 
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.
 
Last edited:
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.

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

Replace this code with follows.

PHP:
<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.

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

This isn't working
 

Attachments

  • Annotation 2020-06-24 130956.webp
    Annotation 2020-06-24 130956.webp
    834 bytes · Views: 10
open the node_list_forum template

Find below code.

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

Replace this code with follows.

PHP:
<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.
 
Back
Top Bottom