# Can i change a css class dynamically **URL:** \ **Category:** Dashboard\ **Tags:** node-red-dashboard\ **Created:** [30 May 2024 09:06 UTC](https://discourse.nodered.org/t/can-i-change-a-css-class-dynamically/88375 "2024-05-30T09:06:55Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![Freshtronic](https://avatars.discourse-cdn.com/v4/letter/f/46a35a/32.png) [@Freshtronic](https://discourse.nodered.org/u/Freshtronic)\ **Post date:** [30 May 2024 09:06 UTC](https://discourse.nodered.org/t/can-i-change-a-css-class-dynamically/88375/1 "2024-05-30T09:06:55Z")
Hi, I would change a class in the ui template node dynamically? Is that somehow possible? I tried it with several options. but i can't get the solution. I'm not firm with HTML. to my data input, I have 15 inputs with "item-gridPass", "item-gridFail" and 15 corresponding qr codes. My 15 item grids "should" change the class and the QR-codes shoult displayed in the grid (easy thing) My Payload for example for the first input of 15 ```auto PCB1: object status: "item-gridFail" qrcontent: "QR-Code not detected" ``` My code: ```auto
{{PCB1.qrcontent}}
2
3
4
5
1
2
3
4
5
1
2
3
4
5
``` I hope you can help me with my Problem best regards Freshtronic ---
**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\ **Post date:** [30 May 2024 09:42 UTC](https://discourse.nodered.org/t/can-i-change-a-css-class-dynamically/88375/2 "2024-05-30T09:42:02Z")
First it is unclear what node you are using, But in the template node `` , `` and `` tags are not required as they are already added to the page by the dashboard. As to setting css class for nodes you can send the class name you wish to use using `msg.className` with the class name as the value. Maybe supply a simple example flow of what you are attempting, this may make things clearer to understand. ---
**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\ **Post date:** [30 May 2024 10:07 UTC](https://discourse.nodered.org/t/can-i-change-a-css-class-dynamically/88375/3 "2024-05-30T10:07:07Z")
Hello @Freshtronic and welcome to the forum. I always put my CSS in a separate ui-template ```auto ``` Are you passing msg.PCB1 or msg.payload.PCB1? The ui\_template does not understand mustache syntax so you need to build your HTML in a standard template and pass it to ui\_template as msg.template. An example: ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/2/82af912b8e3e3bf721279d0e7f50ac24ab766e4e.png) ```auto [{"id":"73aa09230ed9400d","type":"ui_template","z":"b946eb07.fa1b98","group":"db338ac57739c80e","name":"","order":5,"width":0,"height":0,"format":"
\n
{{PCB1.qrcontent}}
\n
2
\n
3
\n
4
\n
5
\n
","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":460,"y":180,"wires":[[]]},{"id":"680d2994deef7d29","type":"inject","z":"b946eb07.fa1b98","name":"","props":[{"p":"PCB1","v":"{\"status\":\"grid-ItemFail\",\"qrcontent\":\"qr here\"}","vt":"json"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":150,"y":180,"wires":[["066d9c2ccb7e4180"]]},{"id":"066d9c2ccb7e4180","type":"template","z":"b946eb07.fa1b98","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"
\n
{{PCB1.qrcontent}}
\n
2
\n
3
\n
4
\n
5
\n
","output":"str","x":300,"y":180,"wires":[["73aa09230ed9400d"]]},{"id":"e5b3a6c0a534673a","type":"ui_template","z":"b946eb07.fa1b98","group":"d6cd152bba56e445","name":"CSS","order":5,"width":0,"height":0,"format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":450,"y":140,"wires":[[]]},{"id":"db338ac57739c80e","type":"ui_group","name":"Default","tab":"8faf8dbf8c8fc6ca","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"d6cd152bba56e445","type":"ui_group","name":"Memory","tab":"2dde50a55cca44db","order":1,"disp":true,"width":"10","collapse":false,"className":""},{"id":"8faf8dbf8c8fc6ca","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false},{"id":"2dde50a55cca44db","type":"ui_tab","name":"Barnt Green","icon":"dashboard","order":1,"disabled":false,"hidden":false}] ``` ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/d/dda5f61ebe8d8bde4c3f74f9c9cdb2a9536358b2.png) I think that passing msg.className is not appropriate in this instance because the template has some components with class Pass and some with class Fail ---
**Author:** ![Freshtronic](https://avatars.discourse-cdn.com/v4/letter/f/46a35a/32.png) [@Freshtronic](https://discourse.nodered.org/u/Freshtronic)\ **Post date:** [30 May 2024 10:34 UTC](https://discourse.nodered.org/t/can-i-change-a-css-class-dynamically/88375/4 "2024-05-30T10:34:56Z")
Hi, thank you for your fast possible solution. I changed my payload to msg.PCB1. and that´s my payload. sorry it's in german ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/4/c47db425c6ef8ccb30c43d4720e51d3ada545cb4.png) ohh okay the template node has the option to make a head and there then i can put the css class and the other one is for the body. thank you thank you very much for your solution ---
**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\ **Post date:** [13 June 2024 10:35 UTC](https://discourse.nodered.org/t/can-i-change-a-css-class-dynamically/88375/5 "2024-06-13T10:35:33Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.