XF 2.1 Nodes png icons

F

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.
 
Sort by date Sort by votes
FaustVasea said:
Thanks, but I want for each node to have different png icon. Not for all the same icons. Would this be possible?
Click to expand...
Ah, okay. You want something like this:

JZh2pqI.png


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;}   
    
}
 
Upvote 0 Downvote
l3ta said:
Ah, okay. You want something like this:

JZh2pqI.png


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;}  
   
}
Click to expand...


Alright, so it can be done with CSS code? Would this be responsible on phone too?
 
Upvote 0 Downvote
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 */
Click to expand...

So what’s the entire code should I use for read and unread png icons to replace each node individually ? Thanks 😊
 
Upvote 0 Downvote
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 */
 
Upvote 0 Downvote
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: 
<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 */
Click to expand...

Then I need to add this to each node separately?

PHP:
<span class="node-icon" aria-hidden="true">
<img class="cticnbrdr" src="/styles/default/xenforo/icon/{$node.node_id}.png" alt="{$node.title}" />
</span>
 
Upvote 0 Downvote
FaustVasea said:
Then I need to add this to each node separately?

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

No.

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

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

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

Save this template.

Upload your icons to defined folder by you.
 
Upvote 0 Downvote
Fatih Özcan said:
No.

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

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

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

Save this template.

Upload your icons to defined folder by you.
Click to expand...

Alright , let me try this and I will get back to you again. Thanks for your help.
 
Upvote 0 Downvote
Fatih Özcan said:
No.

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

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

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

Save this template.

Upload your icons to defined folder by you.
Click to expand...

This does not work, messed up my whole forum.
 
Upvote 0 Downvote
l3ta said:
Ah, okay. You want something like this:

JZh2pqI.png


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;}  
   
}
Click to expand...


This doesn't work either . It's not even display on forum.
 
Upvote 0 Downvote
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);
 
Upvote 0 Downvote
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);
Click to expand...

Is this will work with TH nodes addon ?
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

javakhir
icons for Nodes, Category, Forums [Deleted]
Replies
1
Views
16
javakhir
javakhir
javakhir
icons for Nodes, Category, Forums [Paid]
Replies
17
Views
197
Rycky
R
mejmet
  • Question Question
XF 2.2 How to change default icons?
Replies
1
Views
66
Mr Lucky
Mr Lucky
hakyangler
  • Question Question
XF 2.3 sub forum icons
Replies
0
Views
34
hakyangler
hakyangler
dabollicks
  • Solved
XF 2.3 Node icons
Replies
2
Views
269
dabollicks
dabollicks
Back
Top Bottom