Button-card et icone qui ne veux pas se déplacer

Mon problème

Hey, je suis en train de voir pour mettre en place une carte pour les profils de la maison, et je voudrais ajouter un button-card à un endroit précis, mais il ne veux pas se déplacer (le vilain :slight_smile: ).

pb_01

Pouvez-vous m’aider svp, car je ne comprends pas le problème?

Ma configuration

elements:
  - type: custom:button-card
    entity: sensor.tel_titi_battery_level
    size: 18px
    show_name: false
    show_label: false
    styles:
      card: null
      icon:
        - color: |
            [[[
              if (entity.state < 20) return 'red';
              if ((entity.state >= 20) && (entity.state < 80)) return 'orange'
              if (entity.state >= 80) return 'cyan';
            ]]]
    style: |
      ha-card {
            border-width: 0px !important;
      }
image: /local/card_persons/empty_frame.png
type: picture-elements

Hello

Regarde la doc :wink: => top/left

Bonjour,

Si c’est pour avoir l’état de la batterie en plus, on peut également le faire avec:

Example ci-dessous avec changement de couleur et d’icône en fonction de 3 niveaux de batterie (>75, <25 et entre les deux)

image

type: custom:mushroom-person-card
entity: person.abel
layout: vertical
secondary_info: none
icon_type: entity-picture
primary_info: none
card_mod:
  style: |
    mushroom-badge-icon:before {
        {% if states('sensor.abels_iphone_xr_battery_level') | int > 75 %}
          content: "battery_full";        
          background: rgb(var(--rgb-green)); 
        {% elif states('sensor.abels_iphone_xr_battery_level') | int < 25 %}
          content: "battery_1_bar";       
          background: rgb(var(--rgb-red)); 
        {% else %}
          content: "battery_4_bar";       
          background: rgb(var(--rgb-orange)); 
        {% endif %}
        font-size: 0.9em;
        font-family: 'Material Icons';        
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        right: 40px;
        width: var(--mush-badge-size, 16px);
        height: var(--mush-badge-size, 16px);
        border-radius: var(--mush-badge-border-radius, 50%);
      }

Cordialement,

Abel

Salut,

J’ai fait la modif en ajoutant:

    style:
      top: 12%
      left: 12%

Cependant, l’icone a une bordure que je ne souhaite pas :frowning:

j’ai vu pour ajouter cela, mais rien y fait…

          .: |
            :host {
              --border-width: 0px !important;
            }