Actually, I think this may be a case of trying to paint a nut (inline style) being decimated by a sledgehammer (direct path styling).
Look at the colour of the envelopes...
https://codepen.io/Steve-Mcl/pen/poojLbw
I can't get the inline style to work.
The sledgehammer (directly addressed path css style) is taking precedence over the inline "presentation" styling (read the article above for definition of 'presentation').
I'm far from an expert in CSS matters (more of an experienced dabbler) but shouldn't dashboard theme address the SVG fills by class name and not by element?
Forgive me if I'm wrong Dave (remember, I'm more of a dabbler than expert haha)
It could if I knew what the class of a randomly applied
Svg was... Whereas I do know it will have a path. Still not sure why you can't override with a more specific CSS that includes path. Path is an element so should be lower than a class or id so if you declare .ypurclass path {... it should take precedence no ?
Hi Bart / Dave.
So, I suspect due to quirks of SVG, the setting of fill prevents any other colour being applied.
Through reading this and messing around, the only way I see this working is...
Have a play with this codepen to understand.
Bottom line...
I suspect we are going to have to ask Dave really really nicely and convince him of this necessity 
some pictures instead of a thousand words...
fill just can't be overridden dammit...
oh yes it can woohoo...
Not sure if you fixed the issue already in a better way, but if you still want to try the !important directive, there should be no semi-colon between the hex color and the !important. Havn't tried it myself on your particular case, but in my experience it usually works great to override any inherited CSS.
@hugobox we wish it were so simple.
This scren shot shows that when CSS for path-->fill is set NOTHING can override it.
Have a play with this codepen - see if you cant figure out the correct way.
My money is on NOT setting path>fill to anything other than inherit and setting <use fill...> to currentColor
You simply cannot set the colour of a path item with the current CSS of dashboard.
can you not override the default CSS in the html section of your js file ?
function HTML(config) {
var html = String.raw`
<style>
path {...
either to "unset" it - or set to inherit.
(as I said you may need to make that selector more specific so that it picks yours.)
Hmmm good point.
Worth a bit play time Bart.
Might we though then cause override for all other UI nodes on the page?
well not if you make it more specific that the other one - currently the main one is
.nr-dashboard-theme .nr-dashboard-template path {
fill: @widgetBackgroundColor;
}
so if you had another class in there
.nr-dashboard-theme .nr-dashboard-template .bartsSVGstuff path { ...
though indeed - not sure how many folk would have both - but hey...
1 Like
Morning @Steve-Mcl, @dceejay,
Sorry for the late reply, but it was a heavy week...
Thanks for all experiments and tips!! I 'think' I understand it, so will try to do some testing this evening. I have never been digging into css, but the articles mentioned above where very helpful.
Will get back here as soon as possible!
Morning @BartButenaers, @dceejay
So working on the above info and what Dave suggested, I now have a working solution.
Watch..
What i did
- added class
ui-svg to the parent div of the svg
- added a local
<style> element to override some style settings...
div.ui-svg svg{
color: var(--nr-dashboard-widgetColor);
fill: currentColor !important;
}
div.ui-svg path {
fill: inherit !important;
}
...This targets only our nodes SVG only and permits style fill setting. Phew.
(TODO: Check attribute setting fill works)
QUESTIONS
-
You will notice I default the color to css variable --nr-dashboard-widgetColor - @dceejay is this the correct variable?
-
@BartButenaers are you happy with using dashboard css color setting as the fall back (i.e. when no fill is specified - inherit the dashboards css variable value)? or should it just be none? The difference I see is someone pasting SVG from another application, where no fill is set, they will suddenly see their path items now have colour.
-
Are there any other SVG elements set by dashboard CSS that we need to consider?
Steve.
2 Likes
--nr-dashboard-widgetColor is correct.
1 Like
You ask whether I am happy that you solved it (together with Dave)? Of course! We will add to the readme something about, so people know what to do when strange colors appear...
And when I see the solution, it might be that I wouldn't had found it myself tonight 
It is (font)awesome guys... Really appreciate this!!!!!!!
P.s. could you put this solution on Github please. Then I start from that version for the jschannel stuff tonight.
