How to set font size of labels in V2 dashboard

[ruffieuxh]

Hi,

I am trying to publish a dashboard on a 10.1" display at the entrance of my house. Everything works perfectly but as I had to zoom the screen quite a bit to show all of the groups, the labels cannot be read good enough anymore.

This example get's a constant input from the solar inverter and shows actual values in a gouge node and the historic values over the day in a chart node.

[{"id":"9bf6576bf7237c44","type":"group","z":"c0259f4054b12973","name":"Data of solar statistics on dashboard","style":{"label":true},"nodes":["62ade17c24a7cc9b","a7d7e5529fc4542f","b31ef074cf4719d8","318a6b75e28ea297","cf8ee721e00a4007"],"x":34,"y":19,"w":872,"h":122},{"id":"62ade17c24a7cc9b","type":"mqtt in","z":"c0259f4054b12973","g":"9bf6576bf7237c44","name":"PV Leistung","topic":"openWB/pv/W","qos":"2","datatype":"auto-detect","broker":"7a4dd03f.f90ad","nl":false,"rap":true,"rh":0,"inputs":0,"x":130,"y":60,"wires":[["a7d7e5529fc4542f"]]},{"id":"a7d7e5529fc4542f","type":"range","z":"c0259f4054b12973","g":"9bf6576bf7237c44","minin":"-20000","maxin":"0","minout":"20000","maxout":"0","action":"scale","round":false,"property":"payload","name":"change sign","x":330,"y":60,"wires":[["b31ef074cf4719d8"]]},{"id":"b31ef074cf4719d8","type":"simplejs","z":"c0259f4054b12973","g":"9bf6576bf7237c44","func":"parse-int","property":"payload","name":"make Integer","x":510,"y":60,"wires":[["318a6b75e28ea297","cf8ee721e00a4007"]]},{"id":"318a6b75e28ea297","type":"ui-gauge","z":"c0259f4054b12973","g":"9bf6576bf7237c44","name":"Aktuell","group":"a6976dafdb703e14","order":2,"width":"4","height":"5","gtype":"gauge-half","gstyle":"needle","title":"Aktuell","units":"Watt","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#ffff00"}],"min":"0","max":"20000","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":830,"y":60,"wires":[]},{"id":"cf8ee721e00a4007","type":"ui-chart","z":"c0259f4054b12973","g":"9bf6576bf7237c44","group":"a6976dafdb703e14","name":"Verlauf","label":"Verlauf","order":1,"chartType":"line","category":"topic","categoryType":"msg","xAxisLabel":"Tageszeit","xAxisProperty":"","xAxisPropertyType":"timestamp","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"HH:mm","xmin":"","xmax":"","yAxisLabel":"Watt","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"0","ymax":"20000","bins":10,"action":"append","stackSeries":false,"pointShape":"line","pointRadius":"1","showLegend":false,"removeOlder":"15","removeOlderUnit":"3600","removeOlderPoints":"","colors":["#ffff00","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#ffffff"],"textColorDefault":false,"gridColor":["#e5e5e5"],"gridColorDefault":false,"width":"4","height":"6","className":"[node-id=\"cf8ee721e00a4007\" .value {     font-size: mm;  }","interpolation":"linear","x":820,"y":100,"wires":[[]]},{"id":"7a4dd03f.f90ad","type":"mqtt-broker","name":"OpenWB","broker":"192.168.1.65","port":"1883","clientid":"","autoConnect":true,"usetls":false,"protocolVersion":"4","keepalive":"60","cleansession":true,"autoUnsubscribe":true,"birthTopic":"","birthQos":"0","birthPayload":"","birthMsg":{},"closeTopic":"","closeQos":"0","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willPayload":"","willMsg":{},"userProps":"","sessionExpiry":""},{"id":"a6976dafdb703e14","type":"ui-group","name":"PV Leistung","page":"c4ee7ecd338225ac","width":"4","height":"11","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"c4ee7ecd338225ac","type":"ui-page","name":"Leistung PV Anlage Hintere Gasse 2/3","ui":"76d5fd200daa146c","path":"/PV Leistung","icon":"home","layout":"grid","theme":"1ef67418aa7b26f5","breakpoints":[{"name":"Default","px":"0","cols":"6"},{"name":"Tablet","px":"671","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":true,"disabled":false},{"id":"76d5fd200daa146c","type":"ui-base","name":"Leistung PV Anlage Hintere Gasse 2/3","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"none","navigationStyle":"default","titleBarStyle":"hidden","showReconnectNotification":true,"notificationDisplayTime":"1","showDisconnectNotification":true},{"id":"1ef67418aa7b26f5","type":"ui-theme","name":"Default Theme","colors":{"surface":"#3f51b5","primary":"#0094ce","bgPage":"#363636","groupBg":"#525252","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"0px","groupBorderRadius":"12px","widgetGap":"12px"}}]

How do I change the font size of the labels? I found many, many similar topics in this forum, but no one seems to work. Also, I am absolutely not familiar with ccs.

Your help would be highly appreciated.

Many thanks

Heinz

[jbudd]

I don't know how to style the Dashboard 2 gauge either, so let's find out!

1. Set a class in the gauge config. I've used TESTING but you probably want something more meaningful.
   
   
2. Right click on the gauge label and select "inspect" (I use Firefox but most browsers have this)
   
   

You can see (1) there is a

<div class="nrdb-ui-widget nrdb-ui-gauge TESTING" ...

And within it (2)

<label class="nrdb-ui-gauge-title">Aktuell</label>

And to the right we see (3) that the font-size is 1rem.

So we want to style class nrdb-ui-gauge-title within class TESTING

Add a ui-template node to this page, type CSS (Single Page) :

(color: red; is useful so we can see when we have got the CSS selector right).
Deploy and take a look at the result

Looks promising?

Adjust the font size to suit your dashboard, then get rid of the red color.

Similarly for the chart label. It will need a different CSS declaration in your template. node.

[ruffieuxh]

Many thanks jbudd for your help.

It worked very well for the gauges. Now I am trying to use the same approach for the chart. But that does not seem to work. May you got an idea why....

Here's what I tried:

I extended the definition for of the template node for the charts, like this:

Then I tried to find the same part in the explore window like you showed for the gauge. But for the charts there seems to be no "label" definition:

What am I missing?

Many thanks

Heinz

[ruffieuxh]

Just found out, that if I add the label below after the first <div> above, the title get's formated as I intended, but how to make this permanent?

<label class="nrdb-ui-chart-title">Leistung</label>