# \[BONUS\] Le code CSS de mon Dashboard personnalisé

**URL:** <https://community.homey.app/t/bonus-le-code-css-de-mon-dashboard-personnalise/31679>\
**Category:** Questions & Aide\
**Created:** [June 26, 2020, 6:52am UTC](https://community.homey.app/t/bonus-le-code-css-de-mon-dashboard-personnalise/31679 "2020-06-26T06:52:21Z")\
**Posts on this page:** 6\
**Page:** 1

<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, 6:52am UTC](https://community.homey.app/t/bonus-le-code-css-de-mon-dashboard-personnalise/31679/1 "2020-06-26T06:52:21Z")

</div>

Voici le CSS que j’ai créé pour personnaliser le thème d’origine. Vous pouvez vous en servir de base pour créer votre propre style et l’arranger selon vos besoins.

L’idée générale est de ré-écrire par-dessus les définitions du thème « Dark » pour les modifier afin d’obtenir un nouveau design.

**Voilà mon Dashboard SANS le thème personnalisé.**

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

Comme vous pouvez le voir, vous devez avoir sélectionné le thème « Dark », j’ai juste changé dans les options, la couleur de base verte, pour un bleu. Mais sinon, c’est le thème par défaut.

**Une fois mon CSS ajouté à Node-Red, vous obtiendrez ce résultat.**

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

## Le code CSS à importer

```
[{"id":"e1c5083f.a493","type":"ui_template","z":"3cc26405.22959c","group":"a94e32e9.1b90d8","name":"Node-Red Dashboard Custom CSS","order":1,"width":0,"height":0,"format":"<style>\n/* ------------------------------------ */\n/* MODIFICATIONS du THÈME DARK NODE-RED */\n/* ------------------------------------ */\n\n/* ----------------------------- */\n/* On évite les clics non voulus */\n/* ----------------------------- */\nroot, a, button, p, div {\n -webkit-user-select: none !important;\n}\n\n/* --------------------- */\n/* Dégradé du BACKGROUND */\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\n\n/* ------------------------------------- */\n/* Modification du background par DÉFAUT */\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/* -------------------- */\n/* ARRONDIS des GROUPES */\n/* -------------------- */\n#Homey_Dashboard_Navigation {\n background-color: transparent !important;\n border-radius: 10px !important;\n}\n\n/* -------------------------- */\n/* PERSONNALISATIONS diverses */\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\n/* -------------------------------------------- */\n/* FIN DES MODIFICATIONS du THÈME DARK NODE-RED */\n/* -------------------------------------------- */\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":280,"y":140,"wires":[[]]},{"id":"a94e32e9.1b90d8","type":"ui_group","z":"","name":"Heure","tab":"44ba48a4.5380b","order":1,"disp":false,"width":"6","collapse":false},{"id":"44ba48a4.5380b","type":"ui_tab","z":"","name":"Homey Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

Pour faire cela, importez mon flow dans Node-Red, commencez par copier (CTRL+C) le code fourni, puis dans le menu, vous avez une option **Import** , coller (CTRL+V) le bout de code précédemment copié. Vous allez obtenir un nouveau node template dans votre éditeur, c’est dans ce node que le nouveau CSS est écrit. Faites un « Deploy » pour voir le résultat.

La disposition de l’écran est la même qu’avec le thème par défaut, si vous aviez déjà un Dashboard qui fonctionnait, rien ne devrait être « cassé », vous avez juste un nouveau design.  
Comme vous pouvez le voir, tous les textes ont la taille et le style par défaut. Si vous voulez pousser plus loin la personnalisation, pour pouvez créer un second node « template », pour y rajouter d’autres définitions. Mais dans ce cas, vous devez adapter le CSS selon vos besoins.  
Cette personnalisation supplémentaire dépend de votre taille d’affichage, du modèle de tablette, du navigateur et du nom des CSS que vous allez rajouter, et mes petites modifications ne fonctionneront pas pour vous.

**Le DashBoard avec les petites modifications supplémentaires**

 ![03 - Dashboard Custom CSS](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/8/2/828af22a12fe6314dcadf03bc21d2efd6c02afda.jpeg)

Pour ajouter vous-même un nouveau style, il suffit de créer votre propre CSS.  
Par exemple, pour la partie « Heure » ajoutez une nouvelle définition comme ça :  
`<div class="show-time" ng-bind-html="msg.payload"></div>`

Ici, un nouveau style `show-time` vient d’être créé, avec `class="show-time"`.

Ajoutez ce nouveau code dans votre template qui contient le CSS :  
`.show-time { font-size: 64px; font-weight: 800; color: #FFFFFF; }`  
Ce code change la taille de la police et la couleur pour l’heure.  
Faites de même pour changer ce que vous voulez à l’écran, ajoutez une nouvelle définition, puis ajoutez votre bout de code CSS.

**Voilà, c’est enfin terminé, c’est à vous de jouer !**  
Merci à tous.  
Éric

---

<div class="post-metadata">

**Author:** ![rkokkelk](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rkokkelk/32/26853_2.png) [@rkokkelk](https://community.homey.app/u/rkokkelk)\
**Post date:** [June 26, 2020, 9:31am UTC](https://community.homey.app/t/bonus-le-code-css-de-mon-dashboard-personnalise/31679/2 "2020-06-26T09:31:21Z")

</div>

I have not used Google translate as much since I saw these tutorials. Great work and thanks for sharing the CSS. Currently working on my own node-red dashboard! Thanks!

---

<div class="post-metadata">

**Author:** ![rkokkelk](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rkokkelk/32/26853_2.png) [@rkokkelk](https://community.homey.app/u/rkokkelk)\
**Post date:** [June 27, 2020, 8:27am UTC](https://community.homey.app/t/bonus-le-code-css-de-mon-dashboard-personnalise/31679/3 "2020-06-27T08:27:57Z")

</div>

Hi, thanks again for your great work. I’m trying to replicate how you implemented your buttons, but I can’t seem to replicate it exactly.

Could you share your flows on setting the buttons and how you manage to change colors, etc. Thanks!

---

<div class="post-metadata">

**Author:** ![VanGilles](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/vangilles/32/11478_2.png) [@VanGilles](https://community.homey.app/u/VanGilles)\
**Post date:** [June 27, 2020, 8:09pm UTC](https://community.homey.app/t/bonus-le-code-css-de-mon-dashboard-personnalise/31679/4 "2020-06-27T20:09:02Z")

</div>

Merci becoup! C’est magnifique!

---

<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 28, 2020, 8:15am UTC](https://community.homey.app/t/bonus-le-code-css-de-mon-dashboard-personnalise/31679/5 "2020-06-28T08:15:18Z")

</div>

Hi @rkokkelk  
Je t’ai répondu en Anglais sur la partie “Anglaise” du forum, on essaye de ne pas mélanger les langues dans un même topic pour que chacun puisse suivre dans sa propre langue 😉

> [@Node Red: A widget based dashboard working with Homey trough MQTT](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/448):
>
> Hi @rkokkelk Could you share your flows on setting the buttons and how you manage to change colors, etc. Thanks! I’m using only a button template, just because you can change only the icon color with the switch template, with the button you have access to the background color. The trick for keeping the state of of your object is using a boolean variable and store it. My flow for the button template slightly_smiling_face [{"id":"bf6f5dba.1e48f8","type":"ui\_button","z":"d6f…

---

<div class="post-metadata">

**Author:** ![Clouet\_Dominique](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/clouet_dominique/32/125427_2.png) [@Clouet\_Dominique](https://community.homey.app/u/Clouet_Dominique)\
**Post date:** [February 15, 2025, 6:51pm UTC](https://community.homey.app/t/bonus-le-code-css-de-mon-dashboard-personnalise/31679/6 "2025-02-15T18:51:30Z")

</div>

Hello.  
I started using home assistant a little while ago and i saw your dashboard.  
I can’t understand how you manage to display the time, date and weather at the top of the dasboard.  
what node are you using?  
THANKS.