# Node Red: A widget based dashboard working with Homey trough MQTT

**URL:** <https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798>\
**Category:** Apps\
**Created:** [October 3, 2019, 10:05am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798 "2019-10-03T10:05:10Z")\
**Posts on this page:** 1\
**Showing post:** 443

<div class="post-metadata">

**Author:** ![DeepBlueNine](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/deepbluenine/32/18637_2.png) [@DeepBlueNine](https://community.homey.app/u/DeepBlueNine)\
**Post date:** [June 26, 2020, 7:12am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/443 "2020-06-26T07:12:08Z")

</div>

Here it is, my custom CSS for my Node-Red DashBoard.  
Whitout the CSS, it’s look like this.

 ![01 - Dashboard Base](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/c/3/c3ec003184d8c02b77e1aff9fa3593f0324e04fc.png)

Just copy and import it in Node-Red and you get this.

 ![02 - DashBoard Node-Red modifications](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/3/4/346597e847e31a8727dcf6ef57618d9c4f0f5d6f.jpeg)

**The CSS code.**

```
[{"id":"d81aa8bc.35b81","type":"ui_template","z":"d6fa9f2d.3d501","group":"339d0edc.4ffe02","name":"Node-Red Dashboard Custom CSS","order":1,"width":0,"height":0,"format":"<style>\nroot, a, button, p, div {\n -webkit-user-select: none !important;\n}\n\nbody {\n background: -webkit-linear-gradient(\n 55deg,\n #009785 0%,\n #245aa5 50%,\n #b800e9 100%\n );\n -webkit-touch-callout: none !important;\n}\n\nbody.nr-dashboard-theme md-toolbar,\nbody.nr-dashboard-theme md-content md-card {\n background-color: transparent !important;\n color: #FFFFFF;\n}\n\nui-card-panel {\n background-color: rgba(255,255,255,0.1) !important;\n border-radius: 10px !important;\n}\n \n#Homey_Dashboard_Navigation {\n background-color: transparent !important;\n border-radius: 10px !important;\n}\n\n.md-card.md-default-theme, md-card {\n border-radius: 10px;\n}\n\n.nr-dashboard-switch.ng-scope {\n background-color: rgba(255,255,255,.2) !important;\n}\n\n.nr-dashboard-switch.ng-scope:hover {\n background-color: rgba(255,255,255,.5) !important;\n}\n\n.nr-dashboard-theme .nr-dashboard-button .md-button {\n background-color: rgba(255,255,255,.2);\n}\n\n.md-button {\n border-radius: 10px;\n}\n\n.nr-dashboard-cardpanel layout-column {\n background-color: rgba(255,255,255,0.2) !important;\n background-color: transparent !important;\n border-radius: 10px !important;\n}\n\n.nr-dashboard-theme ui-card-panel {\n border: none;\n}\n\n.nr-dashboard-template {\n overflow-y: visible;\n}\n.nr-dashboard-theme md-content md-card {\n background-color: transparent !important;\n}\n\n.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {\n color: rgba(255, 255, 255, 0.5);\n}\n</style>\n\n<script>\ndocument.ontouchmove = function (e) {\n e.preventDefault();\n}\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","x":420,"y":160,"wires":[[]]},{"id":"339d0edc.4ffe02","type":"ui_group","z":"","name":"Heure","tab":"a2490d0e.a872b","order":1,"disp":false,"width":"6","collapse":false},{"id":"a2490d0e.a872b","type":"ui_tab","z":"","name":"Homey Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

**With some modifications, you have the final Dashboard.**

 ![03 - Dashboard Custom CSS](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/c/1/c17d132f495c3346fdd0f315ca1fe74614a96fb2.png)

---

_[View the full topic](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798)._