Blue background color forced by "template" node style rule

Dashboard
1

There is a rule being applied by the "template" node that is causing issues for me when exporting SVG code from draw.io and importing it to node-red into the template node.

Issue is blue background color overwriting fill to some figures as well as filling concave part of curved lines. I tracked down the issue coming from the following style rule which is forced by the template node itself:

element.style {
}
<style>
.nr-dashboard-theme .nr-dashboard-template path {
. /* fill: #097479; */
}

Removing it restore the figure as it suppose to be.

2

You should be able to override that in your own SVG path quite easily. If necessary, use !important after the color specification and before the ; to force the browser to treat it more specifically.

3

Thank you for fast response! Just after posting it I was given a line by chatGPT (don't hate but I do not have any experience with HTML, SVG nor CSS before this project so walking in unknown territory):

    <style>
      .nr-dashboard-theme .nr-dashboard-template path {
        fill: inherit;
        /* Or use a specific color, e.g., fill: #ff0000; */
      }
    </style>

Override the "blueish" background color disstortion. :slight_smile:

1 Like
4

Don't worry, I use it myself. Just recognise that it doesn't always give you a correct or even a "best" answer. It is "only" the wisdom of the masses after all. But I agree, it is immensely helpful and at least gives clues as to the right direction.

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.