Changing the Color and Font of the number shown by the number input widget

Dashboard
1

Is there a simple example of changing the fonts and colors of both the label and the number independent of each other when using the number input widget for dashboard 2.0?

Regards,

Roger

2

If all you want is to set these styles once, use a CSS type ui-template:

.nrdb-ui-number-input .v-field-label span {
    color: green;
    font-family: "Courier new";
}

.nrdb-ui-number-input .v-field__input {
    color: blue;
    font-family: "Comic sans ms";
}

To change them dynamically and independently set up class names in the template for each:

.redlabel .v-field-label span {
    color: red;
    font-family: "Segoe UI";
}
.bluelabel .v-field-label span {
    color: blue;
    font-family: "Helvetica";
}
.greeninput .v-field__input {
    color: green;
    font-family: "Comic sans ms";
}
.goldinput .v-field__input {
    color: gold;
    font-family: "Times New Roman";
}

And pass a message to the node with msg.ui_control like this

{
"class": "redlabel greeninput"
}
1 Like
3

I really appreciate the effort you made to help me out. Thank you and Merry Xmas. I will follow up with you a little later. Do you get on Discord at all I would like to show you how my Thermostat is currently working.