[cXF] Coloured Node Icons

[BassMan]

BassMan submitted a new resource:

Coloured Node Icons - ... DIY tutorial

Check Free and Premium cXF DIY Customizations on customizexf.com

How to change node icon colour to something like that?

View attachment 170904

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...

Read more about this resource...

 

[Skylined]

Thanks for this.


I think you've missed the Watched Forum (https://www.site.com/watched/forums) icons.

 

[michm0]

Thanks

 

[BassMan]

BassMan updated [cXF] Coloured Node Icons with a new update entry:

XF 2.2.2 or higher

• updated code for subforums in XF 2.2.2

Read the rest of this update entry...

 

[Nicolas FR]

I can't get the subforum icon changes with a new FA icon, i tried many times but fail.
This is my last code...

.node.node--id66 {
    
    &.node--forum {

        .node-icon i:before {
            .m-faBase();
            .m-faContent(@fa-var-bug);
        }
        
        .node-icon i:before, .subNodeLink.subNodeLink--forum .subNodeLink-icon:before {
            .m-faBase();
            .m-faContent(@fa-var-bug);
        }
        
    }
    
}

This code works for the forum displayed in its parent forum view but not on homepage...

 

[BassMan]

I can't get the subforum icon changes with a new FA icon, i tried many times but fail.
This is my last code...

.node.node--id66 {
   
    &.node--forum {

        .node-icon i:before {
            .m-faBase();
            .m-faContent(@fa-var-bug);
        }
       
        .node-icon i:before, .subNodeLink.subNodeLink--forum .subNodeLink-icon:before {
            .m-faBase();
            .m-faContent(@fa-var-bug);
        }
       
    }
   
}

This code works for the forum displayed in its parent forum view but not on homepage...

Check here: https://xenforo.com/community/threads/cxf-change-default-fa-node-icon.172082/#post-1542955

 

[Nicolas FR]

Hello,
How to get the subforum icon coloured on the parent forum page?
Thanks.

 

[BassMan]

Hello,

You mean here?


Add this code:

/* for read node */
[data-container-key="node-212"] .node.node--depth2.node--forum.node--read .node-icon i:before {
    color: #9E5596;
}
/*for unread node */
[data-container-key="node-212"] .node.node--depth2.node--forum.node--unread .node-icon i:before {
    color: #9E5596;
}

 

[Nicolas FR]

Yep those ones, but weirdly your code doesn't work.

/* forum suggestion */
[data-container-key="node-57"] .node.node--depth2.node--suggestion.node--read .node-icon i:before {
    color: #F2930D;
    opacity: 30%;
}
[data-container-key="node-57"] .node.node--depth2.node--suggestion.node--unread .node-icon i:before {
    color: #F2930D;
}


/* forum general */
[data-container-key="node-48"] .node.node--depth2.node--forum.node--read .node-icon i:before {
    color: #F2930D;
    opacity: 30%;
}
[data-container-key="node-48"] .node.node--depth2.node--forum.node--unread .node-icon i:before {
    color: #F2930D;
}

 

[BassMan]

The data-container-key for your Suggestions node is node-39. Inspect the page where that subforum is.

In other words, the node ID is from the parent node.

 

[Nicolas FR]

Of course !
It works fine now, thank you very much.

 

[BassMan]

BassMan updated [cXF] Coloured Node Icons with a new update entry:

Support for XenForo 2.3

• Support for XenForo 2.3

Read the rest of this update entry...