# How to apply style(css) to dashboard item when a message arrives
**URL:** https://discourse.nodered.org/t/how-to-apply-style-css-to-dashboard-item-when-a-message-arrives/37566
**Category:** Dashboard
**Created:** [16 December 2020 10:04 UTC](https://discourse.nodered.org/t/how-to-apply-style-css-to-dashboard-item-when-a-message-arrives/37566 "2020-12-16T10:04:18Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@Mirco\_H](https://discourse.nodered.org/u/Mirco_H)
#### Post date: [16 December 2020 10:04 UTC](https://discourse.nodered.org/t/how-to-apply-style-css-to-dashboard-item-when-a-message-arrives/37566/1 "2020-12-16T10:04:18Z")
Hey i have the same Problem like @kiran,
I would like to create a Dashboard with ui\_text Node.
This Dashboard is Displayed for End Customer, when they say for Example "Hello",
The Voice2Json should trigger a Message and send it at the ui\_text node.
My first Question is: When this Message Arrive, is it possible to use a Fade in everytime it gets an new message?
And is there a Solution to use Google Fonts for this Text.
I know how to Style CSS, but where do i put my Styles or is it possible to modify the main css from the Dashboard.
Thanks in Advance
Mirco
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [16 December 2020 10:30 UTC](https://discourse.nodered.org/t/how-to-apply-style-css-to-dashboard-item-when-a-message-arrives/37566/2 "2020-12-16T10:30:52Z")
While you can style the ui\_text by using ui\_template node to add a style to the head section of the page it would probably be easier to do it all in a ui\_template node as that way you can create your own div with an id that you can style uniquely. You can apply google fonts if you wish but would require internet access to do so... (not that Google ever goes down these days does it 😉
---
### Author:  [@Mirco\_H](https://discourse.nodered.org/u/Mirco_H)
#### Post date: [16 December 2020 11:00 UTC](https://discourse.nodered.org/t/how-to-apply-style-css-to-dashboard-item-when-a-message-arrives/37566/3 "2020-12-16T11:00:41Z")
Hey,
thanks for your fast reply.
I tried it out and this is my actual Flow.
```auto
[{"id":"b5438fd1.b1fd8","type":"tab","label":"Dashboard2","disabled":false,"info":""},{"id":"8eed9b00.06cce8","type":"inject","z":"b5438fd1.b1fd8","name":"Message","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"Welcome","payload":"Hello Customer!","payloadType":"str","x":290,"y":200,"wires":[["b8376880.31ae48"]]},{"id":"b8376880.31ae48","type":"ui_template","z":"b5438fd1.b1fd8","group":"e0fdbf51.c76bb","name":"","order":4,"width":0,"height":0,"format":"\n\n \n \n \n \n \n \n \n \n \n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":580,"y":320,"wires":[[]]},{"id":"2c3541f0.cf088e","type":"inject","z":"b5438fd1.b1fd8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"3","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":300,"y":340,"wires":[["b8376880.31ae48"]]},{"id":"e0fdbf51.c76bb","type":"ui_group","name":"Standard","tab":"c3455fe5.78f72","order":1,"disp":false,"width":"20","collapse":false},{"id":"c3455fe5.78f72","type":"ui_tab","name":"Dashboard Gruppe","icon":"dashboard","disabled":false,"hidden":false}]
```
I used the timestamp with intervall, so i can see if it Fade in every time if a new message arrive. It just does it when the Dashboard initialize. Anyone a soltution?
Thanks in Advance
Mirco
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [15 January 2021 11:00 UTC](https://discourse.nodered.org/t/how-to-apply-style-css-to-dashboard-item-when-a-message-arrives/37566/4 "2021-01-15T11:00:48Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.