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

 

[Deleted member 184953]

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

 

[Deleted member 184953]

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;
}

 

[Deleted member 184953]

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.

 

[Deleted member 184953]

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

 

[Silmarillion]

Wrong thread. Sry.

 

[BassMan]

What you are showing here (in the second screenshot) is the filter bar. Try with this code (haven't tested) in the extra.less template:

[data-container-key="node-53"] .block-filterBar {
    background: red;
}

Change the node number and background value.

 

[Silmarillion]

Perfect! You are the best!

Do you perhaps have any advice on how I can fill the empty field with the name and pimp it up? Just like in the picture. With the forum description.



Best regards,
Chris

 

[BassMan]

In that case, I would rather change the code to this:

[data-container-key="node-53"] .p-body-header {
    background: red;
    color: #fff;
    padding: 10px;
    border-radius: 4px;
}

Now you won't have duplicated forum name and the forum title will be in colour. Maybe you will like this better.

 

[Silmarillion]

You are simply awesome, my friend!
Much better!!
Do you have any other ideas on how I can change the font color for the forum description?



I'm almost a little ashamed, but if I had such a helpful and competent person like you "in charge"...how would you enhance/highlight these football club forums?
I was thinking of a club logo that would be integrated in front of the respective forum name?!
Is this also possible with modification? Or is there an addon needed/is there for this?



Thank you very much in advance for your great help and support. I just have the best memories of the good old vBulletin 3 days in the early and mid-2000s!


Best regards,
Chris

 

[BassMan]

Do you have any other ideas on how I can change the font color for the forum description?

Add this to your extra.less template:

[data-container-key="node-53"] .p-description {
    color: #fff;
}

I was thinking of a club logo that would be integrated in front of the respective forum name?!
Is this also possible with modification? Or is there an addon needed/is there for this?

Maybe this can help: https://xenforo.com/community/resources/cxf-node-icons-with-image.7490/

 

[Deleted member 184953]

Hello Mr Bassman, what's the point of this part of code : text-shadow: none;?
Thanks.

 

[BassMan]

Hello Nick,

None actually. I need to remove it.