Interactive range slider filter widget and nominal row filter widget.

[setor]

Hello fellow Knimers,

I would be glad if anyone could assist with a way to change font-size and color of titles in both interactive range slider filter and nominal row filter widgets.

I have tried using css editor node with .knime-title{font-size: 1em;
color: #80808080;
}

Thank you.
range filter settings.knwf (50.8 KB)

[marvin.kickuth]

Hi @setor,

You’re correct on the CSS, but I’m afraid the Nominal Row Filter Widget – KNIME Hub and Interactive Range Slider Filter Widget – KNIME Hub do not support the knime-title attribute.

You can find most nodes and their attributes here:
https://docs.knime.com/2021-12/analytics_platform_css_guide/index.html

Kind regards
Marvin

[setor]

Your apt response is appreciated.

In a further attempt to solve the challenge, the below steps were considered. Could you take a look and offer possible solutions for styling the labels in both the nominal row filter widget and the interactive range slider filter widget?

1. The objective here is to apply CSS to the labels.
   

   

2. I stepped into Knime’s source code, following instructions on the official GitHub page, but couldn’t locate the CSS file for both instances.

Happy Knimer.

[marvin.kickuth]

Hi @setor,

I don’t have the relevant lines of code available, though if you really want to dig deep into the CSS, you could enable debugging for the views by appending following lines to your knime.ini file:

-Dchromium.remote_debugging_port=8989
-Dchromium.debug=true

After restarting KNIME you should see a small icon on views that you can click to open a browser window, in which you can take a deeper look at the field names.

Kind regards
Marvin

[setor]

For some unknown reason, i don’t seem to get this icon. Could you give a visual?

[marvin.kickuth]

Sure thing. The button (two buttons to be precise) should appear when you open the interactive view of your component:

[setor]

seen and able to view the dashboard as an HTML file.

I am able to make the needed changes in the debug mode and not in Knime. Please take a look at my snapshot for further guidance.

Thank you.

[marvin.kickuth]

Hi @setor,

the debug mode is not meant to propagate or even persist changes done in the developer tools. However, you may be able to figure out the name of the elements you need to change in your custom CSS code.

I’m afraid I can’t help you further than point you to the source code. As mentioned, the widgets don’t officially support the changes you intended to make.

Kind regards
Marvin

[setor]

Hi @marvin.kickuth,

I have been able to resolve my challenge with a workaround solution.

1. I added an HTML code to a text output widget and customized it to meet my needs.

2.A second strategy I used was to add plain text HTML to the .json code snippet.

Thank you.