Change the box color of KNIME web portal header nodes

Hello,

I want to change the color of this box part (from yellow to other colors…), but I can’t find the right part of the code inside the header node ( CSS Editor ).


image

Which part do I need to change the color of that part ?

I can only see that I can change the color of the background color of the bix box header (in grey).

Hallo @PUKimSu,

Welcome to the KNIME Forum.
I’m not sure from which workflow this screenshot is exactly from, but the color of those boxes are changed in the Generic Java Script View. There should be something like this:

But we also have a verified component Data App Flowchart, where you can create and customize your Flowchart Header in the configuration dialog. See this example workflow: Data App Flowchart Example – KNIME Hub

I hope this helps. Let me know if you have further questions,
Janina

1 Like

Hello jania, thanks for your answer.

Actually it is not the part of the worflow.

It is the template of the KNIME web portal server from KNIME hub examples.

image

When I execute the web portal header, it looks like this.

And inside the component of web portal header, I can’t find the part of changing the color of yellow box part in CSS editor.

Could you check again and if you have any idea you can let me know ?

Thank you.

Best,

Hallo @PUKimSu,

This is a similar component. You would first need to “Disconnect the Link”, so you are actually able to change the settings inside this component.
Then you open the Generic Java Script node. In line 158 you can see that the variable “yellow_string” is defined. You can add another variable with the color of your choice. For example var red_string = "rgb(255,0,0)"
From line 270 - 287 the node from the header is defined (see the screenshot from my first response). There you can also see the attribute “fill” being defined (marked by a green arrow in my screenshot). There you can simply replace yellow_string with your variable (red_string) you defined in line 158.

Again, I would recommend using our newly created verified component Data App Flowchart. It does exactly the same thing, but you would not need to go into the code to change the colours.

I hope that helps,
Janina

1 Like

Hello Janina,

Thank you so much for your comments. I got it :slight_smile:

Have a good day.
Best,