# Blue background color forced by "template" node style rule

**URL:** <https://discourse.nodered.org/t/blue-background-color-forced-by-template-node-style-rule/77222>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [3 April 2023 23:40 UTC](https://discourse.nodered.org/t/blue-background-color-forced-by-template-node-style-rule/77222 "2023-04-03T23:40:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kansaandre](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kansaandre/32/78332_2.png) [@kansaandre](https://discourse.nodered.org/u/kansaandre)\
**Post date:** [3 April 2023 23:40 UTC](https://discourse.nodered.org/t/blue-background-color-forced-by-template-node-style-rule/77222/1 "2023-04-03T23:40:33Z")

</div>

There is a rule being applied by the "template" node that is causing issues for me when exporting SVG code from [draw.io](http://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:**

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

```

Removing it restore the figure as it suppose to be.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [4 April 2023 01:17 UTC](https://discourse.nodered.org/t/blue-background-color-forced-by-template-node-style-rule/77222/2 "2023-04-04T01:17:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kansaandre](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kansaandre/32/78332_2.png) [@kansaandre](https://discourse.nodered.org/u/kansaandre)\
**Post date:** [5 April 2023 01:37 UTC](https://discourse.nodered.org/t/blue-background-color-forced-by-template-node-style-rule/77222/3 "2023-04-05T01:37:14Z")

</div>

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):

```auto
    <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. 🙂

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [5 April 2023 08:16 UTC](https://discourse.nodered.org/t/blue-background-color-forced-by-template-node-style-rule/77222/4 "2023-04-05T08:16:09Z")

</div>

> [@kansaandre](#):
>
> 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)

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [5 May 2023 08:16 UTC](https://discourse.nodered.org/t/blue-background-color-forced-by-template-node-style-rule/77222/5 "2023-05-05T08:16:27Z")

</div>

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