I knew that a ui-text node value could have HTML injected but I hadn't realised just how useful this can be, (and I didn't realise that msg.ui_update.label had the same option) so I wondered if anyone else was in the same position. This demonstrates how the label & value entities of a text widget can be styled;
Note: I used a change node because the template node is limited in what it can do.
[{"id":"6042657f3c96eec2","type":"change","z":"506727cd93754bdb","name":"Weather \\n Temperature","rules":[{"t":"set","p":"payload","pt":"msg","to":" '<p> <span style=\"font-weight:normal;\">Temperature: </span><span style=\"color:blue;\">' & $pad( $string( $round($$.temperature, 1) ), 2, \".0\"\t) & '°C</span></p>'","tot":"jsonata"},{"t":"set","p":"ui_update.label","pt":"msg","to":"'<p>Forecast For Current Hour: <b> ' & $$.description & '</b></p>'","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":1470,"y":6140,"wires":[["3b5d4b371e418732"]],"info":"$pad($string($round($$.forecastWeatherData[0].temperature, 2)), 4, \".00\") & \"°C\""},{"id":"3b5d4b371e418732","type":"ui-text","z":"506727cd93754bdb","group":"988a9fdb7648fba0","order":1,"width":"6","height":"1","name":"Temperature","label":"Forecast For Current Hour","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","value":"payload","valueType":"msg","x":1650,"y":6140,"wires":[]},{"id":"45dbaffb6a424892","type":"inject","z":"506727cd93754bdb","name":"Text Widget Loader","props":[{"p":"temperature","v":"10.4","vt":"num"},{"p":"topic","vt":"str"},{"p":"description","v":"Windy with Rain","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1290,"y":6140,"wires":[["6042657f3c96eec2"]]},{"id":"988a9fdb7648fba0","type":"ui-group","name":"Text Widget Example","page":"5d43941d3f14c655","width":"6","height":1,"order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"5d43941d3f14c655","type":"ui-page","name":"Text Input","ui":"b810194ea14e3502","path":"/text-input","icon":"cursor-text","layout":"grid","theme":"5075a7d8e4947586","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":24,"className":"","visible":"true","disabled":"false"},{"id":"b810194ea14e3502","type":"ui-base","name":"Dashboard 2 Examples","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":5,"showDisconnectNotification":true,"allowInstall":true},{"id":"5075a7d8e4947586","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#ffffff","groupBg":"#eeeeee","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"6px","groupBorderRadius":"4px","widgetGap":"12px","density":"default"}},{"id":"120ac2fdb4964b3b","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.29.0"}}]
There are a load of dynamic properties for the ui-text node but this shows how to style bits that are not covered by them.
