# My template nodes are ignoring my relations

**URL:** <https://discourse.nodered.org/t/my-template-nodes-are-ignoring-my-relations/63385>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [2 June 2022 11:27 UTC](https://discourse.nodered.org/t/my-template-nodes-are-ignoring-my-relations/63385 "2022-06-02T11:27:31Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![HuOliveiraWork](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/huoliveirawork/32/62521_2.png) [@HuOliveiraWork](https://discourse.nodered.org/u/HuOliveiraWork)\
**Post date:** [2 June 2022 11:27 UTC](https://discourse.nodered.org/t/my-template-nodes-are-ignoring-my-relations/63385/1 "2022-06-02T11:27:31Z")

</div>

Hi erveryone,

I'm trying to change my gauge css properties depending in wha'ts the value of my msg.status. So I added a switch and I have a template for each option like on the image.

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

But my css is allways changing for the bottom template properties, even when the program don't pass there.

My up template code:

```auto
<style>
    
    [node-id="2074463f2a4e057d"]{
    
        border: 4px solid red !important;
        color: black !important;
        border-radius: 20px;
    
    }
    
</style>

```

My bottom template:

```auto
<style>
    
    [node-id="2074463f2a4e057d"]{
    
        border: 4px solid black !important;
        /*border: none !important;*/
    
    }
    
</style>

```

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [2 June 2022 11:40 UTC](https://discourse.nodered.org/t/my-template-nodes-are-ignoring-my-relations/63385/2 "2022-06-02T11:40:25Z")

</div>

If these are head templates then they will both be present in the output & the bottom one will always win.

A better solution is to use class names....

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/5/4588641a69be202260e926a3342fae3d0d72b1d3.png)

Check the built in help info on the dashboard nodes and search the forum for `msg.className` for clues

---

<div class="post-metadata">

**Author:** ![HuOliveiraWork](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/huoliveirawork/32/62521_2.png) [@HuOliveiraWork](https://discourse.nodered.org/u/HuOliveiraWork)\
**Post date:** [2 June 2022 12:07 UTC](https://discourse.nodered.org/t/my-template-nodes-are-ignoring-my-relations/63385/3 "2022-06-02T12:07:00Z")

</div>

Hi @Steve-Mcl thanks for the reply. It's working now! :smiling:

I don't know if it's better to create a new topic for this new question, but how can I change the color of the gauge metrics text?

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [2 June 2022 12:31 UTC](https://discourse.nodered.org/t/my-template-nodes-are-ignoring-my-relations/63385/4 "2022-06-02T12:31:09Z")

</div>

> [@HuOliveiraWork](#):
>
> I don't know if it's better to create a new topic for this new question

Probably 😉

Here is a demo for you to play with...

(Use `CTRL-I` to import)

```auto
[{"id":"ea334285a1c63cbd","type":"ui_template","z":"7ecba32db86f0617","group":"ef2301c8f15e8f4a","name":"Head template styles","order":2,"width":0,"height":0,"format":"<style>\n .red-border .nr-dashboard-gauge svg {\n border: 4px solid red !important;\n color: black !important;\n border-radius: 20px;\n }\n\n .simple-border .nr-dashboard-gauge svg {\n border: 4px solid black !important;\n /*border: none !important;*/\n }\n \n .red-gauge-text .nr-dashboard-gauge text {\n fill: red !important;\n }\n \n .green-gauge-text .nr-dashboard-gauge text {\n fill: green !important;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":1020,"y":440,"wires":[[]]},{"id":"17863e1bd2c477b3","type":"ui_gauge","z":"7ecba32db86f0617","name":"","group":"ef2301c8f15e8f4a","order":3,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","className":"","x":1290,"y":580,"wires":[]},{"id":"a2c5cb774e54d342","type":"change","z":"7ecba32db86f0617","name":"red-border","rules":[{"t":"set","p":"className","pt":"msg","to":"red-border","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":990,"y":500,"wires":[["17863e1bd2c477b3"]]},{"id":"c549ae52ecc81c9d","type":"inject","z":"7ecba32db86f0617","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"5","payloadType":"num","x":830,"y":500,"wires":[["a2c5cb774e54d342"]]},{"id":"c15144351af12644","type":"change","z":"7ecba32db86f0617","name":"red-border green-gauge-text","rules":[{"t":"set","p":"className","pt":"msg","to":"red-border green-gauge-text","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1040,"y":580,"wires":[["17863e1bd2c477b3"]]},{"id":"34f2b82dcae7934c","type":"change","z":"7ecba32db86f0617","name":"simple-border green-gauge-text","rules":[{"t":"set","p":"className","pt":"msg","to":"simple-border green-gauge-text","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1050,"y":660,"wires":[["17863e1bd2c477b3"]]},{"id":"685af3951f3f15c8","type":"change","z":"7ecba32db86f0617","name":"simple-border","rules":[{"t":"set","p":"className","pt":"msg","to":"simple-border","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1000,"y":620,"wires":[["17863e1bd2c477b3"]]},{"id":"24263e80a6458842","type":"change","z":"7ecba32db86f0617","name":"red-border red-gauge-text","rules":[{"t":"set","p":"className","pt":"msg","to":"red-border red-gauge-text","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1030,"y":540,"wires":[["17863e1bd2c477b3"]]},{"id":"fd6240e5fd474449","type":"inject","z":"7ecba32db86f0617","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"7","payloadType":"num","x":830,"y":540,"wires":[["24263e80a6458842"]]},{"id":"89bb34d8f4e3d33f","type":"inject","z":"7ecba32db86f0617","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"2","payloadType":"num","x":830,"y":580,"wires":[["c15144351af12644"]]},{"id":"53dfdf157e86478f","type":"inject","z":"7ecba32db86f0617","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"9","payloadType":"num","x":830,"y":660,"wires":[["34f2b82dcae7934c"]]},{"id":"49c5143d5813f089","type":"inject","z":"7ecba32db86f0617","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":830,"y":620,"wires":[["685af3951f3f15c8"]]},{"id":"ef2301c8f15e8f4a","type":"ui_group","name":"Carica Certificato Taratura","tab":"21286fd2ee7bdc0c","order":5,"disp":true,"width":"10","collapse":false,"className":""},{"id":"21286fd2ee7bdc0c","type":"ui_tab","name":"Inserimento Date Controllo","icon":"assignment","order":5,"disabled":false,"hidden":false}]

```

![chrome_e87PpkUGhJ](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/f/3f9b113a705c2a15e2d04b8107efa184544e323b.gif)

---

<div class="post-metadata">

**Author:** ![HuOliveiraWork](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/huoliveirawork/32/62521_2.png) [@HuOliveiraWork](https://discourse.nodered.org/u/HuOliveiraWork)\
**Post date:** [2 June 2022 13:18 UTC](https://discourse.nodered.org/t/my-template-nodes-are-ignoring-my-relations/63385/5 "2022-06-02T13:18:29Z")

</div>

This was exactly what I needed. Thanks a lot for the help!

---

<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:** [16 June 2022 13:19 UTC](https://discourse.nodered.org/t/my-template-nodes-are-ignoring-my-relations/63385/6 "2022-06-16T13:19:24Z")

</div>

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