Hello:
On my dashboard page(s), I have a “title” label in a ui-text node. Currently, I have overridden the font properties (font-family, font-size, color) by using “Apply style” . I am trying to identify the CSS selector to target and then apply a style defined in a CSS ui-template.
Below is a screen shot of the Inspect Element menu item. Is the correct selector “.nrdb-ui-text-label” as shown in the tooltip or is it something else? If so, how do I find it?
Thanks for your help
Well yes it is.
Does it work if you define the style in a CSS template?
Sometimes a property will be specified elsewhere, overriding your style. In that case you need to use a more specific selector to override that (I'm sorry, don't know the correct way to phrase that).
Possible strategies are:
.specialtext .nrdb-ui-text-label.Unfortunately, it does not
Here is the CSS style that I have defined (just so that I could actually see the change):
my-page-title.nrdb-ui-text-label {
font-size: 24px !important;
font-weight: bold !important;
color: #c8ff00 !important;
}
When I right-click on the selector I get → #nrdb-ui-widget-c7e917035147f16e > div > label
I removed the override style on the ui-text widget and put in “my-page-title” in “class” and what is shown on the page is:
I am a complete novice at CSS etc. as you may have guessed!
UPDATE: It turned out to be much simpler than that
Sample CSS style:
.my-text-style {
font-size: 24px;
color: #FF5733;
font-weight: bold;
}
UPDATE 2: I spoke too soon 
- it applied the color and font-weight but not the size
OK then.
Here is a text widget on my dashboard (the text is "HOLD") without any custom CSS styling.
And here is a CSS template node.
You can see that I set it to apply to a single dashboard page "Door Sensor"
In the template body I got rid of all the default junk because it's not relevant to a CSS template. Notice that not even the <style> and </style> tags are left. You might assume that the dashboard is smart enough to ignore these for a CSS template, but no.
The CSS is this
.nrdb-ui-text-label {
color: red;
font-size: 1.5rem;
}
The dot at the start indicates that we are styling an item with a particular class. If it was an id it would be a # instead #nrdb-ui-text-label
The styles to apply are wrapped between curly brackets, and each one must have a semicolon after it.
After deploying, the dashboard looks like this:
Note that all text widgets on this page will now be red and a larger font size.
It is of course possible to restrict it to just one, or a few
See if this works for you.
Why didn't your attempt work?
I think it's the "my-page-title" bit. If you set the class of this widget to my-page-title, it would have been implemented as a class on the containing div.
The CSS selector for a class needs a dot. Also it's slightly different if there is / isn't a space between two classes.
So possibly, .my-page-title .nrdb-ui-text-label would have worked.
@jbudd - thanks so much. I think I posted an update right when you posted the message above. My updated CSS was similar to yours and what I did was apply it in the “class” property of the widget. It styled the text correctly EXCEPT for the font-size. Adding “!important’ after the font-size did not change it either. It looks like it is being overridden by this (arrow). If I turn off the font-size in the style panel, my CSS works. Any thoughts on how I can work around this?
I do need it to apply to just one ui-text widget on each page.
EDIT: You can see it being ignored here (the 2rem is my custom style)
It's not too surprising that the style options in the config take precedence.
I never use those, all styling I want to apply is through a template node.
I guess they are provided for anyone who does not want to get into even simple CSS but they are too limited to be much use.
@jbudd - thanks again.
I used your CSS at the page level but then (as you had said), all the ui-text widgets took on those attributes. Any guidance on how to restrict it to just the one that I want? If I have to find the specific widget id and then apply it to that, I may be better off using the “Apply style” at the widget level.
Also, it appears to have stomped over the font family that I had specified in another CSS style that was for all pages:
And used this instead:
It did apply the CSS that was at the page level (from your example)
Any suggestions/guidance would be much appreciated.
Also, I’m a little surprised that the specific class at the widget level is being ignored because I expected that one could not be more specific than that 
. @joepavitt - is that expected behavior?
UPDATE: It appears that the ui-text widgets are ignoring any custom styles with “font-family” property. They appear to get the font family from nrdb-ui-text.nrdb-ui-text–row-left (as seen in the screenshot above). The font-size, color etc. are working as expected.
Nothing is being ignored, you simply aren't making your CSS selectors specific enough to adjust certain properties that are set by dashboard built in default styling.
The custom class is applied at the top of the widget so that you can target elements within it. If you want to set the font of an inner element just make your selector more specific. E.g.
div.nrdb-ui-text.my-text-style > div > label.nrdb-ui-text-label {
// Whatever
}
(untested - I am not near a computer atm)
I actually have a page level style where I specify the font-family. All other elements on the page adopt the font family (group header, text input node, 3rd party widget) adopt the font but ui-text widget does not, it looks like they stay with “Helvetica” (MacOS 15.6, Safari)
.nrdb-ui-page.mytheme {
font-family: "Tahoma" !important;
}
I changed the font-family to “Monaco” this is what is shown:
The ui-text nodes were in “Helvetica” (yellow) and all the others were in “Monaco” (red - as expected). I also noticed that ui-charts (line, pie/donut) don’t adopt the page level css font-family. If this is expected, is there any way to set the font at the site level?
Again this is down to specificity as we have explained before. To affect the ui-text elements add more specific classes.
Charts are drawn in a canvas so are not affected by css.
OK - so what I am hearing is that there is no way to set style for all pages?
In the inspection and style panes, I can see where the font is being assigned to this object. If I uncheck the “font-family” option, the text is shown in the font that I have specified for the page.
Is “div.nrdb-ui-text.nrdb-ui-text--row-left” (as shown in the style panel → inherited from) that should be targeted? When I click on the inspect panel and select “copy selector path” I get “#nrdb-ui-widget-c7e917035147f16e > div > label” which seems to be that specific instance of the ui-text widget. If that has to be the target, it is probably easier to use the “Apply style” in the ui-text widget configuration as there are multiple objects that need to have the same style.
Unfortunately, the earlier CSS that you suggested did not work, so would appreciate any guidance on what would be the appropriate CSS to use.
Thanks for your help.
No, thants not what is being said at all, what is being said is you need to be specific in certain cases.
For example, to affect the label (due to it having scoped styling by default) you need your CSS to specifically target those elements.
e.g.
.nrdb-ui-page.mytheme,
.nrdb-ui-page.mytheme div.nrdb-ui-text > label {
font-family: Tahoma;
}
Sorry, in the case of canvas elements, correct. But you can use other charts (like eCharts or whatever you desire in a template)
Thanks - I use Chart.js for most of my line/bar/mixed charts and I think I can do it there. Probably will switch from the ui-chart node to that for the simpler ones as well. The one that I could not figure out in chart.js was the pie/donut chart - will see if I can solve that one!
Out of curiosity - there is a “Class” option on the ui-chart configuration panel. What does that do?
Thanks - this seems to work. Will keep playing with it to see if I can get the “titles” of the page to be what I need (font-size, weight).
@Steve-Mcl got the font-size style to work!
Leaving the solution here in case anyone else needs it.
In the ui-templage →CSS (All pages) I added in another style for the font-size and applied it to that specific ui-text label in the </>Class property
CSS style solution:
.nrdb-ui-page.mytheme,
.nrdb-ui-page.mytheme div.nrdb-ui-text > label {
font-family: 'Tahoma';
}
.mytitle div.nrdb-ui-text > label {
font-size:23pt;
}
The first one sets the font (Tahoma) for each page (“mytheme” is in the “class” property of each page) and the second one sets the size (23pt) for just the ui-text widget that is the title (“mytitle” is in the “class” property of that specific widget)
UPDATE: I removed the > label qualifier in the .nrdb-ui-text > label and changed it to .nrdb-ui-text. Now it changes the font for the entire ui-text widget (previously it was targeting only the label). To specifically target the label portion use .nrdb-ui-text > label. Just as an experiment, I tried to target the “value” portion to change the color (selector appears to be .nrdb-ui-text-value but I could not get that to work.
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.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy
