[BONUS] Le code CSS de mon Dashboard personnalisé

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é.

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.

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

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

5 Likes

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!

2 Likes

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!

Merci becoup! C’est magnifique!

1 Like

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 :wink:

1 Like