# Dashboard CSS - custom and blue

**URL:** <https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055>\
**Category:** Dashboard\
**Created:** [5 March 2021 01:23 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055 "2021-03-05T01:23:52Z")\
**Posts on this page:** 20\
**Page:** 1

<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 March 2021 01:23 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/1 "2021-03-05T01:23:52Z")

</div>

I was kindly asked for help on dashboard styling but that help turned out for me to customize almost all default components. As it was "You'll help me - I'll help you" job, we agreed that it will be shared also to community.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/a/da2276e2aa46c5c976813c0ae3f2976c861e5306.jpeg)

Base theme:  
Node-RED theme-everywhere  
style: dark  
sizes: 48, 6, 8, 8 (all square)  
base color: rgb(5 62 168)

```auto
[{"id":"78abef.11f5941","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"771f257f.55355c","type":"ui_form","z":"78abef.11f5941","name":"","label":"form","group":"dc53cc09.4e298","order":4,"width":0,"height":0,"options":[{"label":"","value":"huuhu","type":"text","required":false,"rows":null},{"label":"","value":"nuunuu","type":"text","required":false,"rows":null},{"label":"","value":"jijijimkm","type":"text","required":false,"rows":null},{"label":"","value":"dudryu","type":"text","required":false,"rows":null}],"formValue":{"huuhu":"","nuunuu":"","jijijimkm":"","dudryu":""},"payload":"","submit":"submit","cancel":"cancel","topic":"topic","topicType":"msg","splitLayout":true,"x":250,"y":60,"wires":[[]]},{"id":"a70a6fa5.94058","type":"ui_template","z":"78abef.11f5941","group":"dc53cc09.4e298","name":"dashboard CSS","order":1,"width":0,"height":0,"format":"<style id=\"blue-dashboard\">\n\nbody.nr-dashboard-theme {\n background: radial-gradient(circle, rgb(45 97 186) 0%, rgb(16 16 146) 40%, rgba(2,0,36,1) 100%);\n}\nbody.nr-dashboard-theme md-toolbar {\n background: radial-gradient(circle, rgb(45 97 186) 0%, rgb(16 16 146) 40%, rgba(2,0,36,1) 100%);\n color: #fff;\n}\nbody.nr-dashboard-theme md-sidenav {\n color: rgb(215 223 245);\n background: radial-gradient(circle, rgb(45 97 186) 0%, rgb(16 16 146) 40%, rgba(2,0,36,1) 100%);\n}\nbody.nr-dashboard-theme md-sidenav div.md-list-item-inner {\n color: rgb(215 223 245);\n background-color: transparent;\n}\n.nr-dashboard-theme ui-card-panel {\n background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);\n border: none;\n border-radius: 1em;\n box-shadow: 0 0 1em 0em rgb(0 0 100 / 50%)\n}\nbody.nr-dashboard-theme md-content md-card {\n background:transparent;\n color: rgb(215 223 245);\n}\n.nr-dashboard-theme .nr-dashboard-template {\n background:transparent;\n}\n.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {\n color: #6a99f1;\n text-shadow: 1px 1px 0px rgb(0 0 0 / 50%);\n}\n.md-button{\n border-radius:0.6em;\n color:rgb(215 223 245);\n}\n.nr-dashboard-theme .nr-dashboard-button .md-button {\n background-color: #053ea8;\n color:rgb(215 223 245);\n}\n.nr-dashboard-theme .nr-dashboard-button .md-button:hover {\n background-color: #0646bd;\n}\n.nr-dashboard-theme .nr-dashboard-button .md-button:focus {\n background-color: #0646bd;\n}\n.nr-dashboard-theme .nr-dashboard-numeric .value {\n background:unset;\n color:rgb(215 223 245);\n}\n.nr-dashboard-theme .nr-dashboard-form {\n color:rgb(215 223 245);\n}\n.nr-dashboard-theme .nr-dashboard-form-button {\n background-color: #053ea8;\n color:rgb(215 223 245);\n}\n\n.nr-dashboard-theme .nr-dashboard-form-button:hover {\n background-color: #0646bd !important;\n}\n.nr-dashboard-theme .nr-dashboard-form-button:focus {\n background-color: #0646bd !important;\n}\n.nr-dashboard-theme md-input-container.md-default-theme .md-input, md-input-container .md-input {\n color:rgb(215 223 245);\n border-color: #074fd4 !important;\n}\n.nr-dashboard-theme .nr-dashboard-switch md-switch .md-thumb {\n background-color: rgb(25 31 153);\n}\n.nr-dashboard-theme .nr-dashboard-switch md-switch .md-bar {\n background-color: rgb(94 94 177);\n box-shadow: inset 0 0 1px #0000005e;\n}\n.nr-dashboard-theme .nr-dashboard-switch md-switch.md-checked .md-bar {\n background-color: rgb(94 94 177);\n box-shadow: 0 0 10px 0px #101086;\n}\n.nr-dashboard-theme .nr-dashboard-switch md-switch.md-checked .md-thumb {\n background-color: rgb(61 107 232);\n box-shadow: 0 0 10px 0px #101086;\n}\n.nr-dashboard-theme .nr-dashboard-slider .md-track {\n background-color: rgb(125 172 249 / 35%);\n}\nmd-slider .md-thumb {\n box-shadow: 0 0 10px 0px #101086;\n}\n\n.nr-dashboard-theme .nr-dashboard-slider .md-thumb:after {\n background-color: #3d6be8;\n border-color: #3d6be8;\n}\n\n.nr-dashboard-theme md-select-menu, .nr-dashboard-theme md-select-menu md-option {\n background-color: rgb(0 0 0 / 12%);\n color:rgb(215 223 245);\n border-radius:0.8em;\n}\n\n.nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value, .nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value.md-select-placeholder {\n margin-top: -3px;\n border-color: #eeeeee7a;\n \n}\n.nr-dashboard-theme .md-select-menu-container {\n max-height: 85%;\n overflow-y: auto;\n border: none;\n border-radius: 0.8em;\n}\n.nr-dashboard-theme .nr-dashboard-dropdown .md-select-icon {\n\n}\n.nr-dashboard-theme md-select-menu md-option {\n background-color: rgb(40 53 147);\n \n height: 29px;\n border-radius: 0.6em;\n margin-left: 10px;\n margin-right: 10px;\n margin-top: 2px;\n box-shadow: 0 0 6px 6px #24202133;\n transition: 0.3s;\n}\n.nr-dashboard-theme md-select-menu md-option[selected] {\n color: rgb(130 177 255) !important;\n background-color: rgb(27 90 197) !important;\n}\n.nr-dashboard-theme md-select-menu md-option:nth-child(even) {\n background-color: rgb(31 31 152);\n}\n.nr-dashboard-theme md-select-menu md-option:last-child {\n margin-bottom: 8px;\n}\n.nr-dashboard-theme md-select-menu md-option:hover {\n background-color: rgb(20 91 211) !important;\n padding-left: 26px;\n}\n.nr-dashboard-theme md-select-menu md-option > .md-ripple-container{\n border-radius: 14px;\n}\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":460,"y":300,"wires":[[]]},{"id":"6a25fec6.a6a6e","type":"ui_switch","z":"78abef.11f5941","name":"","label":"switch","tooltip":"","group":"dc53cc09.4e298","order":2,"width":3,"height":1,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"x":250,"y":100,"wires":[[]]},{"id":"be9a82b1.95f3e","type":"ui_switch","z":"78abef.11f5941","name":"","label":"switch","tooltip":"","group":"dc53cc09.4e298","order":3,"width":3,"height":1,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"x":250,"y":140,"wires":[[]]},{"id":"85bdafb4.6dfa","type":"ui_button","z":"78abef.11f5941","name":"","group":"a0e1236e.42475","order":1,"width":3,"height":1,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":370,"y":60,"wires":[[]]},{"id":"cb021e4c.a6ae1","type":"ui_button","z":"78abef.11f5941","name":"","group":"a0e1236e.42475","order":2,"width":3,"height":1,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":370,"y":100,"wires":[[]]},{"id":"5abcd8ef.f764c8","type":"ui_button","z":"78abef.11f5941","name":"","group":"a0e1236e.42475","order":3,"width":6,"height":1,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":370,"y":140,"wires":[[]]},{"id":"659af281.4d2f5c","type":"ui_text","z":"78abef.11f5941","group":"577352d1.7a125c","order":3,"width":3,"height":1,"name":"","label":"TEXT","format":"{{msg.payload}}","layout":"row-center","x":670,"y":60,"wires":[]},{"id":"bd963417.81c4e8","type":"ui_slider","z":"78abef.11f5941","name":"","label":"slider","tooltip":"","group":"577352d1.7a125c","order":1,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":10,"step":1,"x":490,"y":140,"wires":[["659af281.4d2f5c","1bdfbc4e.95eca4","f52d139e.db58a"]]},{"id":"ebbb10ec.75627","type":"ui_dropdown","z":"78abef.11f5941","name":"","label":"dropdown","tooltip":"","place":"Select option","group":"a0e1236e.42475","order":4,"width":0,"height":0,"passthru":true,"multiple":false,"options":[{"label":"","value":"one ","type":"str"},{"label":"","value":"two","type":"str"},{"label":"","value":"three","type":"str"},{"label":"","value":"four","type":"str"},{"label":"","value":"five","type":"str"},{"label":"","value":"six","type":"str"},{"label":"","value":"seven","type":"str"},{"label":"","value":"eight","type":"str"},{"label":"","value":"nine","type":"str"},{"label":"","value":"ten","type":"str"}],"payload":"","topic":"topic","topicType":"msg","x":500,"y":60,"wires":[[]]},{"id":"1bdfbc4e.95eca4","type":"ui_gauge","z":"78abef.11f5941","name":"","group":"ace3971e.5dae38","order":1,"width":3,"height":3,"gtype":"gage","title":"gauge","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#026292","#0a74d1","#3aaecb"],"seg1":"","seg2":"","x":670,"y":140,"wires":[]},{"id":"8b3a0d12.75e59","type":"change","z":"78abef.11f5941","name":"gauge background","rules":[{"t":"set","p":"ui_control.options.gaugeColor","pt":"msg","to":"#1a187a","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":450,"y":180,"wires":[["1bdfbc4e.95eca4"]]},{"id":"407f943f.81543c","type":"inject","z":"78abef.11f5941","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"4","payloadType":"num","x":270,"y":180,"wires":[["8b3a0d12.75e59"]]},{"id":"88e133a1.9f8f5","type":"ui_numeric","z":"78abef.11f5941","name":"","label":"numeric","tooltip":"","group":"577352d1.7a125c","order":2,"width":3,"height":1,"wrap":false,"passthru":true,"topic":"topic","topicType":"msg","format":"{{value}}","min":0,"max":10,"step":1,"x":500,"y":100,"wires":[[]]},{"id":"17a71a1e.a5fa16","type":"ui_chart","z":"78abef.11f5941","name":"","group":"ace3971e.5dae38","order":3,"width":6,"height":3,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":670,"y":220,"wires":[[]]},{"id":"707249d0.b22478","type":"inject","z":"78abef.11f5941","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"8","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":270,"y":220,"wires":[["7c7d3c37.d43ad4"]]},{"id":"7c7d3c37.d43ad4","type":"random","z":"78abef.11f5941","name":"","low":1,"high":10,"inte":"true","property":"payload","x":430,"y":220,"wires":[["17a71a1e.a5fa16"]]},{"id":"f52d139e.db58a","type":"ui_artlessgauge","z":"78abef.11f5941","group":"ace3971e.5dae38","order":2,"width":3,"height":3,"name":"","icon":"fa-home","label":"Gauge","unit":"blue","layout":"radial","decimals":"1","differential":false,"minmax":true,"colorTrack":"#07356e","style":"","colorFromTheme":true,"property":"payload","secondary":"secondary","inline":false,"animate":true,"sectors":[{"val":0,"col":"#33a0ff","t":"min","dot":0},{"val":10,"col":"#33a0ff","t":"max","dot":0}],"lineWidth":3,"bgcolorFromTheme":false,"diffCenter":"","x":700,"y":100,"wires":[]},{"id":"dc53cc09.4e298","type":"ui_group","name":"Form & Switch","tab":"1854ea3c.181436","order":1,"disp":true,"width":"6","collapse":false},{"id":"a0e1236e.42475","type":"ui_group","name":"Buttons","tab":"1854ea3c.181436","order":2,"disp":true,"width":"6","collapse":false},{"id":"577352d1.7a125c","type":"ui_group","name":"Text Numeric & Slider","tab":"1854ea3c.181436","order":4,"disp":true,"width":"6","collapse":false},{"id":"ace3971e.5dae38","type":"ui_group","name":"Gauge","tab":"1854ea3c.181436","order":3,"disp":true,"width":"6","collapse":false},{"id":"1854ea3c.181436","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

This is not fine-tuned absolutely ready custom theme and the job is done with quick changes and best practices are not always followed.

But it is blue.  
🙃

---

<div class="post-metadata">

**Author:** ![Simon01011](https://avatars.discourse-cdn.com/v4/letter/s/e68b1a/32.png) [@Simon01011](https://discourse.nodered.org/u/Simon01011)\
**Post date:** [5 March 2021 08:16 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/2 "2021-03-05T08:16:07Z")

</div>

Nice! 👍

But on my dashboard it looks like:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/0/20997646255024f6972a21b5614bf6ed9abd5823.jpeg)

So the side menu is not colored in blue and the form buttons aren't in blue either... Don't know why

---

<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 March 2021 08:19 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/3 "2021-03-05T08:19:10Z")

</div>

That is because of none of side bar elements has been touched in override CSS. And that is because of it wasn't needed. But you can do it by yourself 🙂

But I see I shared wrong version, there was hovers missing and couple of things more... but now fixed 🙂

---

<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 March 2021 10:24 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/4 "2021-03-05T10:24:45Z")

</div>

I added basics for the sidebar also. 😉

---

<div class="post-metadata">

**Author:** ![Simon01011](https://avatars.discourse-cdn.com/v4/letter/s/e68b1a/32.png) [@Simon01011](https://discourse.nodered.org/u/Simon01011)\
**Post date:** [5 March 2021 10:40 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/5 "2021-03-05T10:40:22Z")

</div>

Very nice! 👍😃

---

<div class="post-metadata">

**Author:** ![davidz](https://avatars.discourse-cdn.com/v4/letter/d/a88e57/32.png) [@davidz](https://discourse.nodered.org/u/davidz)\
**Post date:** [5 March 2021 16:50 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/6 "2021-03-05T16:50:04Z")

</div>

Looks very nice. Thanks for the contribution.

---

<div class="post-metadata">

**Author:** ![achrefnajjar](https://avatars.discourse-cdn.com/v4/letter/a/8e8cbc/32.png) [@achrefnajjar](https://discourse.nodered.org/u/achrefnajjar)\
**Post date:** [23 March 2021 15:47 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/7 "2021-03-23T15:47:38Z")

</div>

very charming! but can you tell me please where would i paste this code ?

---

<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:** [23 March 2021 15:51 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/8 "2021-03-23T15:51:41Z")

</div>

The code contains one ui\_template node, which is standalone, no need to connect to anything, it is targeted to add the style declarations to dashboard head tag so it overrides default styles. Just import it at some tab and it works.

---

<div class="post-metadata">

**Author:** ![achrefnajjar](https://avatars.discourse-cdn.com/v4/letter/a/8e8cbc/32.png) [@achrefnajjar](https://discourse.nodered.org/u/achrefnajjar)\
**Post date:** [23 March 2021 16:06 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/9 "2021-03-23T16:06:25Z")

</div>

i'm sorry but i'm beginner in node red  
could you explain more on how to import it in the tab ?

---

<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:** [23 March 2021 16:27 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/10 "2021-03-23T16:27:05Z")

</div>

Top right of the editor ....  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/c/1cb7d60c7fd7c12eadadcf82351f93db203a9c67.png)

---

<div class="post-metadata">

**Author:** ![MarkC](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/markc/32/37535_2.png) [@MarkC](https://discourse.nodered.org/u/MarkC)\
**Post date:** [24 March 2021 13:48 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/11 "2021-03-24T13:48:28Z")

</div>

Hello @hotNipi,  
Thanks so much for sharing this custom dashboard CSS, it's a huge help to look at such a nice and complex working example! PS. I'm also a big fan of your artless gauge nodes....

I am trying to get an image/logo to display above the main CSS coloured background, but can't get both the CSS coloured background AND the image to display simultaneously (layered over each other).

If I remove the coloured background code, the image will display fine over the default theme colours, but if I have both then the entire background goes white (and the image still displays).

This is the section I have been playing with:

```auto
body.nr-dashboard-theme {
// background: radial-gradient(circle, rgb(45 97 186) 0%, rgb(16 16 146) 40%, rgba(2,0,36,1) 100%);
    background-image: url(https://www.xyz.svg);
    background-repeat: no-repeat;
    background-position: center top +200px;
    background-size: 50%;
}

```

I have read through a number of related posts but no luck so far with my issue, any hints to get this working would be greatly appreciated.

Thanks in advance, Mark.

---

<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:** [24 March 2021 14:12 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/12 "2021-03-24T14:12:52Z")

</div>

Basically you'll need to write comma separated list of items for the background. Something like this :

```auto
background: url(img/water.png), linear-gradient(to right, red , blue);

```

---

<div class="post-metadata">

**Author:** ![achrefnajjar](https://avatars.discourse-cdn.com/v4/letter/a/8e8cbc/32.png) [@achrefnajjar](https://discourse.nodered.org/u/achrefnajjar)\
**Post date:** [24 March 2021 14:40 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/13 "2021-03-24T14:40:10Z")

</div>

thank you very much !

---

<div class="post-metadata">

**Author:** ![MarkC](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/markc/32/37535_2.png) [@MarkC](https://discourse.nodered.org/u/MarkC)\
**Post date:** [24 March 2021 14:47 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/14 "2021-03-24T14:47:23Z")

</div>

Thanks very much for your super fast response, it's working now - I have both overlaid.  
(I actually thought I already tried that, as I saw it on w3schools -but obviously not... 🙂 )

I then had the issue where `background-position:` and `background-size:` properties are applied to both the image **and** the background colour - but quickly figured out that I could apply the same comma separated logic to fix that.

Thanks again!

---

<div class="post-metadata">

**Author:** ![MarkC](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/markc/32/37535_2.png) [@MarkC](https://discourse.nodered.org/u/MarkC)\
**Post date:** [24 March 2021 15:14 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/15 "2021-03-24T15:14:52Z")

</div>

Sorry to be a pain, but one last issue I can't resolve - is there a way to apply Opacity only to the svg image/logo that I have loaded?  
I can't seem to get that working correctly, `opacity: 0.1, 1.0;` has no effect and `opacity: 0.1;` effects the entire page.  
If it's better that I post a new question, please let me know.

---

<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:** [24 March 2021 15:21 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/16 "2021-03-24T15:21:32Z")

</div>

I'm on phone right now so can't do much but the svg might be tricky in this case. Haven't tried. But you can try with the background-blend-mode

---

<div class="post-metadata">

**Author:** ![MarkC](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/markc/32/37535_2.png) [@MarkC](https://discourse.nodered.org/u/MarkC)\
**Post date:** [24 March 2021 15:48 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/17 "2021-03-24T15:48:40Z")

</div>

> [@hotNipi](#):
>
> background-blend-mode

No problem, thank you for your reply. I tried `background-blend-mode` but most of the property options don't seem to be accepted.

---

<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:** [24 March 2021 15:54 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/18 "2021-03-24T15:54:52Z")

</div>

Here is a little discussion about the SVG as background image and colors

> <https://stackoverflow.com/questions/13367868/modify-svg-fill-color-when-being-served-as-background-image>

And seems to be tricky to achieve with basic tools.

I think the easiest will be to modify the svg data by adding

```auto
style="fill-opacity: .25;"

```

to all filled elements.

---

<div class="post-metadata">

**Author:** ![ScheepersJohan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scheepersjohan/32/39556_2.png) [@ScheepersJohan](https://discourse.nodered.org/u/ScheepersJohan)\
**Post date:** [1 April 2021 19:58 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/19 "2021-04-01T19:58:03Z")

</div>

May I ask where do you set the text color?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/2/52ea556c530bed16fac893b70e55928f12b20307.png)

---

<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:** [1 April 2021 19:59 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/20 "2021-04-01T19:59:41Z")

</div>

What widget is it?  
Maybe you haven't set the base values correctly  
Base theme:  
Node-RED theme-everywhere  
style: dark  
sizes: 48, 6, 8, 8 (all square)  
base color: rgb(5 62 168)

[Next page](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055.md?page=2)