# Change font & color inside widget?

**URL:** <https://discourse.nodered.org/t/change-font-color-inside-widget/10683>\
**Category:** Dashboard\
**Created:** [30 April 2019 15:14 UTC](https://discourse.nodered.org/t/change-font-color-inside-widget/10683 "2019-04-30T15:14:48Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [30 April 2019 15:14 UTC](https://discourse.nodered.org/t/change-font-color-inside-widget/10683/1 "2019-04-30T15:14:48Z")

</div>

Hi all,  
i tried to change Font , color, of the data displayed inside a widget . Sometime it's working , sometime not .  
_The "Label" is displayed in Small Grey Color = good ! **BUT** the "Value format" not !_  
 ![small](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/f4aa6c581c81269a53ab41c2852b561130bda447.jpeg)

![diff](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/499bfeed31ddc39681953dcbcde151a4d8c79ff4.jpeg)

I know it's **Angular filters** , in this last . But how to translate **html** to **Angular** to have the desired font in "Value format"?

Not easy for a newbie like me 😉 Any idea ?  
Thanks

---

<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:** [30 April 2019 16:51 UTC](https://discourse.nodered.org/t/change-font-color-inside-widget/10683/2 "2019-04-30T16:51:24Z")

</div>

Another way to change ui elements is to use [UI Widget configuration via msg.ui\_control](https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md)  
See **justgauge parameters** at the end of document.

---

<div class="post-metadata">

**Author:** ![indedark](https://avatars.discourse-cdn.com/v4/letter/i/fbc32d/32.png) [@indedark](https://discourse.nodered.org/u/indedark)\
**Post date:** [2 December 2020 18:06 UTC](https://discourse.nodered.org/t/change-font-color-inside-widget/10683/3 "2020-12-02T18:06:16Z")

</div>

I've scoured the forums, and I can't find any REAL answer to this question. Sending us to see justgauge parameters, checking widget config parameters, etc, doesn't help people like me that need to see the solution when we're not coders!

I have a wave widget. I'd like to change the colour of the circle, circle size, wave height and wave colour.

Please SHOW me how I can do that globally, for all of the gauges in my UI.

HELP!

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/5/65cf4706f5c54c6380f6c3a3d566f98e1a48b816.png)

EDIT: I've been trying to use the UI \</\> template globally but I can't figure it out!

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [2 December 2020 18:20 UTC](https://discourse.nodered.org/t/change-font-color-inside-widget/10683/4 "2020-12-02T18:20:17Z")

</div>

What is wrong with the example in the document linked in the post before yours?

---

<div class="post-metadata">

**Author:** ![indedark](https://avatars.discourse-cdn.com/v4/letter/i/fbc32d/32.png) [@indedark](https://discourse.nodered.org/u/indedark)\
**Post date:** [2 December 2020 18:23 UTC](https://discourse.nodered.org/t/change-font-color-inside-widget/10683/5 "2020-12-02T18:23:10Z")

</div>

It doesn't show me how it's done.

I've tried to follow about 5 different directions, but I haven't been successful and I haven't seen an example.

I've tried multiple different settings, too... I've tried changing the messages going into the template node, I can't successfully change anything other than what is allowed in the main settings in the right hand information bar.

I've changed the dashboard from ANGULAR, to USE ANGULAR IN TEMPLATE to NODE-RED EVERYWHERE.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/d/9d948c3739b0d7aca8295361423fa222b0a3905a.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/e/6e677900115fb01c5c304f725c27487b58d9e9b5.png)

---

<div class="post-metadata">

**Author:** ![indedark](https://avatars.discourse-cdn.com/v4/letter/i/fbc32d/32.png) [@indedark](https://discourse.nodered.org/u/indedark)\
**Post date:** [2 December 2020 18:30 UTC](https://discourse.nodered.org/t/change-font-color-inside-widget/10683/6 "2020-12-02T18:30:24Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/7/475d6b51869fcb5d1c19131a3825b72937497080.png)

Just trying to change the outline circle black... If I can understand this, I can adjust the remaining options successfully... but I can't even change this.

Please, help me... 🤪

---

<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:** [2 December 2020 18:46 UTC](https://discourse.nodered.org/t/change-font-color-inside-widget/10683/7 "2020-12-02T18:46:17Z")

</div>

No need to change dashboard configuration.

I know, the example for liquid-fill gauge is nearly last rows on the page but it exists. So read documents more carefully.

Here is the example.

```auto
[{"id":"4844a355.05b42c","type":"ui_gauge","z":"6d08d5ab.a8aa3c","name":"","group":"595895b0.98866c","order":1,"width":0,"height":0,"gtype":"wave","title":"gauge","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":720,"y":1480,"wires":[]},{"id":"92529f02.637eb","type":"inject","z":"6d08d5ab.a8aa3c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":300,"y":1440,"wires":[["2fb7daa6.16a636"]]},{"id":"6634c4e4.184f7c","type":"random","z":"6d08d5ab.a8aa3c","name":"","low":"1","high":"10","inte":"true","property":"payload","x":500,"y":1480,"wires":[["4844a355.05b42c"]]},{"id":"d431e799.8805d8","type":"inject","z":"6d08d5ab.a8aa3c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"3","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"num","x":290,"y":1480,"wires":[["6634c4e4.184f7c"]]},{"id":"2fb7daa6.16a636","type":"change","z":"6d08d5ab.a8aa3c","name":"","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"options\":{\"circleColor\":\"#FF7777\",\"textColor\":\"#FF4444\",\"waveTextColor\":\"#FFAAAA\",\"waveColor\":\"#FFDDDD\",\"circleThickness\":0.3,\"textVertPosition\":0.2,\"waveHeight\":0.05,\"waveCount\":8}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":490,"y":1440,"wires":[["4844a355.05b42c"]]},{"id":"595895b0.98866c","type":"ui_group","name":"Default","tab":"c9285c84.26c5a","order":1,"disp":true,"width":"12","collapse":false},{"id":"c9285c84.26c5a","type":"ui_tab","name":"Home","icon":"dashboard","order":1}]

```

---

<div class="post-metadata">

**Author:** ![indedark](https://avatars.discourse-cdn.com/v4/letter/i/fbc32d/32.png) [@indedark](https://discourse.nodered.org/u/indedark)\
**Post date:** [2 December 2020 19:03 UTC](https://discourse.nodered.org/t/change-font-color-inside-widget/10683/8 "2020-12-02T19:03:14Z")

</div>

I added that, deployed, changed the circle colour to 000000, but nothing changed.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/2/424924d48f14afa9ad9a4f97eef0cac7e2b3a508.png)

☹

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/1/a1f88adabfee52037ea8b2265b76b972fdd059b4.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:** [2 December 2020 19:06 UTC](https://discourse.nodered.org/t/change-font-color-inside-widget/10683/9 "2020-12-02T19:06:02Z")

</div>

Works for me perfectly

---

<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:** [2 December 2020 19:12 UTC](https://discourse.nodered.org/t/change-font-color-inside-widget/10683/10 "2020-12-02T19:12:02Z")

</div>

> [@indedark](#):
>
> I added that, deployed, changed the circle colour to 000000

But did you pressed inject after deploy?

---

<div class="post-metadata">

**Author:** ![indedark](https://avatars.discourse-cdn.com/v4/letter/i/fbc32d/32.png) [@indedark](https://discourse.nodered.org/u/indedark)\
**Post date:** [2 December 2020 19:15 UTC](https://discourse.nodered.org/t/change-font-color-inside-widget/10683/11 "2020-12-02T19:15:14Z")

</div>

Yes... I had to change the hex to 000001 to get it to change... and I have the single gauge changed. Thank you for the example!

Now I have to figure out how to change the group, or I have to change every gauge displayed individually.

---

<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:** [2 December 2020 19:19 UTC](https://discourse.nodered.org/t/change-font-color-inside-widget/10683/12 "2020-12-02T19:19:36Z")

</div>

Send same configuration for every gauge. Or if they must be different make one configuration for everyone. Configuration overrides are not permanent. You'll need to send it every time the gauge initialzes itself. That is at deploy, restart, change dashboard tab ....

---

<div class="post-metadata">

**Author:** ![indedark](https://avatars.discourse-cdn.com/v4/letter/i/fbc32d/32.png) [@indedark](https://discourse.nodered.org/u/indedark)\
**Post date:** [2 December 2020 19:26 UTC](https://discourse.nodered.org/t/change-font-color-inside-widget/10683/13 "2020-12-02T19:26:07Z")

</div>

Is there a method to make them global and persistent? That would be very helpful.

If not, I will drive them into the individual gauges.

Thank you again for the example. With an example, I understand. With understanding, I can apply!

---

<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:** [2 December 2020 19:35 UTC](https://discourse.nodered.org/t/change-font-color-inside-widget/10683/14 "2020-12-02T19:35:39Z")

</div>

Overrides are not permanent. There's ui\_control node to fire the inject for you when dashboard connects so your config is always sent to node when you are seeing the dashboard.  
It is reasonable to use only one ui\_control node and connect it to all nodes for configuration changing paths.

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

---

<div class="post-metadata">

**Author:** ![indedark](https://avatars.discourse-cdn.com/v4/letter/i/fbc32d/32.png) [@indedark](https://discourse.nodered.org/u/indedark)\
**Post date:** [2 December 2020 19:46 UTC](https://discourse.nodered.org/t/change-font-color-inside-widget/10683/15 "2020-12-02T19:46:38Z")

</div>

Okay, thank you for the information.

So, based on this, the functions in the dashboard configuration (Angular Them in ui\_template), then configuring the template don't work for this application?

---

<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:** [2 December 2020 19:54 UTC](https://discourse.nodered.org/t/change-font-color-inside-widget/10683/16 "2020-12-02T19:54:23Z")

</div>

That configuration affects `ui_template` nodes. Not gauges nor nothing in server side.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [2 December 2020 19:59 UTC](https://discourse.nodered.org/t/change-font-color-inside-widget/10683/17 "2020-12-02T19:59:44Z")

</div>

There are some overall settings in the main sidebar for configuring the overall look and feel, and spacing, menu visibility, etc. Then each widget has some of it's own configuration, mostly parameters, ranges, etc - and then finally there is the control message that lets you get under the covers of some widgets to alter extra things. There are often too many possible parameters to try and expose them all in a "simple" config page for each widget.

---

<div class="post-metadata">

**Author:** ![indedark](https://avatars.discourse-cdn.com/v4/letter/i/fbc32d/32.png) [@indedark](https://discourse.nodered.org/u/indedark)\
**Post date:** [3 December 2020 19:13 UTC](https://discourse.nodered.org/t/change-font-color-inside-widget/10683/18 "2020-12-03T19:13:58Z")

</div>

Thank you, all!

You helped me with this configuration issue and it is greatly appreciated!