Question: Custom port colors

[hybridherbst]

For a specific case, I have both string input and output ports. However, I'd like to color the input ports differently. Is there a way to add a VisualElement class to a generated port somehow? I'm aware I can change the colors in general in the stylesheet (and attaching a custom one works) but I can't figure out how to do such a color separation.

[hybridherbst]

I found a workaround for that specific case:

MyNodeView #input .Port_String {
    --port-color: #FFFF80;
}

MyNodeView #output .Port_String {
    --port-color: #FF0080;
}

The question still stands if it's possible to color a specific port differently.

[TeorikDeli]

You can select each port via its name as USS class, like:

MyNodeView #input .parameterName { --port-color: #FF0080; }

But, it could be better to use like

MyNodeView #input .Port_Type.parameterName { --port-color: #FF0080; }

because Unity's selector system is not very good.

By the way, I am always using UIElements Debugger. It is very useful. It's in the window->analysis->UIElements Debugger in 2019.3/4 and window->UI Toolkit->Debugger in 2020.1

[hybridherbst]

Yes, that's how I found the workaround :) Thanks for pointing me to the fact that parameter names also show up as classes, that's cool. I guess the question still stands whether it's possible to add a class or so from the graph system itself; reason would be that you might e.g. have a case where you want to show null strings differently than non-null strings, or color objects of a specific class different depending on their content.

[TeorikDeli]

Hmmm, I misunderstood then. Right now you can't add this without using NodeView editor script, or creating new Attribute if I am not wrong. If you'll use this every node possible, I'd suggest to add a new Attribute, usage like [Input(name="In", PortClass("fancy-port")]

This file might help

[alelievr]

You can use the layoutStyle property in BaseNode to add a custom style sheet to a node without having to write a view.

Otherwise, you'll need to create a custom BaseNodeView and make all your nodes inherit it.