PortRenderer - CSS Organization

[tthiery]

Awesome library, I start experimenting with it and I want to give you early impression feedback. Please close if not applicable.

Expectation I wanted to build a custom widget for a specialized node and use the default port construct (for tackling one problem at the time).

Actual When I used my custom CSS and used the following snippet the default PortRenderer will not work (at least visually)

<div style="width: 250px; height: 150px;border: 1px solid red;" class="">
    Foobar
    @foreach (var port in Node.Ports)
    {
        <PortRenderer @key="port" Port="port" Class="default"></PortRenderer>
    }
</div>

Once I add class ="default-node" it starts working and shows the round "standard" ports. Unfortunately, now the node visual is also changed which is my intention to change. I discovered this after digging in the library source code; the tutorial unfortunately does not mention this because it is end-2-end with custom ports (which then run their own CSS).

Possible Explanation The style for the ports is nested below default-node as default-node port.left etc. Which unfortunately is not only doing core structure (position, flex, naming) but also some elementary styles additions on the node (like the round corners, shadow, etc). Maybe an option could be to separate the default theming from the anchoring of the default port rendering.

Alternatives Obviously running my own port CSS

Version NuGet: 3.0-beta5

[zHaytam]

Hey!

You probably imported the default CSS style rules in your host file, so maybe just remove that and fully control how nodes/ports show?

[tthiery]

Oh I did definitely. Followed the tutorial.

Okay, so the style.css is handling the core UI behavior (position, hand curser, etc) and default.css is all the default styling which as a user you basically clone and modify to achieve your theme?

I can follow that thought.

Quick feedback: maybe helpful to explain the CSS wrap around (node class, layer thingy etc). When write custom widgets ... which I guess everyone at a certain point needs to do, this part is very critical to understand.

I close this issue, since my original question is answered. Thanks!!!

[zHaytam]

You are right, I'm trying to incorporate that in the new documentation website.