CSS Styling Dashboard

KNIME Analytics Platform
1

Hello,

I have recently started to create Dashboards in KNIME and I am attempting to style the page, but i am unable to connect the CSS to the output.

I have managed to create a header (using the examples found on the KNIME learning). However i was wondering two things:

  1. I can’t understand how the CSS works entirely, does it need to be ran through a generic JavaScriptView?
  2. When im trying to change the background and alter variables within a div, such as the “File Download Widget”, how do i do that? I have tried using the div tag within my style sheet but it isn’t applying the variables that i am setting.

below is an example of what i would like to change the background of and style:

image
image1008×300 7.3 KB

below is my CSS that i thought would apply to all elements of the Dashboard:

image
image1345×773 62.5 KB

2

Hello @ThomasRobsonPG,

So what you will want to do is map the css editor output to the flow variable input port (on the top-left) of the visualization (blue nodes that are Java Script based). Once this is done, you can go into the configurations of these widgets / charts / graphs and go to the flow variable section, typically at the bottom you will see a customCSS option, under the drop down you should see the flow variable that was created from the CSS Editor node. Once you have configured that, then the Visualization should take form of what was defined in the CSS Editor node.

Regards,
Ryan