CSS to enlarge text size of single ui-text node value

[MarkC]

Hi All,
Hopefully an easy one - I have searched the forum but can't seem to figure out what I am doing wrong.

I simply want to enlarge the text size of a single ui-text node value field.

I can successfully enlarge the text size on all ui-text node value fields using:

.nr-dashboard-theme .nr-dashboard-text .value {
    font-size: 1.5em;
 }

but when I try to specify any single node, it doesn't seem to work, I have tried the following (with and without the !important), checked the node-id several times and tried it on multiple nodes:

[node-id="415c4c9bd2b631ed"] > .nr-dashboard-theme .nr-dashboard-text .value {
    font-size: 1.5em !important;
 }

Any ideas how I can get this to work?

Thanks in advance, Mark.

[hotNipi]

@MarkC

[node-id="415c4c9bd2b631ed"] > .nr-dashboard-theme .nr-dashboard-text .value {
    font-size: 1.5em !important;
 }

[node-id="415c4c9bd2b631ed"] .value {
    font-size: 1.5em;
 }

And you don't even need the !important flag.

[edje11]

You can also change the font size in the value field:

[Crossfire]

ok, so i tried
[node-id="415c4c9bd2b631ed"] .value { font-size: 1.5em; }
with of course the ID of the text i need to change:

already had the <font size = 16>{{msg.payload}}

which yes, changed the font to a bigger size..... but i cannot go bigger, and i need one set of number bigger, like almost 1 inch tall on a 7in screen held horizontal....

any ideas?

edit, seems 1-8? is the range of sizes....px and em seem to do nothing

[MarkC]

Thank you so much for taking the time to respond @hotNipi - this works perfectly!
Also super nice work with the new gauge you are creating - I am using a number of your nodes in my UI

[MarkC]

I can confirm that the CSS works fine for me, even above 8em.

I tried the following, with 1.5em, 8em and 10em - each changed the text size accordingly

[node-id="415c4c9bd2b631ed"] .value {
    font-size: 1.5em;
 }

Are maybe doubling up with your <font size = 16>? You need to use one of the other.

EDIT: I also just tried the solution from @edje11 (in isolation) - this also works fine, but I did see the same limitation that the size/scale seems to be unique and unrelated to any units, also that the effective size is limited to 8, a bigger number results in the same size as 8.

[MarkC]

@edje11 thank you very much for sharing the alternative solution - this option also works well and avoids the need for any CSS.
The only limitations are as mentioned by @Crossfire, but for the typical use case I don't think that is a problem.

[Crossfire]

ok if the part with node id works, then i may just be putting it in the wrong way.

currently putting it into the ui_text node that i want changed. putting it exactly as it is written.

(and no, i removed font size when i started changing the css and vise versa)

so if i have inject -> text box.....do i put the css in that text box?
or
inject -> ? ->text box
does something go in place of the ?

[MarkC]

To use the CSS option you need to add a Template node somewhere in the editor and then enter:

<style>
[node-id="415c4c9bd2b631ed"] .value {
    font-size: 2.5em;
 }
</style>

[Crossfire]

so i have this
'
[
{
"id": "37f24e211d4e78d4",
"type": "template",
"z": "a66128a01ec6bbcc",
"name": "",
"field": "payload",
"fieldType": "msg",
"format": "handlebars",
"syntax": "mustache",
"template": "\n[node-id="1197dd081a523ebc"].value {\n font-size: 10.0em;\n }\n\n",
"output": "str",
"x": 920,
"y": 140,
"wires": [
[
"1197dd081a523ebc",
"c94efadeb76262c4"
]
]
}
]
'

data into it, text box out of it....but now it isnt showing anything in the text box.

i am missing something, and have no clue what it is...

[MarkC]

Sorry I don't really understand what you are trying to do. I also can't seem to import what you pasted in.

Just to confirm, are you using a 'template' node?

Then have you set template type to 'added to site section' and pasted the CSS in per below?

There is no need to connect the 'template' node to anything, it just needs to be added somewhere to the Node-RED editor.

[Crossfire]

no, was using the dashboard text box: to put the text on the dashboard

then using built in template, per what you all were saying

[Crossfire]

[Crossfire]

ok did it with the blue node, and still no change?

see, i am completely lost to this:

update:
using the node ID with added = nothing
using "widget in group" worked?

[MarkC]

@MarkC

There is no need to connect the 'template' node to anything, it just needs to be added somewhere to the Node-RED editor.

Do not connect the template node to anything - it just needs to be there, I have stated this a few times.

Also show an image of what you entered into the template node (obviously use the ID from YOUR text node).

[Crossfire]

[MarkC]

You still have the 'template node' connected to the inject node... again just try without it connected to anything - it should work.

Also make sure there is nothing extra/fancy in the ui-text node, in case that is interfering - just let it accept {{msg.payload}} in the value field.

[Crossfire]

yes, templates work alone (and a side effect, in dashboard layout, gives me the ability to use them as placeholders to help keep things where i want!)

thank you for pointing out the "wrong template" i was using. and the style sheet!

[xpqrs97]

is this method works on ui_table?