Hello,
I am using various widgets and input nodes such as “String Input” for user interaction. I would like to color some of the entry/input fields, so that the user enters values e.g. in an organge instead of a white field. Is it possible to change the color of the entry field with the CSS Editor? If yes, how would I do that?
Best Saskia
Hi @saskia
Yes, this is possible! However, you will have to enable legacy mode for the components in which your widgets reside. This is a check box within the layout editor (located in the tool bar. Open when you are inside the component)
Fields you can style in each node are listed here: CSS Styling for JavaScript Views and Widget/Quickform Nodes (Legacy)
Here is a small example workflow:
css-example.knwf (12.3 KB)
Let me know how this goes for you 
Kind regards
Marvin
ps. don’t forget to set the custom CSS flow variable in the visualization widgets.
Thanks a lot. That was exactly what I was looking for. I just had to change “.knime-string” to “.knime-single-line” in the CSS editor so that it also works for the value selection widget. .
I have just one more question. Is there a function that would make it possible to have the entry field in orange at the beginning (default - no text), but as soon as the user enters or selects something the color will change e.g. to white again?
I guess it will not be possible, but it would be a nice to have maybe for the future.
Best Saskia
Hi @saskia
sorry for the late reply.
I’m afraid I wasn’t able to build that with css, though it should be possible with a Generic JavaScript View node. However, it isn’t exactly straight forward and I don’t have an example ready right now. Maybe we have a JS expert on the forum, that has an example to share?
Kind regards
Marvin
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
