# \[solved\] Change color of template node with variable

**URL:** <https://discourse.nodered.org/t/solved-change-color-of-template-node-with-variable/44835>\
**Category:** Dashboard\
**Created:** [28 April 2021 07:08 UTC](https://discourse.nodered.org/t/solved-change-color-of-template-node-with-variable/44835 "2021-04-28T07:08:50Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![steinerma](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steinerma/32/37666_2.png) [@steinerma](https://discourse.nodered.org/u/steinerma)\
**Post date:** [28 April 2021 07:08 UTC](https://discourse.nodered.org/t/solved-change-color-of-template-node-with-variable/44835/1 "2021-04-28T07:08:50Z")

</div>

hi, i store the value of the variable (color1) in the flow. i would like to retrieve this value in the template node. What am I doing wrong?

value of color1 = rgba(208,22,22.1)

```auto
<style>
    var color1 = flow.get("color1");
    #Ereignismonitor_Einsatzzeit md-card {
    font-size:160%;
    font-weight: bold;
    text-align:center; 
    justify-content: center;
    background-color: color1;
}
</style>
<div ng-bind-html="msg.payload"></div>

```

---

<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:** [28 April 2021 07:26 UTC](https://discourse.nodered.org/t/solved-change-color-of-template-node-with-variable/44835/2 "2021-04-28T07:26:01Z")

</div>

You can't have any flow variable defined in style tags.

But you can send CSS properties with msg and use JavaScript to change properties of card.  
Simple example

```auto
<script>
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
        //assumng that msg.payload carry some color
        $("#HOME_DEFAULT_cards").css("background-color",msg.payload)
    }
  });
})(scope);
</script>

```

---

<div class="post-metadata">

**Author:** ![steinerma](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steinerma/32/37666_2.png) [@steinerma](https://discourse.nodered.org/u/steinerma)\
**Post date:** [28 April 2021 08:26 UTC](https://discourse.nodered.org/t/solved-change-color-of-template-node-with-variable/44835/3 "2021-04-28T08:26:43Z")

</div>

great, thank you very much! Now I should only be able to insert the variable text (msg.topic) with the properties listed below by using css. How can I insert this in your script?

font-size:160%;  
font-weight: bold;  
text-align:center;  
justify-content: center;

---

<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:** [28 April 2021 08:39 UTC](https://discourse.nodered.org/t/solved-change-color-of-template-node-with-variable/44835/4 "2021-04-28T08:39:18Z")

</div>

Well I'd avoid to use `msg.topic` for such kind of data transport but it is not hard rule...  
You can have additional properties added to the` msg.`  
like

```auto
msg.styles = {
    fontSize:"160%",
    fontWeight:"bold",
    .....
}

```

And hen you'll need to figure out how those properties can be applied with JavaScript

The `font-weight` can be found from here [HTML DOM Style fontWeight Property](https://www.w3schools.com/jsref/prop_style_fontweight.asp), try to find others, they are nearby.

---

<div class="post-metadata">

**Author:** ![steinerma](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steinerma/32/37666_2.png) [@steinerma](https://discourse.nodered.org/u/steinerma)\
**Post date:** [28 April 2021 09:12 UTC](https://discourse.nodered.org/t/solved-change-color-of-template-node-with-variable/44835/5 "2021-04-28T09:12:32Z")

</div>

thank you for your help. I think I'm on the wrong track. The idea is this: I have a stopwatch. When it is at 00 : 00: 00, the field (Ereignismonitor\_Einsatzzeit md-card) should be green, when it is running, the field should be red (like picture below). Probably there is a much easier solution than using CSS?

![einsatzzeit](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/7/c70adcbfe0020247dae351e6719cbcb2eeff3529.png)

---

<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:** [28 April 2021 09:18 UTC](https://discourse.nodered.org/t/solved-change-color-of-template-node-with-variable/44835/6 "2021-04-28T09:18:33Z")

</div>

Well the color is always CSS, except if it is image. So track is correct.  
Share slight bit of the flow. Include nodes which send the data to the template...

---

<div class="post-metadata">

**Author:** ![steinerma](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steinerma/32/37666_2.png) [@steinerma](https://discourse.nodered.org/u/steinerma)\
**Post date:** [28 April 2021 09:28 UTC](https://discourse.nodered.org/t/solved-change-color-of-template-node-with-variable/44835/7 "2021-04-28T09:28:59Z")

</div>

Changing the color already works manually thanks to your help. Now the text (msg.time) is not displayed yet (I'm a beginner with nodered and have no idea how to insert it in the template node).

```auto
[
    {
        "id": "31354210.877a8e",
        "type": "function",
        "z": "a7d9890f.f7b6b8",
        "name": "",
        "func": "var seconds = msg.elapsed.time.seconds;\nvar minutes = msg.elapsed.time.minutes;\nvar hours = msg.elapsed.time.hours;\n//time.format('hh:mm:ss');\nlet hrs = ('00'+ hours).slice(-2);\nlet min = ('00'+ minutes).slice(-2);\nlet sec = ('00'+ seconds).slice(-2);\nmsg.time = \"EINSATZZEIT \" + hrs + \" : \" + min + \" : \" + sec;\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "x": 1440,
        "y": 1080,
        "wires": [
            [
                "ca8496f9.a10478",
                "155806cf.faeae9",
                "cc87590.4b356a8",
                "2ab8d6a7.5c504a"
            ]
        ]
    },
    {
        "id": "2ab8d6a7.5c504a",
        "type": "ui_template",
        "z": "a7d9890f.f7b6b8",
        "group": "4fceda30.842a04",
        "name": "Einsatzzeit",
        "order": 1,
        "width": 6,
        "height": 6,
        "format": "<script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n //assumng that msg.payload carry some color\n $(\"#Ereignismonitor_Einsatzzeit md-card\").css(\"background-color\",msg.payload)\n }\n });\n})(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "x": 1670,
        "y": 1120,
        "wires": [
            []
        ]
    },
    {
        "id": "1e1b4248.409a7e",
        "type": "inject",
        "z": "a7d9890f.f7b6b8",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "rgba(208,22,22.1)",
        "payloadType": "str",
        "x": 1410,
        "y": 1160,
        "wires": [
            [
                "2ab8d6a7.5c504a"
            ]
        ]
    },
    {
        "id": "229a0196.0598ce",
        "type": "inject",
        "z": "a7d9890f.f7b6b8",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "rgba(60,158,63,1.1)",
        "payloadType": "str",
        "x": 1410,
        "y": 1120,
        "wires": [
            [
                "2ab8d6a7.5c504a"
            ]
        ]
    },
    {
        "id": "4fceda30.842a04",
        "type": "ui_group",
        "name": "Einsatzzeit",
        "tab": "f01ad79b.4c5be8",
        "order": 4,
        "disp": false,
        "width": "6",
        "collapse": false
    },
    {
        "id": "f01ad79b.4c5be8",
        "type": "ui_tab",
        "name": "Ereignismonitor",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

![time](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/a/da1382ce415b1fa70e8a1f117d9ff57c3f027171.png)

---

<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:** [28 April 2021 09:57 UTC](https://discourse.nodered.org/t/solved-change-color-of-template-node-with-variable/44835/8 "2021-04-28T09:57:36Z")

</div>

Did a bit to lead you to the right direction.

```auto
[{"id":"31354210.877a8e","type":"function","z":"63163740.2d4508","name":"","func":"var seconds = msg.elapsed.time.seconds;\nvar minutes = msg.elapsed.time.minutes;\nvar hours = msg.elapsed.time.hours;\n//time.format('hh:mm:ss');\nlet hrs = ('00'+ hours).slice(-2);\nlet min = ('00'+ minutes).slice(-2);\nlet sec = ('00'+ seconds).slice(-2);\nmsg.time = \"EINSATZZEIT \" + hrs + \" : \" + min + \" : \" + sec;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":280,"y":220,"wires":[["2ab8d6a7.5c504a"]]},{"id":"2ab8d6a7.5c504a","type":"ui_template","z":"63163740.2d4508","group":"4fceda30.842a04","name":"Einsatzzeit","order":1,"width":6,"height":6,"format":"<style>\n.container{\n margin:auto;\n text-align:center;\n}\n.counter{\n font-weight:bold;\n}\n.counter.title{\n color:beige;\n}\n.counter.clock{\n color:green;\n}\n</style>\n<div class=\"container\">\n <div class=\"counter title\" id=\"{{'title_'+$id}}\">TITLE HERE</div>\n <div class=\"counter clock\" id=\"{{'counter_'+$id}}\">CLOCK HRERE</div>\n</div>\n\n<script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n //assumng that msg.payload carry some color\n console.log(msg)\n \n if(msg.title){\n $(\"#title_\"+scope.$id).text(msg.title) \n }\n if(msg.time){\n $(\"#counter_\"+scope.$id).text(msg.time) \n }\n if(msg.payload){\n $(\"#Ereignismonitor_Einsatzzeit md-card\").css(\"background-color\",msg.payload)\n }\n \n \n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":530,"y":360,"wires":[[]]},{"id":"1e1b4248.409a7e","type":"inject","z":"63163740.2d4508","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"rgba(208,22,22.1)","payloadType":"str","x":270,"y":400,"wires":[["2ab8d6a7.5c504a"]]},{"id":"229a0196.0598ce","type":"inject","z":"63163740.2d4508","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"rgba(60,158,63,1.1)","payloadType":"str","x":270,"y":360,"wires":[["2ab8d6a7.5c504a"]]},{"id":"f26c1c7b.9978f","type":"inject","z":"63163740.2d4508","name":"time","props":[{"p":"time","v":"00:11:22","vt":"str"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":270,"y":300,"wires":[["2ab8d6a7.5c504a"]]},{"id":"88f813fa.c491f","type":"inject","z":"63163740.2d4508","name":"title","props":[{"p":"title","v":"SOMETHING","vt":"str"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":270,"y":260,"wires":[["2ab8d6a7.5c504a"]]},{"id":"4fceda30.842a04","type":"ui_group","name":"Einsatzzeit","tab":"f01ad79b.4c5be8","order":4,"disp":false,"width":"6","collapse":false},{"id":"f01ad79b.4c5be8","type":"ui_tab","name":"Ereignismonitor","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![steinerma](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steinerma/32/37666_2.png) [@steinerma](https://discourse.nodered.org/u/steinerma)\
**Post date:** [28 April 2021 10:16 UTC](https://discourse.nodered.org/t/solved-change-color-of-template-node-with-variable/44835/9 "2021-04-28T10:16:57Z")

</div>

wow, thank you so much for your help! This is terrific 🙂

---

<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:** [12 May 2021 10:17 UTC](https://discourse.nodered.org/t/solved-change-color-of-template-node-with-variable/44835/10 "2021-05-12T10:17:06Z")

</div>

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