Step 1 :
Step 2 :
Step 3 :
Step 4 :
- You can skip it if you know node numbers. (Inspect element on Icon)
If you know the subcategory or node number, skip this section
Step 2 :
- Make Sure you upload icons to server size (32x32) & Add to Extra.less >> Save
Save and prepare the images in 32x32 size, then put the above codes in the above template Extra.less
Code:
.node--id5 .node-icon i {
display: none;
}
.node--id5 .node-icon {
background: url('styles/default/xenforo/xenforo-favicon.png');
width:auto;
background-repeat: no-repeat;
background-position: center;
}
Step 3 :
- If You want multiple nodes you can add as many as you want for example
The following code will display a large number of nodes
Code:
.node--id2 .node-icon i {
display: none;
}
.node--id2 .node-icon {
background: url('styles/default/xenforo/xenforo-favicon.png');
width:auto;
background-repeat: no-repeat;
background-position: center;
}
.node--id3 .node-icon i {
display: none;
}
.node--id3 .node-icon {
background: url('styles/default/xenforo/xenforo-favicon.png');
width:auto;
background-repeat: no-repeat;
background-position: center;
}
Step 4 :
- Notes: You can aslo customize nodes depending on read and unread sections for example
Note: Note that you can even divide nodes into read and unread sections
Code:
.node--id2.node--depth2.node--forum.node--read .node-icon {
background: url('styles/default/xenforo/xenforo-favicon.png');
width:auto;
background-repeat: no-repeat;
background-position: center;
}
.node--id2.node--depth2.node--forum.node--unread .node-icon {
background: url('styles/default/xenforo/xenforo-different.png');
width:auto;
background-repeat: no-repeat;
background-position: center;
}