Custom flower card et card mod: impossible de changer une marge

BBE · Janvier 11, 2023, 5:01

Mon problème

Bonjour à tous et merci d’avance!

J’ai installé une carte Custom flower card et je ne parviens pas à la modifier comme je souhaiterai avec card-mod:

La carte par defaut est comme ceci:

Afin de conserver au minimum l’homogeneité avec mes cartes mushroom, j’ai tenté de réduire l’image, et avec le code suivant, je suis parvenu à ça:

type: vertical-stack
cards:
  - type: custom:mod-card
    style:
      .: |
        :host {
          --text-divider-color: var(--primary-color);
          --text-divider-line-size: 2px;
        }
    card:
      type: custom:text-divider-row
      text: Salon & RdC
      align: left
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:arrow-right
        icon_color: grey
        content: détails
        tap_action:
          action: navigate
          navigation_path: /lovelace-smartphone/salon
        hold_action:
          action: navigate
          navigation_path: /lovelace-smartphone/salon
      - type: template
        entity: sensor.echo_jeanne_temperature
        icon: |-
          {% if states('sensor.echo_jeanne_temperature')|float < 17 %} 
           mdi:thermometer-alert
          {% elif states('sensor.echo_jeanne_temperature')|float > 25 %} 
           mdi:thermometer-alert
          {% else %}
          mdi:thermometer
          {% endif %}
        content: '{{ states(''sensor.echo_jeanne_temperature'')}} °C '
        icon_color: |-
          {% if states('sensor.echo_jeanne_temperature')|float < 17 %} 
           light-blue
          {% elif states('sensor.echo_jeanne_temperature')|float > 25 %} 
           orange
          {% else %}
          green
          {% endif %}
        double_tap_action:
          action: navigate
          navigation_path: /lovelace-smartphone/temperatures
        tap_action:
          action: navigate
          navigation_path: /lovelace-smartphone/temperatures
        hold_action:
          action: more-info
      - type: template
        entity: sensor.echo_dot_cuisine_temperature
        icon: |-
          {% if states('sensor.echo_dot_cuisine_temperature')|float < 17 %} 
           mdi:thermometer-alert
          {% elif states('sensor.echo_dot_cuisine_temperature')|float > 25 %} 
           mdi:thermometer-alert
          {% else %}
          mdi:thermometer
          {% endif %}
        content: '{{ states(''sensor.echo_dot_cuisine_temperature'')}} °C '
        icon_color: |-
          {% if states('sensor.echo_dot_cuisine_temperature')|float < 17 %} 
           light-blue
          {% elif states('sensor.echo_dot_cuisine_temperature')|float > 25 %} 
           orange
          {% else %}
          green
          {% endif %}
        double_tap_action:
          action: navigate
          navigation_path: /lovelace-smartphone/temperatures
        tap_action:
          action: navigate
          navigation_path: /lovelace-smartphone/temperatures
        hold_action:
          action: more-info
      - type: template
        entity: binary_sensor.echo_salon_mouvement
        icon: |-
          {% if is_state('binary_sensor.echo_salon_mouvement', 'on') %} 
           mdi:motion-sensor
          {% elif is_state('binary_sensor.echo_salon_mouvement', 'off') %} 
           mdi:motion-sensor-off
          {% else %}
          mdi:chat-question
          {% endif %}
        icon_color: |-
          {% if is_state('binary_sensor.echo_salon_mouvement', 'on') %} 
           red
          {% elif is_state('binary_sensor.echo_salon_mouvement', 'off') %} 
           green
          {% else %}
           orange
          {% endif %}
        double_tap_action:
          action: navigate
          navigation_path: /lovelace-smartphone/securite
        tap_action:
          action: navigate
          navigation_path: /lovelace-smartphone/securite
        hold_action:
          action: more-info
      - type: template
        entity: binary_sensor.echo_cuisine_mouvement
        icon: |-
          {% if is_state('binary_sensor.echo_cuisine_mouvement', 'on') %} 
           mdi:motion-sensor
          {% elif is_state('binary_sensor.echo_cuisine_mouvement', 'off') %} 
           mdi:motion-sensor-off
          {% else %}
          mdi:chat-question
          {% endif %}
        icon_color: |-
          {% if is_state('binary_sensor.echo_cuisine_mouvement', 'on') %} 
           red
          {% elif is_state('binary_sensor.echo_cuisine_mouvement', 'off') %} 
           green
          {% else %}
           orange
          {% endif %}
        double_tap_action:
          action: navigate
          navigation_path: /lovelace-smartphone/securite
        tap_action:
          action: navigate
          navigation_path: /lovelace-smartphone/securite
        hold_action:
          action: more-info
  - square: false
    columns: 3
    type: grid
    cards:
      - type: custom:mushroom-cover-card
        entity: cover.volet_du_salon_apero
        show_buttons_control: false
        fill_container: false
        name: Volet Apero
        layout: vertical
        hold_action:
          action: more-info
        double_tap_action:
          action: navigate
          navigation_path: /lovelace-smartphone/volets
        tap_action:
          action: toggle
      - type: custom:mushroom-cover-card
        entity: cover.volet_du_salon_tv
        show_buttons_control: false
        name: Volet TV
        layout: vertical
        tap_action:
          action: toggle
        hold_action:
          action: more-info
        double_tap_action:
          action: navigate
          navigation_path: /lovelace-smartphone/volets
      - type: custom:mushroom-cover-card
        entity: cover.volet_cuisine
        name: Volet Cuisine
        layout: vertical
        tap_action:
          action: toggle
        hold_action:
          action: more-info
        double_tap_action:
          action: navigate
          navigation_path: /lovelace-smartphone/volets
      - type: custom:mushroom-entity-card
        entity: switch.0x00124b0024c09832
        icon: mdi:lightbulb
        tap_action:
          action: toggle
        name: Cerisier
        icon_color: orange
        layout: vertical
      - type: custom:mushroom-entity-card
        entity: switch.0x00124b0024c2793e
        name: Elephants
        tap_action:
          action: toggle
        icon_color: orange
        layout: vertical
      - type: custom:mushroom-light-card
        entity: light.0x84ba20fffe4b2581
        name: Petite lampe
        fill_container: false
        show_brightness_control: false
        show_color_temp_control: false
        collapsible_controls: false
        double_tap_action:
          action: more-info
        layout: vertical
      - type: custom:mushroom-media-player-card
        entity: media_player.echo_jeanne
        layout: vertical
        double_tap_action:
          action: navigate
          navigation_path: /lovelace-smartphone/echo
        name: Echo - salon
      - type: custom:mushroom-media-player-card
        entity: media_player.echo_dot_jeanne
        layout: vertical
        double_tap_action:
          action: navigate
          navigation_path: /lovelace-smartphone/echo
        name: Echo cuisine
      - type: custom:mushroom-media-player-card
        entity: media_player.jeanne_echo_dot
        layout: vertical
        double_tap_action:
          action: navigate
          navigation_path: /lovelace-smartphone/echo
        name: Echo SdB
      - type: custom:mushroom-cover-card
        entity: cover.volet_du_bureau
        layout: vertical
      - type: custom:mushroom-entity-card
        entity: switch.prise_tradfri_1
        icon: mdi:pine-tree
        name: Sapin - crèche
        layout: vertical
        tap_action:
          action: toggle
        icon_color: yellow
      - type: custom:mushroom-light-card
        entity: light.ampoule_bureau
        name: Bureau
        layout: vertical
        tap_action:
          action: toggle
        hold_action:
          action: more-info
  - type: custom:flower-card
    entity: plant.alocatia
    show_bars:
      - moisture
      - temperature
      - illuminance
      - conductivity
    battery_sensor: sensor.alocasia_zebrina_battery
    card_mod:
      style: |
        ha-card {
          margin-top: 4px;
        }
        ha-card > div.header > img {
          width: 40px;
          height: 40px;
          margin-top: 8px;
        }
        ha-card {
          margin-top: 0px;
        }

Mais quoi que je tente, malgré de multiples visionnages de la video de @Clemalex là:

Je ne parviens pas à me débarrasser de la marge de 32px qui se crée au dessus de cette flower card.

Ma configuration

[center]

System Information

version	core-2023.1.2
installation_type	Home Assistant OS
dev	false
hassio	true
docker	true
user	root
virtualenv	false
python_version	3.10.7
os_name	Linux
os_version	5.15.76-v8
arch	aarch64
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.29.1
Stage	running
Available Repositories	1200
Downloaded Repositories	19

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 9.4
update_channel	stable
supervisor_version	supervisor-2022.12.1
agent_version	1.4.1
docker_version	20.10.19
disk_total	228.5 GB
disk_used	18.7 GB
healthy	true
supported	true
board	rpi3-64
supervisor_api	ok
version_api	ok
installed_addons	Terminal & SSH (9.6.1), Let’s Encrypt (4.12.7), File editor (5.4.2), Samba share (10.0.0), Home Assistant Google Drive Backup (0.110.1), Mosquitto broker (6.1.3), Zigbee2MQTT (1.29.1-1)

Dashboards

dashboards	2
resources	15
views	16
mode	storage

Recorder

oldest_recorder_run	8 janvier 2023 à 00:15
current_recorder_run	11 janvier 2023 à 12:20
estimated_db_size	3801.47 MiB
database_engine	sqlite
database_version	3.38.5

[/center]

WarC0zes · Janvier 11, 2023, 6:22

Bonjour,
tu peu utiliser GitHub - custom-cards/stack-in-card: 🛠 group multiple cards into one card without the borders qui colle les cartes entre elle avec divers options.
ou GitHub - ofekashery/vertical-stack-in-card: 📐 Home Assistant Card: Similar to vertical/horizontal-stack, but removes card borders.

ou

  - square: false
    columns: 3
    type: grid
    card_mod:
      style: |
        ha-card {
          top: -20px;
        }

Bob · Janvier 11, 2023, 6:23

Bonsoir @BBE,
Je n’utilise aucune de ces cartes mais as-tu essayé avec l’inspecteur de code de ton navigateur de modifier ? N’y a t-il pas une classe associée à ce ha-card ?
Ex :
<ha-card class="type-history-graph">
Sinon essaie ceci :

ha-card {
    margin-top: -30px !important;
}

Par contre ça risque d’impacter les autres dashboard !
C’est juste pour vérifier que tu tapes sur le bon élément, perso dans le cadre de HA je fais très peu de CSS.

Bob

BBE · Janvier 11, 2023, 6:27

Si, l’inspecteur de code c’est ce que j’ai tenté. Mon margin top 0px est écrasé par une autre venant de je ne sais où.

L’empilement des classes est un peu déroutant dans cette carte.

Je vais tenter le !important

WarC0zes · Janvier 11, 2023, 6:31

BBE:

    card_mod:
      style: |
        ha-card {
          margin-top: 4px;
        }
        ha-card > div.header > img {
          width: 40px;
          height: 40px;
          margin-top: 8px;
        }
        ha-card {
          margin-top: 0px;  
        }

c’est quoi le but d’avoir deux margin-top: ?

BBE · Janvier 11, 2023, 6:34

Oups.

c’est quoi le but d’avoir deux margin-top: ?

le premier était un padding top… J’ai collé une vieille version…

J’ai tenté ça :

type: custom:mod-card
card:
  type: custom:flower-card
  entity: plant.alocatia
  show_bars:
    - moisture
    - temperature
    - illuminance
    - conductivity
  battery_sensor: sensor.alocasia_zebrina_battery
  card_mod:
    style: |
      ha-card > div.header {
        padding-top: 0px;
      }
      ha-card > div.header > img {
        width: 40px;
        height: 40px;
        margin-top: 8px;
      }
      ha-card {
        margin-top: 0px !important;
      }

et le resultat est satisfaisant !!

Merci à tous pour l’aide !

Bob · Janvier 11, 2023, 6:39

Il n’y a pas d’impact sur d’autres dashboard ?

Bob

BBE · Janvier 11, 2023, 7:07

J’ai fait le tour. Rien qui ne saute aux yeux…

Sylvain_G · Avril 28, 2023, 10:35

Bonjour @BBE , est-ce que tu pourrais préciser comment tu as installer la carte Custom Flower Card.

J’ai bien installer card-mod et card-tools et suivi ce tuto :

Mais j’ai toujours ce message :

Je désespère …

ClassicRed · Avril 28, 2023, 1:46

Hello
@Sylvain_G , j’ai deja eu des soucis similaire avec d’autre addons de hacs
pour cela je suis retourné dans hacs et retelecharger

et cela a fonctionné

J’ai teste la card , meme souci
par contre j’ai trouvais ceci

BBE · Avril 29, 2023, 9:22

Je suis pas chez moi. Je n’ai pas d’accès facile à un PC pour vérifier quelle flower card j’ai installé…

Je me souviens avoir un peu galéré à l’installation.

Depuis ça roule…

Je vous dit ça d’ici quelques jours…

Sylvain_G · Avril 30, 2023, 10:30

Après un peu de galère, j’arrive bien à voir le fichier flower-card.js dans la fenêtre de débogage de mon navigateur Chrome :

Mais le contenu semble étonnant :

Pourtant, les fichiers crad-mod.js et card-tools.js sont correctement visibles et identiques aux fichiers dans config :
exemple pour card-tools.js dans Chrome :

extrait de card-tools.js de config dans VS-Code :

Sylvain_G · Avril 30, 2023, 2:24

Je me répond, ayant trouver la solution :
Il fallait vider le cache du navigateur dans les paramètres, un simple CTRL + F5 ne suffisait pas.

BBE · Mai 2, 2023, 8:39

Pour les suivants: sous chrome il y a une façon « simple » de vider le cache:

on appui sur F12 ce qui affiche la fenêtre de codage
on fait un click droit sur l’icone de rechargement de la page
on peut alors cliquer sur « vider le cache et faire une actualisation forcée »
C’est souvent plus rapide que d’aller fouiller dans les menus