Resource icon

XF2 GUIDE Coloured Node Icons

How to change node icon colour to something like that?

cni-main.png

This is a DIY step-by-step tutorial.


Before changing the code let's get prepared:
  1. To change the category block header see this guide.
  2. Be sure what type is your node you wish to change the icon for (Category, Forum, Link forum or Page).
  3. If you don't know how to check node ID, please check this resource.

Change Forum node type icon

For Forum node type icon (read and unread) add this code to your extra.less template:
Code:
/* Coloured Node Icons */
.block.block--category.block--categoryX {
/* read icon */
.node--forum.node--read .node-icon i:before {
color: #e6cbe4;
text-shadow: none;
}
/* unread icon */
.node--forum.node--unread .node-icon i:before {
color: #9e5697;
text-shadow: none;
}
}
/**********/
Change X to your node ID.
cni-read.png
cni-unread.png


To change also the subforum node type icon edit the above code to this:
Code:
/* Coloured Node Icons */
.block.block--category.block--categoryX {
/* read icon */
.node--forum.node--read .node-icon i:before, .subNodeLink.subNodeLink--forum:before {
color: #e6cbe4;
text-shadow: none;
}
/* unread icon */
.node--forum.node--unread .node-icon i:before, .subNodeLink.subNodeLink--forum.subNodeLink--unread:before {
color: #9e5697;
text-shadow: none;
}
}
/**********/
Result for subforum icon:
cni-subforum.png




Change Category node type icon

Look steps above and edit the code to suit your needs. You can simply add this .node--category.node--read .node-icon i:before for read icon to above code or check the code below for better understanding:
Code:
/* Coloured Node Icons */
.block.block--category.block--categoryX {
/* read icon */
.node--forum.node-- read .node-icon i:before, .subNodeLink.subNodeLink--forum:before,
.node--category.node--read .node-icon i:before {
color: #e6cbe4;
text-shadow: none;
}
/* unread icon */
.node--forum.node-- u nread .node-icon i:before, .subNodeLink.subNodeLink--forum.subNodeLink--unread:before, .node--category.node--unread .node-icon i:before {
color: #9e5697;
text-shadow: none;
}
}
/**********/

Change Link forum node type icon

Look steps above and edit the code to suit your needs. You can simply add this .node--link .node-icon i:before for read icon to above code or check the code below for better understanding:
Code:
/* Coloured Node Icons */
.block.block--category.block--categoryX {
/* read icon */
.node--forum.node-- read .node-icon i:before, .subNodeLink.subNodeLink--forum:before,
.node--category.node--read .node-icon i:before, .node--link .node-icon i:before {
color: #e6cbe4;
text-shadow: none;
}
/* unread icon */
.node--forum.node-- u nread .node-icon i:before, .subNodeLink.subNodeLink--forum.subNodeLink--unread:before, .node--category.node--unread .node-icon i:before {
color: #9e5697;
text-shadow: none;
}
}
/**********/

Change Page node type icon

Look steps above and edit the code to suit your needs. You can simply add this .node--page .node-icon i:before for read icon to above code or check the code below for better understanding:
Code:
/* Coloured Node Icons */
.block.block--category.block--categoryX {
/* read icon */
.node--forum.node-- read .node-icon i:before, .subNodeLink.subNodeLink--forum:before,
.node--category.node--read .node-icon i:before, .node--link .node-icon i:before, .node--page .node-icon i:before {
color: #e6cbe4;
text-shadow: none;
}
/* unread icon */
.node--forum.node-- u nread .node-icon i:before, .subNodeLink.subNodeLink--forum.subNodeLink--unread:before, .node--category.node--unread .node-icon i:before {
color: #9e5697;
text-shadow: none;
}
}
/**********/
These are the basic steps. There, of course, may be specifics.
Author
shimmer
Views
501
First release
Last update
Rating
0.00 star(s) 0 ratings

More resources from shimmer

Top