# Skiner finement Home-Assistant

**URL:** <https://forum.hacf.fr/t/skiner-finement-home-assistant/24236>\
**Category:** Entraide Home Assistant\
**Tags:** interface-dashboard, card-mod, mini-graph-card, button-card, tableau-de-bord-dashboard, interface-lovelace\
**Created:** [Mai 25, 2023, 5:16 UTC](https://forum.hacf.fr/t/skiner-finement-home-assistant/24236 "2023-05-25T17:16:19Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Piregwan](https://forum.hacf.fr/user_avatar/forum.hacf.fr/piregwan/32/109545_2.png) [@Piregwan](https://forum.hacf.fr/u/Piregwan)\
**Post date:** [Mai 25, 2023, 5:16 UTC](https://forum.hacf.fr/t/skiner-finement-home-assistant/24236/1 "2023-05-25T17:16:19Z")

</div>

Bonjour,

Je cherche à personnaliser l'interface graphique de Home-Assistant davantage qu'avec Card-mod.  
J'utilise pour le moment des graphes Apex et mini-graph, des icones (fontawesome, hue, simpleicons...), banner-card, battery-state, et surtout card-mod.

 ![image](https://forum.hacf.fr/uploads/default/original/3X/d/2/d25ea14e42efe12d5f35594b97f4110f66096778.jpeg)

 ![image](https://forum.hacf.fr/uploads/default/original/3X/9/f/9f55b5c39a0b3208034b30dd8710e21cc82f37f4.jpeg)

 ![image](https://forum.hacf.fr/uploads/default/original/3X/9/7/97137b665bc29a0fd9ce3eb1b9de5619c37c20dd.jpeg)

 ![image](https://forum.hacf.fr/uploads/default/original/3X/b/7/b776905c043fea3b4bdb3b0583005957b0761d53.jpeg)

Bon voilà, c'est pas folichon.

**Le problème c'est que l'interface s'adapte selon le client.** Les cards se mettent en colonne sur un smartphone, se compressent, changent de dimensions, les typos s'adaptent... Ca impose d'avoir des cards de couleurs unies (qui pourront s'étirer) ou à la rigueur avec des seamless patterns en fond

Existe-il une méthode pour faire en sorte que toutes les cards restent responsive et qu'on puisse en même temps les skinner finement, quelles que soient leurs dimensions ?

Pour avoir ce genre d'interface par exemple :

 ![image](https://forum.hacf.fr/uploads/default/original/3X/c/1/c1b65769b392025ce1ebc33583dc2c2c14fc169f.jpeg)

 ![image](https://forum.hacf.fr/uploads/default/original/3X/e/2/e25b1b11ab4e1e2b44a462f20628f65d4672581c.jpeg)

 ![image](https://forum.hacf.fr/uploads/default/original/3X/0/b/0b97dbf7b2374dc461842bd41bce18d52f15c7dc.jpeg)

Merci de vos retours

---

<div class="post-metadata">

**Author:** ![Piregwan](https://forum.hacf.fr/user_avatar/forum.hacf.fr/piregwan/32/109545_2.png) [@Piregwan](https://forum.hacf.fr/u/Piregwan)\
**Post date:** [Mai 26, 2023, 5:59 UTC](https://forum.hacf.fr/t/skiner-finement-home-assistant/24236/2 "2023-05-26T17:59:57Z")

</div>

![image](https://forum.hacf.fr/uploads/default/original/3X/6/a/6a0c58818c680fb21c1b1ef79a8936fda64bcdad.jpeg)

---

<div class="post-metadata">

**Author:** ![Pulpy-Luke](https://forum.hacf.fr/user_avatar/forum.hacf.fr/pulpy-luke/32/137426_2.png) [@Pulpy-Luke](https://forum.hacf.fr/u/Pulpy-Luke)\
**Post date:** [Mai 26, 2023, 6:02 UTC](https://forum.hacf.fr/t/skiner-finement-home-assistant/24236/3 "2023-05-26T18:02:51Z")

</div>

Salut

> [@Piregwan](#):
>
> Le problème c’est que l’interface s’adapte selon le client.

C'est le principe des interfaces responsives...

Tu peux essayer de te faire ton propre thème, mais à mon avis ça va être compliqué d'obtenir un résultat comme tes exemples

> **[Top 10 Home Assistant Lovelace Themes](https://smarthomescene.com/guides/top-10-home-assistant-lovelace-themes/)**
>
> Ranking The Best and Most Beautiful Home Assistant Themes for your Lovelace UI dashboard.

---

<div class="post-metadata">

**Author:** ![Piregwan](https://forum.hacf.fr/user_avatar/forum.hacf.fr/piregwan/32/109545_2.png) [@Piregwan](https://forum.hacf.fr/u/Piregwan)\
**Post date:** [Mai 27, 2023, 8:51 UTC](https://forum.hacf.fr/t/skiner-finement-home-assistant/24236/4 "2023-05-27T08:51:07Z")

</div>

Bonjour @Pulpy-Luke ,

Je me suis mal exprimé sur le responsive. Le problème étant qu'il n'y a qu'une seule balise (ha-card) et qu'on peut donc skinner en CSS au maximum 3 éléments :

- ha-card:before
- ha-card:
- ha-card:after

On peut éventuellement hacker quelques éléments comme les balises PRE et BLOCKQUOTE mais ca ira guère plus loin faute de balises. Voici un premier test :

 ![image](https://forum.hacf.fr/uploads/default/original/3X/b/e/be2d544d63f138dc8f1a5e2153c961a87a1e1326.jpeg)

---

<div class="post-metadata">

**Author:** ![Piregwan](https://forum.hacf.fr/user_avatar/forum.hacf.fr/piregwan/32/109545_2.png) [@Piregwan](https://forum.hacf.fr/u/Piregwan)\
**Post date:** [Mai 27, 2023, 11:45 UTC](https://forum.hacf.fr/t/skiner-finement-home-assistant/24236/5 "2023-05-27T11:45:55Z")

</div>

Techniquement c'est à peu près possible (avec bcp de bémols)  
Bon bien sûr, après il est recommandé d'avoir du gout pour un design sympa ce qui est pas du tout le cas (au secours !!! 🆘)

 ![screencapture-192-168-0-75-8123-bac-a-sable-skeuo-2-2023-05-27-13_41_31](https://forum.hacf.fr/uploads/default/original/3X/3/4/34a5712b2110fc007f2325b7f210a9eb50fb00c2.jpeg)

---

<div class="post-metadata">

**Author:** ![Pulpy-Luke](https://forum.hacf.fr/user_avatar/forum.hacf.fr/pulpy-luke/32/137426_2.png) [@Pulpy-Luke](https://forum.hacf.fr/u/Pulpy-Luke)\
**Post date:** [Mai 27, 2023, 12:46 UTC](https://forum.hacf.fr/t/skiner-finement-home-assistant/24236/6 "2023-05-27T12:46:05Z")

</div>

Perso j’ai des interface la carte picture élément, ça fait en partie le job. Sur téléphone c’est pas parfait mais au final on s’en sert peu

---

<div class="post-metadata">

**Author:** ![mrgrlscz](https://forum.hacf.fr/user_avatar/forum.hacf.fr/mrgrlscz/32/56240_2.png) [@mrgrlscz](https://forum.hacf.fr/u/mrgrlscz)\
**Post date:** [Juin 27, 2023, 10:17 UTC](https://forum.hacf.fr/t/skiner-finement-home-assistant/24236/7 "2023-06-27T22:17:36Z")

</div>

Salut!! Je suis très curieux d’apprendre à quoi servent ces pointeurs!?

> [@Piregwan](#):
>
> - ha-card:before
> - ha-card:
> - ha-card:after

---

<div class="post-metadata">

**Author:** ![Abel](https://forum.hacf.fr/user_avatar/forum.hacf.fr/abel/32/32093_2.png) [@Abel](https://forum.hacf.fr/u/Abel)\
**Post date:** [Juin 28, 2023, 12:14 UTC](https://forum.hacf.fr/t/skiner-finement-home-assistant/24236/8 "2023-06-28T00:14:00Z")

</div>

Bonjour,

Il y a moyen de figer un peu avec Grid, Vertical-Stack, Horizontal stack, d’utiliser des popups ( Je les utilise pour les graphes CPU, RAM et Temp car je n’ai pas besoin de les voir en continu) ou Layout Card

Voici une video qui montre comment réorganiser un dashboard en fonction de la largeur d’écran

[How To Change The Dashboard Width For A Mobile Device Using Layout Card](https://www.youtube.com/watch?v=XViU_-BmMTQ)

Cordialement,

Abel
