![[cXF] Coloured Node Icons](https://www.societyfrenchmodding.net/data/attachments/9/9549-398d6df99300a88f07db9f9779d86ecb.jpg?hash=OY1t-ZMAqI){kind=small}
- Discussions
- 4 839
- Messages
- 12 546
- Solutions
- 84
- J'aime
- 7 848
- Points
- 198
How to change node icon colour to something like that ?
This is a DIY step-by-step tutorial.
Before changing the code let's get prepared:
For Forum node type icon (read and unread) add this code to your extra.less template :
Change
Result for read and unread icon :
To change also the subforum node type icon edit the above code to this :
Result for subforum icon :
Change Category node type icon
Change Link forum node type icon
Change Page node type icon
These are the basic steps. There, of course, may be specifics.
This is a DIY step-by-step tutorial.
Before changing the code let's get prepared:
- To change the category block header see this guide.
- Be sure what type is your node you wish to change the icon for (Category, Forum, Link forum or Page).
- If you don't know how to check node ID, please check this resource.
For Forum node type icon (read and unread) add this code to your extra.less template :
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
Change
X to your node ID.Result for read and unread icon :
To change also the subforum node type icon edit the above code to this :
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
Result for subforum icon :
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 for read icon to above code or check the code below for better understanding:
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
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:
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
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 for read icon to above code or check the code below for better understanding:
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
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:
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
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 for read icon to above code or check the code below for better understanding:
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
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:
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
These are the basic steps. There, of course, may be specifics.
![[cXF] Icons in Visitor menu](https://www.societyfrenchmodding.net/data/attachments/9/9548-14557a2fad5a1c1e6ee2cd925a6cc77a.jpg){kind=small}
![[cXF] Thread prefix icons](https://www.societyfrenchmodding.net/data/attachments/9/9553-9cd264630061be7873faf8ec541383c0.jpg){kind=small}
![[cXF] Node icons with image](https://www.societyfrenchmodding.net/data/attachments/1/1412-caa2cc220eff5acbfcd708518afa008e.jpg){kind=small}
![[cXF] Icons for Login and Register buttons](https://www.societyfrenchmodding.net/data/attachments/9/9726-784353cfcc48a9354d28e8e222463e09.jpg){kind=small}
![[cXF] Icons in sidenav on Account page](https://www.societyfrenchmodding.net/data/attachments/9/9559-ede1b37f769e934beb6c483e695e72f8.jpg){kind=small}