XF 2.1 Nodes png icons

Faust · Jun 14, 2020

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.

Faust · Jun 21, 2020

Thanks, but I want for each node to have different png icon. Not for all the same icons. Would this be possible?

l3ta · Jun 21, 2020

FaustVasea said:
Thanks, but I want for each node to have different png icon. Not for all the same icons. Would this be possible?

Ah, okay. You want something like this:

It can be done is CSS. You need to put the code below in extra.less:

Code:

.block-body{

.node--id2 i {background: url(https://i.imgur.com/GiPCGAJ.png)no-repeat center;}

.node--id3 i {background: url(https://i.imgur.com/BuxWZ1Y.png)no-repeat center;}
    
.node--id6 i{background: url(https://i.imgur.com/a1sqk5J.png)no-repeat center;}

.node--id10 i{background: url(https://i.imgur.com/vCaelJz.png)no-repeat center;}   
    
}

Faust · Jun 21, 2020

l3ta said:

Ah, okay. You want something like this:

It can be done is CSS. You need to put the code below in extra.less:

Code:

.block-body{

.node--id2 i {background: url(https://i.imgur.com/GiPCGAJ.png)no-repeat center;}

.node--id3 i {background: url(https://i.imgur.com/BuxWZ1Y.png)no-repeat center;}
   
.node--id6 i{background: url(https://i.imgur.com/a1sqk5J.png)no-repeat center;}

.node--id10 i{background: url(https://i.imgur.com/vCaelJz.png)no-repeat center;}  
   
}

Alright, so it can be done with CSS code? Would this be responsible on phone too?

l3ta · Jun 21, 2020

FaustVasea said:
Alright, so it can be done with CSS code? Would this be responsible on phone too?

It should be. Try it out and then check on mobile.

Faust · Jun 21, 2020

l3ta said:
It should be. Try it out and then check on mobile.

Thanks, I will try and let you know the results. Thanks a lot.

Faust · Jun 21, 2020

By the way, what's the css code for unread and read icon?

l3ta · Jun 21, 2020

FaustVasea said:
By the way, what's the css code for unread and read icon?

Now you're just getting greedy lol. I've not figured that out. You will have to get an addon for that

Faust · Jun 21, 2020

l3ta said:
Now you're just getting greedy lol. I've not figured that out. You will have to get an addon for that

I've got node tweak. But doesn't seem to be working

l3ta · Jun 21, 2020

FaustVasea said:
I've got node tweak. But doesn't seem to be working

Yeah. You need to speak with the developer about that. In the meantime, you can have different images for each node with the code above. That's wut I have on one of my styles.

Faust · Jun 21, 2020

l3ta said:
Yeah. You need to speak with the developer about that. In the meantime, you can have different images for each node with the code above. That's wut I have on one of my styles.

Thanks.

alfaNova · Jun 22, 2020

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

If you add below code to extra.less your unread nodes icon will seen %50 opacity. I think this is better than totally different icon.

Less:

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

Faust · Jun 22, 2020

Fatih Özcan said:
If you add below code to extra.less your unread nodes icon will seen %50 opacity. I think this is better than totally different icon.

Less:

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

So what’s the entire code should I use for read and unread png icons to replace each node individually ? Thanks

alfaNova · Jun 22, 2020

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 */

Faust · Jun 22, 2020

Fatih Özcan said:
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:



Replace this code with follows.

PHP:

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

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 */

Then I need to add this to each node separately?

PHP:

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

alfaNova · Jun 22, 2020

FaustVasea said:
Then I need to add this to each node separately?

PHP:

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

No.



Find above code in node_list_forum template and replace it with below code.


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


Save this template.

Upload your icons to defined folder by you.

Faust · Jun 22, 2020

Fatih Özcan said:
No.



Find above code in node_list_forum template and replace it with below code.


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


Save this template.

Upload your icons to defined folder by you.

Alright , let me try this and I will get back to you again. Thanks for your help.

Faust · Jun 22, 2020

Fatih Özcan said:
No.



Find above code in node_list_forum template and replace it with below code.


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


Save this template.

Upload your icons to defined folder by you.

This does not work, messed up my whole forum.

Faust · Jun 22, 2020

l3ta said:

Ah, okay. You want something like this:

It can be done is CSS. You need to put the code below in extra.less:

Code:

.block-body{

.node--id2 i {background: url(https://i.imgur.com/GiPCGAJ.png)no-repeat center;}

.node--id3 i {background: url(https://i.imgur.com/BuxWZ1Y.png)no-repeat center;}
   
.node--id6 i{background: url(https://i.imgur.com/a1sqk5J.png)no-repeat center;}

.node--id10 i{background: url(https://i.imgur.com/vCaelJz.png)no-repeat center;}  
   
}

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

kick · Jun 22, 2020

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);

Faust · Jun 22, 2020

kick said:

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);

Is this will work with TH nodes addon ?

XF 2.1 Nodes png icons

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Similar threads

We value your privacy