# Text Node - text format

**URL:** https://discourse.nodered.org/t/text-node-text-format/76886
**Category:** Dashboard
**Created:** [24 March 2023 00:17 UTC](https://discourse.nodered.org/t/text-node-text-format/76886 "2023-03-24T00:17:39Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![andyp](https://avatars.discourse-cdn.com/v4/letter/a/8baadc/32.png) [@andyp](https://discourse.nodered.org/u/andyp)
#### Post date: [24 March 2023 00:17 UTC](https://discourse.nodered.org/t/text-node-text-format/76886/1 "2023-03-24T00:17:39Z")

</div>

Hi

I wish to change the data in the 'value format' line to not be bold (just normal text).

I tried {{msg.payload}}

This does not work (however font color='green' does work).

Any ideas?

---

<div class="post-metadata">

### Author: ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)
#### Post date: [24 March 2023 03:31 UTC](https://discourse.nodered.org/t/text-node-text-format/76886/2 "2023-03-24T03:31:53Z")

</div>

Some formatting gets removed by the node.

But you can do this with a template node.

Add a template node with Template type **widget in group** , then select the same group as your text node, set size set to auto with the following content, then any text nodes on that TAB will have "normal" font weight.

```auto
<style>
.nr-dashboard-text .value {
font-weight: normal;
}
</style>

```

If you want to change this for all text nodes on all tabs then set Template type to **added to site head section**

The 3rd option is to target specific text nodes. To do this enter a class name in the text nodes you want to target eg "my\_text" then with the template set to **added to site head section** modify the the target like so.

```auto
<style>
.my_text .value {
font-weight: normal;
}
</style>

```

Then any nodes with the class my\_text will be "normal" font weight.

---

<div class="post-metadata">

### Author: ![andyp](https://avatars.discourse-cdn.com/v4/letter/a/8baadc/32.png) [@andyp](https://discourse.nodered.org/u/andyp)
#### Post date: [24 March 2023 04:33 UTC](https://discourse.nodered.org/t/text-node-text-format/76886/3 "2023-03-24T04:33:20Z")

</div>

Thank you.... The first option 'widget in group' changed things for the whole flow (not just the group).

So I tried the 3rd option - which is really what I require.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/d/1dc67b1452a30c5b9bd4b69a92fa7e81b2c7acb3.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/f/ef27ac997d939f90dcbcd195a28e2465a8b4c894.png)

Unfortunately this is not working for me.... Any thoughts?

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [24 March 2023 08:01 UTC](https://discourse.nodered.org/t/text-node-text-format/76886/4 "2023-03-24T08:01:34Z")

</div>

1. You should have only style declaration in the `ui_template`
2. Don't connect any wires to that template.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/8/a89a2d432d752fc690261376f139d7c30cc6fadc.png)

---

<div class="post-metadata">

### Author: ![andyp](https://avatars.discourse-cdn.com/v4/letter/a/8baadc/32.png) [@andyp](https://discourse.nodered.org/u/andyp)
#### Post date: [24 March 2023 08:12 UTC](https://discourse.nodered.org/t/text-node-text-format/76886/5 "2023-03-24T08:12:07Z")

</div>

Perfect, thank you.....

Is there a way of changing between two ui\_templates?

Or more simply, is there any way of (for example) using msg.topic as the \</\> Class in a text node?

For example, can I set text bold if x is true, and text as normal if x is false?

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [24 March 2023 08:23 UTC](https://discourse.nodered.org/t/text-node-text-format/76886/6 "2023-03-24T08:23:07Z")

</div>

You can change the class by sending `msg.className = 'name_of_the_class'`

---

<div class="post-metadata">

### Author: ![andyp](https://avatars.discourse-cdn.com/v4/letter/a/8baadc/32.png) [@andyp](https://discourse.nodered.org/u/andyp)
#### Post date: [24 March 2023 08:25 UTC](https://discourse.nodered.org/t/text-node-text-format/76886/7 "2023-03-24T08:25:27Z")

</div>

Thank you - that works great 🙂

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [24 March 2023 08:28 UTC](https://discourse.nodered.org/t/text-node-text-format/76886/8 "2023-03-24T08:28:46Z")

</div>

And don't make more than one template for CSS. Just add rules to existing one.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/c/bca9df403390890e62d2df8590a8b6831ea3bf3d.png)

To make things flexible and easy to use, make your classes so you can use them in combination.

Example:

```auto
[{"id":"259c38a3aaa1a43b","type":"ui_template","z":"09deee63c1b960f7","group":"c7a27394.057878","name":"Dashboard CSS","order":9,"width":0,"height":0,"format":"<style id=\"my-styles\">\n .my_text_regular .value{\n font-weight:normal;\n }\n .my_text_bold .value{\n font-weight:bold;\n }\n .my_text_red .value{ \n color:red;\n }\n .my_text_green .value{\n color:green;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":520,"y":2200,"wires":[[]]},{"id":"82890ba2beba3347","type":"function","z":"09deee63c1b960f7","name":"choose css class ","func":"let data = msg.payload\n\nif (data > 200) { \n msg.className = \"my_text_red my_text_bold\"\n}\nelse if(data > 150){\n msg.className = \"my_text_bold\"\n}\nelse if (data > 100) {\n msg.className = \"my_text_bold my_text_green\"\n}\nelse if(data > 50){\n msg.className = \"my_text_regular my_text_green\"\n}\nelse {\n msg.className = \"my_text_regular\"\n}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":510,"y":2260,"wires":[["7fa7a07fe2814d5d"]]},{"id":"7fa7a07fe2814d5d","type":"ui_text","z":"09deee63c1b960f7","group":"08ac9b242ae51e8c","order":10,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","className":"","x":750,"y":2260,"wires":[]},{"id":"e072150d4dbcc442","type":"ui_slider","z":"09deee63c1b960f7","name":"","label":"slider","tooltip":"","group":"08ac9b242ae51e8c","order":11,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":"300","step":"10","className":"","x":310,"y":2260,"wires":[["82890ba2beba3347"]]},{"id":"c7a27394.057878","type":"ui_group","name":"aha","tab":"54e197d8.7f7fe8","order":2,"disp":false,"width":"9","collapse":false,"className":""},{"id":"08ac9b242ae51e8c","type":"ui_group","name":"Default","tab":"2acb95821445c8af","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"54e197d8.7f7fe8","type":"ui_tab","name":"key","icon":"dashboard","order":1,"disabled":false,"hidden":false},{"id":"2acb95821445c8af","type":"ui_tab","name":"Home","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [7 April 2023 08:29 UTC](https://discourse.nodered.org/t/text-node-text-format/76886/9 "2023-04-07T08:29:28Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
