# Change css parameters for message to display with ui\_template

**URL:** https://discourse.nodered.org/t/change-css-parameters-for-message-to-display-with-ui-template/92553
**Category:** Dashboard
**Created:** [21 October 2024 14:15 UTC](https://discourse.nodered.org/t/change-css-parameters-for-message-to-display-with-ui-template/92553 "2024-10-21T14:15:44Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)
#### Post date: [21 October 2024 14:15 UTC](https://discourse.nodered.org/t/change-css-parameters-for-message-to-display-with-ui-template/92553/1 "2024-10-21T14:15:44Z")

</div>

Try to use the "Template" (node-red-dashboard : ui\_template) to display status/error messages.  
To get different outlines (eg. change color) I come up with this code:

```auto
<!-- <div id="{{'my_'+$id}}" style="font-size:small"></div> -->
<div id="{{'my_'+$id}}"></div>

<script>
    (function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      // Do something when msg arrives
      $("#my_"+scope.$id).html(msg.payload);
      $("#my_"+scope.$id).css("style","font-size:small");
    }
  });
})(scope);
</script>

```

Obviously it doesn't do what I expect, see first line. How to change the “div” statement and the jq call for it?

---

<div class="post-metadata">

### Author: ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)
#### Post date: [21 October 2024 16:59 UTC](https://discourse.nodered.org/t/change-css-parameters-for-message-to-display-with-ui-template/92553/2 "2024-10-21T16:59:46Z")

</div>

Finally, I found a solution that does what I want it to do:

```auto
<div id="{{'msg_'+$id}}" style="font-size:small;color:black"></div>

<script>
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      //console.log(` >${msg.payload}< >${msg.topic}< `);
      if (msg.topic === 'rowerror') {
        $("#msg_"+scope.$id).html(msg.payload).css("color","red");
      } else {
        $("#msg_"+scope.$id).html(msg.payload).css("color","black");
      }
    }
  });
})(scope);
</script>

```

---

<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: [4 November 2024 17:00 UTC](https://discourse.nodered.org/t/change-css-parameters-for-message-to-display-with-ui-template/92553/3 "2024-11-04T17:00:30Z")

</div>

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