Réduire la taille de la police d'écriture et d'une carte entité

Entraide Home Assistant
1

Bonjour,
Alors voilà: j’essaye d’améliorer continuellement l’esthétique de mes cartes, entre autres pour que ça donne bien sur mon kiosque.
J’ai 2 entités qui affichent des infos que je souhaite garder, même si ce ne sont pas des infos principales, mais c’est écrit beaucoup trop grand et la carte entité est trop grande.
J’ai essayé d’utiliser d’autres cartes (Mushroom entre autres) mais bizarrement, je ne reçois pas l’heure précise affichée avec les mêmes entités et les mêmes attributs, je reçois le nombre d’heures endéans lequel aura lieu le prochain lever et le prochain coucher du soleil. Mais je souhaite l’heure comme sur les cartes actuelles, mais en plus petit.

Savez-vous comment je peux faire pour réduire la taille générale ?

Merci et bonne soirée,

image

type: entity
entity: sun.sun
name: Rising
icon: mdi:weather-sunset-up
state_color: true
attribute: next_rising

type: entity
entity: sun.sun
name: Setting
icon: mdi:weather-sunset-down
attribute: next_setting
state_color: true

Ma configuration

[center]## System Information

version core-2024.5.3
installation_type Home Assistant OS
dev false
hassio true
docker true
user root
virtualenv false
python_version 3.12.2
os_name Linux
os_version 6.6.28-haos-raspi
arch aarch64
timezone Europe/Brussels
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
GitHub API Calls Remaining 5000
Installed Version 1.34.0
Stage running
Available Repositories 1392
Downloaded Repositories 36
Home Assistant Cloud
logged_in true
subscription_expiration 28 avril 2025 à 02:00
relayer_connected true
relayer_region eu-central-1
remote_enabled true
remote_connected true
alexa_enabled false
google_enabled true
remote_server eu-central-1-19.ui.nabu.casa
certificate_status ready
instance_id f0fd017040d14711b17f54352dde68e6
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 12.3
update_channel stable
supervisor_version supervisor-2024.05.1
agent_version 1.6.0
docker_version 25.0.5
disk_total 116.6 GB
disk_used 19.6 GB
healthy true
supported true
board rpi5-64
supervisor_api ok
version_api ok
installed_addons Terminal & SSH (9.14.0), File editor (5.8.0), Samba share (12.3.1), Home Assistant Google Drive Backup (0.112.1), Studio Code Server (5.15.0), Spotify Connect (0.13.0), OpenThread Border Router (2.6.0), Matter Server (5.6.0), Mosquitto broker (6.4.0), Frigate (0.13.2)
Dashboards
dashboards 2
resources 36
views 6
mode storage
Recorder
oldest_recorder_run 5 mai 2024 à 07:09
current_recorder_run 15 mai 2024 à 15:18
estimated_db_size 497.13 MiB
database_engine sqlite
database_version 3.44.2
Spotify
api_endpoint_reachable ok
[/center] Comment récupérer ma configuration : Dans votre HA, Menu latéral `Paramètres` > `Système` > `Corrections` puis les trois petits points en haut a droite > `Informations Système` puis une fois en bas `Copier` ___
2

custom:button-card : c’est la solution ultime :grin:

2 « J'aime »
3

Bonjour,
avec card_mod.

image

type: entity
entity: sensor.cleargrass_1_co2
card_mod:
  style: |
    .info .value {
      color: blue;
      font-size: 8px;
    }
    .info .measurement {
      color: orange;
      font-size: 30px;
    }
1 « J'aime »
4

Merci pour vos réponses !
C’est toujours les mêmes qui répondent sur la programmation des cartes :sweat_smile:
Je vais regarder cela, j’ai prévu du temps, mais je ne suis pas une flèche en programmation :partying_face:

5

En même temps, en 1h, ça laisse pas beaucoup de marge pour les autres (qui travaillent) :upside_down_face:

(je rigole)

1 « J'aime »
6

bon, je vais essayer card mod cette fois… @WarC0zes :smiley:

J’ai mis mes entités:

J’ai remplacé l’icone, j’ai mis un titre différent, j’ai ajouté l’attribut, j’ai vu que cela passait…
Par contre, je dois mettre quoi dans le style pour rendre l’écriture plus petite ?
Et aussi éventuellement réduire la taille du conteneur en proportion du coup…

type: entity
entity: sun.sun
attribute: next_rising
name: Rsing
icon: mdi:weather-sunset-up
card_mod:
  style: |
    .info .next_rising {
      color: blue;
      font-size: 4px;
    }
    .info .measurement {
      color: orange;
      font-size: 20px;
    }

image

7

image
image977×562 27.4 KB

type: entity
entity: sun.sun
attribute: next_rising
name: Rsing
icon: mdi:weather-sunset-up
card_mod:
  style: |
    .value {
      color: blue !important;
      font-size: 14px !important;
    }
8

tu parle de la taille de la carte ?

9

merciiii !
oui, tout-à-fait, la taille de la carte (j’ai pas utilisé le bon terme)

C’est bizarre, les pixels ne réduisent pas la police chez moi. J’ai bien mis la même chose que toi pourtant :

image
image1132×624 33.9 KB

10

Ta bien card_mod installer dans HACS ?

11

image
image978×631 28.9 KB

type: entity
entity: sun.sun
attribute: next_rising
name: Rsing
icon: mdi:weather-sunset-up
card_mod:
  style: |
    .value {
      color: blue !important;
      font-size: 14px !important;
    }
    ha-card {
      width: 200px;
    }
12

ah non ! Le boulet ! :woozy_face: Je viens de l’installer…
ça fonctionne !
Reste juste à réduire la taille de la carte, c’est possible avec une instruction card mod ?

image
image1101×571 30.5 KB

Si oui, reprends ton code si tu veux bien et je mettrai la solus sur le code complet , c’est plus facile pour les suivants :smiley:

Merciiiii beaucoup @WarC0zes !! Et bonne soirée

13

Et pour réduire la hauteur, c’est possible aussi ? J’ai essayé en mettant height en dessous de width mais ça ne prend pas…

Voilà ce que j’ai fait grâce au code de @WarC0zes
J’ai simplement utilisé un horizontal stack pour gagner de la place + ajouté un alignement centré grâce à notre ami Gemini (mais ce dernier ne génère pas encore bien des codes complets, je trouve, on a encore besoin d’experts)

image

type: horizontal-stack
cards:
  - type: entity
    entity: sun.sun
    attribute: next_rising
    name: Rising
    icon: mdi:weather-sunset-up
    state_color: true
    card_mod:
      style: |
        .value {
          color: white !important;
          font-size: 18px !important;
        }
        ha-card {
          width: 243px;
        }
  - type: entity
    entity: sun.sun
    attribute: next_setting
    name: Setting
    icon: mdi:weather-sunset-down
    state_color: true
    card_mod:
      style: |
        .value {
          color: white !important;
          font-size: 18px !important;
        }
        ha-card {
          width: 243px;
        }
card_mod:
  style: |
    .horizontal-stack {
      justify-content: center;  /* Center alignment */
    }
14

Ahah ! j’avais essayer , mais comme tu dit ca fonctionne pas, même en forcant avec !important

15

C’est pas grave, comme tu m’as expliqué comment réduire la largeur, on ne gagnerait pas beaucoup (à moins d’écrire tout petit mais alors ce ne serait pas lisible). Un horizontal stack fait parfaitement l’affaire :slight_smile:

1 « J'aime »
16

Bonjour,
En css tu as les instructions :

max-width: 150px;
min-width: 150px;

Idem pour height.
Ajouter !important en fin de ligne avant le ; éventuellement pour forcer.

Bob

2 « J'aime »
17

Bonjour @Bob ,
Merci, ça fonctionne parfaitement, je viens de tester :slightly_smiling_face:

Par contre, tu sais comment on peut faire pour que l’affichage soit « responsive », c’est-à-dire qu’il s’adapte en fonction de l’écran sur lequel il est affiché.
Car si je le règle bien pour le kiosque, il ne s’affiche pas forcément correctement sur GSM (superposition des cartes car l’écran est plus petit).
Je n’ai pas le problème avec les autres cartes, juste ici.

image

type: horizontal-stack
cards:
  - type: entity
    entity: sun.sun
    attribute: next_rising
    name: Rising
    icon: mdi:weather-sunset-up
    state_color: true
    card_mod:
      style: |
        .value {
          color: white !important;
          font-size: 14px !important;
        }
        ha-card {
          max-width: 210px !important;
          max-height: 80px !important;
        }
  - type: entity
    entity: sun.sun
    attribute: next_setting
    name: Setting
    icon: mdi:weather-sunset-down
    state_color: true
    card_mod:
      style: |
        .value {
          color: white !important;
          font-size: 14px !important;
        }
        ha-card {
          max-width: 210px !important;
          max-height: 80px !important;
        }

Bonne journée,

18

Bonjour,
Je me réponds à moi-même.
J’ai constaté que si on ne définit que la hauteur max-height, les cartes seront responsive.
Par contre, si on définit aussi un paramètre de largeur, elles ne s’adapteront pas en fonction des écrans.
C’est donc uniquement la hauteur qu’il faut définir, pas la largeur, et ça se met bien partout avec une hauteur réduite :slightly_smiling_face:
Bonne journée,

2 « J'aime »
19

Bonjour,
J’ai du mal avec les loveleace. J’ai repris le dernier code cité dans ce sujet qui me donne cela
image
Pour tester je cherche à modifier la couleur du texte ou réduire la hauteur ou la largeur des cartes, rien ne change hors mis le nom. je ne comprends pas pourquoi. Un petit coup de main svp, merci

20

Bonjour,

Copier du code ne sert pas à grand chose si tu n’as pas installé card_mod…

1 « J'aime »