Several times I've had a case where I wanted to change the color of just one ui-text node. For example, I am monitoring a temperatures which is display in text node 'A'. I also have text node 'B' under text node 'A' which is normally empty. If the temperature exceeds the set value, I move the wor…

Did you spot this thread a day or so ago ? [image] How to change ui-text background color? Dashboard If I make the CSS more targetable you could do this [image] by adding a style template like <style> .nr-dashboard-widget-Test_text { background-color:red !i…

But what if you don't use the label because you don't want it to show?

edge cases can use a template :slight_smile:

or there could be a switch not to show the label :face_with_raised_eyebrow:

Actually it would still have a class of nr-dashboard-widget- as that is prepended to the label... (and no - I don't want to add a switch)

I suppose I can use CSS to hide the label :stuck_out_tongue_winking_eye: Actually having something that will allow targeting of individual widgets will be a great improvement Thanks for all you do!

I wonder if this feature is already implemented for the ui_text node. The help text says so: The widget also has a class of nr-dashboard-widget-{the_widget_label_with_underscores} which can be used for additional styling if required. You may need to use the !important flag to override the the…

It should do - here is one for a text box with a label "Simple" <md-card ui-card-size="3x1" layout="row" layout-align="space-between center" class="nr-dashboard-text ng-scope _md layout-row layout-align-space-between-center nr-dashboard-widget-Simple visible" ng-class="[ me.item.safeLabel, {'nr-das…

Thanks for the feedback Dave ! I will have a (careful) look as soon as I get a chance.

I have a ui-text widget box with a label of node17: here is what the class shows: class="nr-dashboard-text ng-scope _md layout-row layout-align-start-center nr-dashboard-widget-node17__ visible" Looks like the two underline characters replace the colin(:) and space that follows it but atleast it …

Node-RED

Node-RED Forum

Request: Add a option on UI nodes to add a CSS class

Core Development

dceejay 8 December 2019 19:15 2

Did you spot this thread a day or so ago ?

Topic		Replies	Views
Ui template style classes Dashboard	1	214	19 May 2024
Using css field in dashboard widget Dashboard node-red-dashboard	7	3816	28 January 2023
Adding Padding to ui-textbox Dashboard node-red-dashboard	5	789	9 March 2022
DB2: How to get CSS selectors for ui-text widget labels? Dashboard dashboard-2	16	257	10 August 2025
How to change ui-text background color? Dashboard	15	15505	16 January 2022

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Request: Add a option on UI nodes to add a CSS class

Related topics