Entity Card - Avatar eckig, nicht rund

Dashboards
1

Hallo zusammen,

ich möchte das Bild (Avatar) quadratisch mit abgerundeten Ecken darstellen, bleibe aber immer an dem CSS Code hängen. Bei der Eingabe im Developer-tool funktioniert das. Bekomme das aber nicht in HA übertragen :tipping_hand_man:

image
image266×138 10.6 KB

Hier der Code:

type: custom:mushroom-entity-card
entity: person.leonie
icon_type: entity-picture
card_mod:
  style:
    mushroom-state-info$: |
      .container {
        --card-primary-color: 
          {% if is_state("person.leonie", "home") %} 
            black
          {% else %} 
            white
          {% endif %};
        --card-secondary-color: 
          {% if is_state("person.leonie", "home") %} 
            #7A889B
          {% else %} 
            #A6AFBD
          {% endif %};
        --card-primary-font-size: 15px;
        --card-secondary-font-size: 15px;
        --card-primary-font-weight: 500;
        --card-secondary-font-weight: 500;
        gap: 4px;
      }
    mushroom-shape-avatar$: |
      .picture {
        border-top-left-radius: 6px !important;
      }
    .: |
      ha-card { 
        background-color: 
          {% if is_state("person.leonie", "home") %} 
            #F5F5F5
          {% else %} 
            #1B3C56
          {% endif %};
       }

Vielen Dank vorab!
Gruß

2

Hi, habe leider keine Zeit für weitere Erklärungen. Bin unterwegs.
Habe es dir unten hinzugefügt.

Edit: so jetzt aber, über mushroom-shape-icon kannst du das anpassen. Wenn du dort die Variablen im css ansprichst, kann das alles leicht eingestellt werden und du müsstest daher gar nicht so tief in den Stamm eingreifen. Das css ist somit auch viel kürzer und kann in zwei Parts angesprochen werden. Habe den Code entsprechend geändert.

image

mushroom-shape-icon {
  --shape-color: red !important;
  --icon-border-radius: 10px !important;
}

type: custom:mushroom-entity-card
entity: person.leonie
icon_type: entity-picture
card_mod:
  style: |
    ha-card { 
      background-color: 
        {% if is_state("person.leonie", "home") %} 
          #F5F5F5
        {% else %} 
          #1B3C56
        {% endif %};
      --card-primary-color: 
        {% if is_state("person.leonie", "home") %} 
          black
        {% else %} 
          white
        {% endif %};
      --card-secondary-color: 
        {% if is_state("person.leonie", "home") %} 
          #7A889B
        {% else %} 
          #A6AFBD
        {% endif %};
      --card-primary-font-size: 15px;
      --card-secondary-font-size: 15px;
      --card-primary-font-weight: 500;
      --card-secondary-font-weight: 500;
    }       
    mushroom-shape-icon {
      --shape-color: red !important;
      --icon-border-radius: 10px !important;
    }
3

Für Mushroom gibt es im englischen Forum ein guten Thread:

Dein Code funktioniert bei mir, aber mit deinem Code:

wird nur die Ecke oben links „eckig“:
grafik
das top-left ist zu viel mit border-radius wird es eckig:
grafik

4

Hi, das funktioniert nur bei den icons. Ich habe als Entity Picture ein eigenes Bild hinterlegt.

image
image1278×862 111 KB

Scheinbar funktioniert der Code heute morgen doch :thinking:

    mushroom-shape-avatar$: |
      .picture {
        border-radius: 6px !important;
      }

War wohl der Cache wieder mal nicht geleert :roll_eyes:
Trotzdem vielen Dank!

Gruß Frank

5

Ich habe mir das gerade mal mit dem Bild bei mir versucht. Klappt ebenfalls mit icon-border-radius, so wie ich es schon geschrieben hatte. Nur das es von mushroom-shape-icon zu ha-card wandern musste. Hier der angepasste Code, würde eher darauf zurückgreifen, weil wie gesagt der Eingriff nicht so tief stattfindet und nach Card-Mod Updates, mit dem neuen Ansprechverhalten der Klassen für ha-card, es immer noch funktionieren wird.

--icon-border-radius: 6px !important;

type: custom:mushroom-entity-card
entity: person.leonie
icon_type: entity-picture
card_mod:
  style: |
    ha-card { 
      background-color: 
        {% if is_state("person.leonie", "home") %} 
          #F5F5F5
        {% else %} 
          #1B3C56
        {% endif %};
      --card-primary-color: 
        {% if is_state("person.leonie", "home") %} 
          black
        {% else %} 
          white
        {% endif %};
      --card-secondary-color: 
        {% if is_state("person.leonie", "home") %} 
          #7A889B
        {% else %} 
          #A6AFBD
        {% endif %};
      --card-primary-font-size: 15px;
      --card-secondary-font-size: 15px;
      --card-primary-font-weight: 500;
      --card-secondary-font-weight: 500;
      --icon-border-radius: 6px !important;
    }
6

Perfekt, da ist der Code auch nicht so umständlich :+1:
Danke!