# How to make font bigger and change the color of label

**URL:** <https://discourse.nodered.org/t/how-to-make-font-bigger-and-change-the-color-of-label/36152>\
**Category:** Dashboard\
**Created:** [18 November 2020 16:18 UTC](https://discourse.nodered.org/t/how-to-make-font-bigger-and-change-the-color-of-label/36152 "2020-11-18T16:18:21Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![roro50](https://avatars.discourse-cdn.com/v4/letter/r/d6d6ee/32.png) [@roro50](https://discourse.nodered.org/u/roro50)\
**Post date:** [18 November 2020 16:18 UTC](https://discourse.nodered.org/t/how-to-make-font-bigger-and-change-the-color-of-label/36152/1 "2020-11-18T16:18:21Z")

</div>

Bonjour, je débute avec Node red, et j'espère que vous allez m'aider sur des problèmes "simples" que je rencontre ,

1, sur ma première page j'ai en entrée "inject" avec le message bonjour, et je l'affiche dans un module "text" ou "template", je compile et cela fonctionne, je trouve bien "bonjour" sur mon dashbord.

ma question est comment faire si je jeux une police plus grosse sur le dashbord ? et éventuellement changer la couleur d'affichage.  
merci  
( je pense avoir d'autres questions plus tard, mais commençons doucement )

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [18 November 2020 19:51 UTC](https://discourse.nodered.org/t/how-to-make-font-bigger-and-change-the-color-of-label/36152/2 "2020-11-18T19:51:00Z")

</div>

...and in English;

> Hello, I am new to Node red, and I hope you will help me with some "simple" problems I am having,
> 
> On my first page I have "inject" input with the message hello, and I display it in a "text" or "template" module, I compile and it works, I find "hello" on my dashboard .
> 
> my question is what if I play a bigger font on the dashboard? and possibly change the display color.  
> thank you  
> (I think I have more questions later, but let's start slowly)

---

<div class="post-metadata">

**Author:** ![roro50](https://avatars.discourse-cdn.com/v4/letter/r/d6d6ee/32.png) [@roro50](https://discourse.nodered.org/u/roro50)\
**Post date:** [18 November 2020 19:55 UTC](https://discourse.nodered.org/t/how-to-make-font-bigger-and-change-the-color-of-label/36152/3 "2020-11-18T19:55:58Z")

</div>

merci Paul

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [18 November 2020 19:57 UTC](https://discourse.nodered.org/t/how-to-make-font-bigger-and-change-the-color-of-label/36152/4 "2020-11-18T19:57:25Z")

</div>

If you look at the readme for the `ui_text` node, it say's

* * *

The **Value Format** field can be used to change the displayed format and can contain valid HTML and [Angular filters](https://scotch.io/tutorials/all-about-the-built-in-angularjs-filters).

* * *

So you can add html or Angular Filters code to change the way it is displayed.

`<h1>{{msg.payload}}</h1>`

...or use html or Angular in a `ui_template` node, which maybe an better option, as the editor is easier to use.

---

<div class="post-metadata">

**Author:** ![roro50](https://avatars.discourse-cdn.com/v4/letter/r/d6d6ee/32.png) [@roro50](https://discourse.nodered.org/u/roro50)\
**Post date:** [18 November 2020 20:19 UTC](https://discourse.nodered.org/t/how-to-make-font-bigger-and-change-the-color-of-label/36152/5 "2020-11-18T20:19:14Z")

</div>

thank you, but I do not know the language (I am learning) can you give me an example of a text in big bold red for example. thank you

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [18 November 2020 20:39 UTC](https://discourse.nodered.org/t/how-to-make-font-bigger-and-change-the-color-of-label/36152/6 "2020-11-18T20:39:13Z")

</div>

Try this;

`<font color="red" size=120%>{{msg.payload}}</font>`

```auto
[{"id":"2370981c.b4d568","type":"ui_template","z":"c9c4eeb8.bad8e","group":"61d2dced.3db8f4","name":"","order":163,"width":"6","height":"2","format":"<font color=\"red\" size=120%>{{msg.payload}}</font>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":450,"y":1800,"wires":[[]]},{"id":"ca59633e.1993c","type":"inject","z":"c9c4eeb8.bad8e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"This is big red!","payloadType":"str","x":270,"y":1800,"wires":[["2370981c.b4d568"]]},{"id":"61d2dced.3db8f4","type":"ui_group","name":"flowtest","tab":"3c94630c.13381c","order":1,"disp":true,"width":16,"collapse":false},{"id":"3c94630c.13381c","type":"ui_tab","name":"Test","icon":"dashboard","order":9}]

```

I am no expert on html, but there are lots of information & examples by using google, or searching this forum.

---

<div class="post-metadata">

**Author:** ![roro50](https://avatars.discourse-cdn.com/v4/letter/r/d6d6ee/32.png) [@roro50](https://discourse.nodered.org/u/roro50)\
**Post date:** [19 November 2020 06:24 UTC](https://discourse.nodered.org/t/how-to-make-font-bigger-and-change-the-color-of-label/36152/7 "2020-11-19T06:24:03Z")

</div>

Thank you very much, these are simple things (I think) but I have been looking for the solution for quite a while. not easy to find tutorials on this type of basic instruction. My goal is to create a small weather station interface.  
I will come back to you, for my next difficulty

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [19 November 2020 10:00 UTC](https://discourse.nodered.org/t/how-to-make-font-bigger-and-change-the-color-of-label/36152/8 "2020-11-19T10:00:07Z")

</div>

Good luck with your project, and if you do have any questions, please create fresh topics, and I'm sure that the node-RED community will try and help where they can.

---

<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:** [18 January 2021 10:00 UTC](https://discourse.nodered.org/t/how-to-make-font-bigger-and-change-the-color-of-label/36152/9 "2021-01-18T10:00:15Z")

</div>

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