Taille Police Simple

Bonjour,

je commence à utiliser mushroom et car-mod. Après quelques recherche et des dizaines d’essais infructueux je viens demander votre aide.

Je voudrais simplement modifier la taille de police dans une horizontal-stack contenue dans une vertical-stack.

voici mon code brut :

type: vertical-stack
cards:
  - type: custom:text-divider-row
    text: Salle De Bain - Buanderie - Atelier
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.0xa4c138c05383e3f5_temperature
        primary_info: state
        secondary_info: none
        icon_color: amber
      - type: custom:mushroom-entity-card
        entity: sensor.cellier_buanderie_temperature_ambiante
        primary_info: state
        secondary_info: none
        icon_color: green
      - type: custom:mushroom-entity-card
        entity: sensor.0x00158d0005d25e0a_temperature
        primary_info: state
        secondary_info: none
        icon_color: black

C’est tout bête mais je bute… J’ai du mal avec tout ce qui est « styles: »

Merci d’avance !!

Ma configuration

System Information

version core-2024.7.2
installation_type Home Assistant OS
dev false
hassio true
docker true
user root
virtualenv false
python_version 3.12.4
os_name Linux
os_version 6.6.33-haos
arch x86_64
timezone Europe/Paris
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 1390
Downloaded Repositories 5
HACS Data ok
Home Assistant Cloud
logged_in false
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 12.4
update_channel stable
supervisor_version supervisor-2024.06.2
agent_version 1.6.0
docker_version 26.1.4
disk_total 30.8 GB
disk_used 4.3 GB
healthy true
supported true
host_connectivity true
supervisor_connectivity true
ntp_synchronized true
virtualization kvm
board ova
supervisor_api ok
version_api ok
installed_addons Mosquitto broker (6.4.1), File editor (5.8.0), Zigbee2MQTT (1.39.0-1), Terminal & SSH (9.14.0)
Dashboards
dashboards 3
resources 4
views 2
mode storage
Recorder
oldest_recorder_run 3 juillet 2024 à 12:31
current_recorder_run 11 juillet 2024 à 22:29
estimated_db_size 89.93 MiB
database_engine sqlite
database_version 3.45.3

Bonjour,
voila comment faire avec card_mod. Faut appliquer card_mod sur chaque carte mushroom entity.

type: vertical-stack
cards:
  - type: custom:text-divider-row
    text: Salle De Bain - Buanderie - Atelier
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.0xa4c138c05383e3f5_temperature
        primary_info: state
        secondary_info: none
        icon_color: amber
        card_mod:
          style:
            mushroom-state-info$: |
              .container {
                --card-primary-font-size: 28px;
              }

Tu as un sujet complet avec des exemples pour customiser les cartes mushroom avec card_mod:

Bonjour,

Merci pour ta réponse, j’avais bien vu le sujet mais je n’avais pas du comprendre…
Maintenant que j’ai la base de travail je vais pouvoir appliquer effectivement tout ce que je veux.

Merci à toi !

1 « J'aime »

Bonsoir à tous,

Je reviens vers vous car j’ai réussi à faire ce que je voulais mais il me reste un dernier problème : si je grossi trop l’état de mes capteur le texte semble « coupé » en haut et en bas. J’ai essayé de modifier la taille de carte, les marges, la position… Rien n’y fait. Suis-je trop gourmant sur la taille ou existe-il une solution ?

Capture

type: vertical-stack
cards:
  - type: custom:text-divider-row
    text: Salon
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.0xa4c13809ede45146_temperature
        primary_info: state
        secondary_info: none
        icon_color: null
        card_mod:
          style:
            mushroom-state-info$: |
              .container {
                --card-primary-font-size: 30px;
                --card-primary-font-weight: 800;
              }
            mushroom-shape-icon$: |
              .shape {
              --icon-symbol-size: 50px;
              --icon-size: 10px;
              }
            style: |
              ha-card {
                height: 60px !important;
                width: 200px;
                padding-right: 0px !important;
                padding-left: 20px !important;
                padding-bottom: 0px !important;
                padding-top: 0px !important;
                margin-top : -10px !important;
              }
      - type: custom:mushroom-entity-card
        entity: sensor.0xa4c13809ede45146_humidity
        primary_info: state
        secondary_info: none
        layout: horizontal
        fill_container: true
        card_mod:
          style:
            mushroom-state-info$: |
              .container {
                --card-primary-font-size: 30px;
                --card-primary-font-weight: 800;
              }
            mushroom-shape-icon$: |
              .shape {
              --icon-symbol-size: 50px;
              --icon-size: 10px;
              }
            style: |
              ha-card {
                height: 60px !important;
                width: 200px;
                padding-right: 0px !important;
                padding-left: 20px !important;
                padding-bottom: 0px !important;
                padding-top: 0px !important;
                margin-top : -10px !important;
              }

Merci d’avance !!