# Need some CSS help for issues with latest SVG node release

**URL:** <https://discourse.nodered.org/t/need-some-css-help-for-issues-with-latest-svg-node-release/54667>\
**Category:** Dashboard\
**Created:** [3 December 2021 12:20 UTC](https://discourse.nodered.org/t/need-some-css-help-for-issues-with-latest-svg-node-release/54667 "2021-12-03T12:20:39Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [3 December 2021 12:20 UTC](https://discourse.nodered.org/t/need-some-css-help-for-issues-with-latest-svg-node-release/54667/1 "2021-12-03T12:20:39Z")

</div>

Hi folks,

The latest _ **2.3.0** _ version of the node-red-contrib-ui-svg node contains a major [issue](https://github.com/bartbutenaers/node-red-contrib-ui-svg/issues/104). But it is CSS related, and that is my weakest point. So cannot get it solved on my own. Would appreciate a lot if somebody could help me with this one!!!

Will try to summarize:

1. Long time ago there was an issue that the SVG path elements inherited the dashboard colors. So when you applied your own color to an SVG path, the path was colored in the dashboard colors anyway. Fortunately @dceejay and @Steve-Mcl have been so kind - at the time being - to figure out a [solution](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/30) for me 😍

2. Since that solution worked great, that CSS snippet was hardcoded added to the generated html:

3. And that solution has been working great for a long time meanwhile!!

4. For the latest release I got a feature request to make the CSS customizable. So I added an extra tabsheet, and I _ **moved** _ the hardcoded CSS to that tabsheet (see [this](https://github.com/bartbutenaers/node-red-contrib-ui-svg/commit/0f8ea2fcc4d3e9f6d534112e7a9e18a96198b595#diff-f828ec9941b4d1e9c8ea3a15956fcd723fff5028be5762fa90e0558582613995) commit):

5. However when you add some custom CSS in this tabsheet (e.g. to have blue circles), you only want to apply that CSS to this SVG drawing only. And if you have several SVG nodes, each SVG needs to have its own dedicated CSS. Since _ **scoped CSS** _ has been removed from the SVG specification, I had to find a workaround: at the end, I have used the [postcss-prefix-selector](https://github.com/RadValentin/postcss-prefix-selector) library to add automatically a prefix ( `"#svggraphics_" + config.id` ) to all the entered CSS selectors (in the CSS tabsheet). This way I could simulate scoped CSS, by applying the selectors (from the CSS tabsheet) only to the parent DIV element. Which seemed to work fine.

6. However now it seems that the SVG path elements again inherit their color from the dashboard 😱. And when the users remove the `!important` from the CSS tabsheet, then everything is fine again!

So I don't get why removing `!important` from the tabsheet solves the problem. I could remove it from my code, but I am not sure whether I am going to break then other drawings. Because to be honest, I don't know why we have added it at the time being ...

Would be very nice if somebody could "try" to give me some ideas of what I should do with this. Don't know the theory good enough to decide whether it is safe for me to remove the `!important` from the CSS tabsheet by default or not...

Thanks for reading !!!  
Bart

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [3 December 2021 13:59 UTC](https://discourse.nodered.org/t/need-some-css-help-for-issues-with-latest-svg-node-release/54667/2 "2021-12-03T13:59:30Z")

</div>

1. You must to avoid using the `!important` flag. (there is of course edge cases and exceptions)  
It should be left free to use as final resort for end-users.
2. As dashboard declares styles for svg path in the manner it does, you have no more choices than play with styles which get higher specificity. Note that using fill property of the path element will not work any way cos styles override it in all cases.  
Inherit for fill should make it to use default value which is black.

Very simple example to see which way the rules apply.

```auto
[{"id":"009e8711665bcd0b","type":"ui_template","z":"6d08d5ab.a8aa3c","group":"6ff3bb48.c2b764","name":"","order":4,"width":0,"height":0,"format":"<style>\n/*this will get lower specificity than dashboard rule*/\n.svg-class path{\n fill: orange;\n}\n/*this will get higher specificity than dashboard rule*/\n.nr-dashboard-theme .nr-dashboard-template .svg-class path{\n fill: red;\n}\n</style>\n\n<svg class=\"svg-class\" height=\"210\" width=\"400\">\n <path d=\"M150 0 L75 200 L225 200 Z\" fill=\"purple\"/> \n <path d=\"M100 0 L95 200 L225 100 Z\" fill=\"purple\" style=\"fill:yellow\" />\n</svg>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":390,"y":1680,"wires":[[]]},{"id":"6ff3bb48.c2b764","type":"ui_group","name":"Storage","tab":"c209d57.e95de28","order":1,"disp":true,"width":"18","collapse":false},{"id":"c209d57.e95de28","type":"ui_tab","name":"Recordings","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

```

And then examine the css

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/a/8a5dbbf635f48086dfbe255190467a3c523a3f7a.png)

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [3 December 2021 17:21 UTC](https://discourse.nodered.org/t/need-some-css-help-for-issues-with-latest-svg-node-release/54667/3 "2021-12-03T17:21:41Z")

</div>

Mister @hotNipi,  
You have no clue how much I appreciate your css for dummies explanation...  
Thanks !!! Very illuminating!!

Now my shrinken brain needs to digest it slowly...  
After reading your feedback, there are a couple of things that I don't understand now:

1. You apply a fill style color yellow, which seems to be more specific than all other styles, so the path becomes yellow. However in our original [issue](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/9) at the time being, our fill color style on the path element was overridden by the dashboard 🤯. So that is another behaviour as in your example...  
Does that make sense to you?

2. Steve and Dave [solved](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/30) it (at the time being) by following workaround:

3. The solution from step 2 has worked for a long time. To have scoped css , I applied that [postcss-prefix-selector](https://github.com/RadValentin/postcss-prefix-selector) to all the rules in the CSS tabsheet. So the default content:

My wife always tells me I need to search a more relaxing hobby...  
I am getting an idea of what she means 😉

Really appreciate your help!! And (most...) SVG node users also!!

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [4 December 2021 20:37 UTC](https://discourse.nodered.org/t/need-some-css-help-for-issues-with-latest-svg-node-release/54667/4 "2021-12-04T20:37:25Z")

</div>

Hey @hotnipi,

I had another user reporting a similar [issue](https://github.com/bartbutenaers/node-red-contrib-ui-svg/issues/106). I have asked to do some extra testing, and he confirmed that it was all solved by removing the second `!important`:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/0/a0df0406bb1783ce129731024088e2bd7dd98ef3.png)

So I assume it can do no harm to publish a fix with this change...

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [5 December 2021 09:00 UTC](https://discourse.nodered.org/t/need-some-css-help-for-issues-with-latest-svg-node-release/54667/5 "2021-12-05T09:00:38Z")

</div>

Being far from computers, can't really help but removing the !important gets my blessing anyway. 😉

---

<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:** [4 January 2022 09:00 UTC](https://discourse.nodered.org/t/need-some-css-help-for-issues-with-latest-svg-node-release/54667/6 "2022-01-04T09:00:44Z")

</div>

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