---
disqus: ahb0222
GA : G-VF9ZT413CG
---
# 修改遠端水質監測器Node-Red dashboard(儀錶板)背景與外觀
> [color=#40f1ef][name=LHB阿好伯, 2021/11/20][:earth_africa:](https://www.facebook.com/LHB0222/)
###### tags: `Node-RED`

[TOC]

之前分享過一版[LilyGo T-Call SIM 連接 MQTT & Node-Red & Telegram 製作遠端pH監測器(ESP32 SIM800L)_分享](/FlpNFLrxSpSbFl_CLTch-A)
最近完成新的一版遠端水質連續偵測器
上面除了原本的pH計這次還新增了TDS電極
使用Node-Red收集數據後當然就是製作儀表板


之前曾看到益師傅分享過才知道原來儀表板也可以在做美化
利用了一些時間找到下面的資料

>參考網頁
>[Changing background of any widget](https://discourse.nodered.org/t/changing-background-of-any-widget/30005)[name=kvramji]
>[Customize dashboard CSS](https://discourse.nodered.org/t/customize-dashboard-css/23139)[name=hotNipi]
>[View and change CSS](https://developer.chrome.com/docs/devtools/css/)[name=Kayce Basques]

研究一下最後製作出下面的成果
還有一些地方需要加強但這也是我第一次接觸CSS
能做到這樣也很滿足了XD

# 修改方法
匯入 [Changing background of any widget](https://discourse.nodered.org/t/changing-background-of-any-widget/30005)文章中網友分享的節點

:::spoiler

[{"id":"ec59b076.d8389","type":"ui_template","z":"6af0f382.7eae1c","group":"d7d53078.9580c","name":"Tab Stylesheet","order":1,"width":0,"height":0,"format":"<style>\n\n:root {\n  --color-green-primary: rgb(51, 204, 51);\n  --color-green-secondary: rgb(26, 101, 26);\n  --color-red-primary: rgb(255, 0, 0);\n  --color-red-secondary: rgba(153,0,0,1);\n  --color-gray-primary:rgba(40,40,40,1);\n  --color-gray-secondary:rgba(65,65,65,1);\n  --color-text-primary: rgb(230, 226, 209);\n  --color-widget-border: rgb(84, 78, 78);\n}\n\nbody {\n  background-image: url(https://images.hdqwalls.com/wallpapers/raspberry-pi-logo-h0.jpg);\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n#Control_Panel_System {\n  background: transparent;\n  border: transparent; \n}\n\nbody.nr-dashboard-theme md-content md-card {\n    background-color: #33333300;\n    color: #ffffff;\n    text-shadow: 4px 2px 4px #00000045;\n    box-shadow: 0 -1px 5px 1px #00000045;\n    border-radius: 12px;\n    border: 1px solid var(--color-widget-border);\n}\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":220,"y":80,"wires":[[]]},{"id":"d7d53078.9580c","type":"ui_group","z":"","name":"System","tab":"b0c27d05.c92f7","order":1,"disp":true,"width":30,"collapse":false},{"id":"b0c27d05.c92f7","type":"ui_tab","z":"","name":"Control Panel","icon":"fa-cogs","order":1,"disabled":false,"hidden":false}]

:::



就可以得到相關背景樣式的修改

如果想修改成自己的照片只需要修改第15行的網址即可

# 增加時間顯示


https://discourse.nodered.org/t/example-flow-of-three-clocks-in-title-bar-could-use-some-cleanup/44241

🌟全文可以至下方連結觀看或是補充

全文分享至

https://www.facebook.com/LHB0222/

https://www.instagram.com/ahb0222/

有疑問想討論的都歡迎於下方留言

喜歡的幫我分享給所有的朋友 \o/

有所錯誤歡迎指教

# [:page_with_curl: 全部文章列表](https://hackmd.io/@LHB-0222/AllWritings)