Hilfe bei Styling von entity_card als badge

Dashboard/Cards/Frontend
,
1

Heute hätte ich gern e eure Hilfe beim Styling von Badges.Bisher habe ich in vielen Karten eine Fußzeile, die mir den Status mehrerer Entitäten anzeigt.Das sieht etwa so aus:

  - type: heading
    icon: none
    heading: ""
    badges:
      - type: entity
        show_state: true
        show_icon: true
        entity: sensor.thermostat_buro_kg_ist_temperatur
        color: red
        tap_action:
          action: more-info
      - type: entity
        show_state: true
        show_icon: true
        entity: sensor.thermostat_buro_kg_luftfeuchtigkeit
        color: blue
        tap_action:
          action: more-info
      - type: entity
        show_state: true
        show_icon: true
        entity: sensor.steckdose_m3_leistung
        color: orange
        tap_action:
          action: more-info

Badges 1

Da ich es nicht geschafft habe, die entity-Badges dynamisch zu stylen, habe ich es mit mushroom-template-cards versucht. Das funktioniert auch im Prinzip ganz gut:

  - type: heading
    icon: none
    heading: ""
    badges:
      - type: custom:mushroom-template-card
        entity: sensor.shelly_zisterne_analogeingang_analog
        primary: ""
        icon: mdi:car-coolant-level
        icon_color: >-
          {%- set value =
          states('sensor.shelly_zisterne_analogeingang_analog_value') | round(0)
          -%} {%- if value > 60 -%}
            blue
          {%- elif value > 25 -%}
            skyblue
          {%- elif value >15 -%}
            lightcoral
          {%- else -%}
            mediumvioletred
          {%- endif -%}
        secondary: >
          {%- set value =
          states('sensor.shelly_zisterne_analogeingang_analog_value') | float
          |round(0) -%}  {%- set unit =
          state_attr('sensor.shelly_zisterne_analogeingang_analog_value',
          'unit_of_measurement') -%}  {{value}} {{unit}}
        tap_action:
          action: more-info
        card_mod:
          style: |
            ha-card {
              border: none;
              padding: 0px !important;
              margin-bottom: -10px;
              margin-top: -10px;
            }
      - type: custom:mushroom-template-card
        entity: sensor.stromaufnahme_ladestation_total_active_power
        primary: ""
        icon: mdi:ev-station
        icon_color: >-
          {%- set value =
          states('sensor.stromaufnahme_ladestation_total_active_power') | float
          -%} 

          {%- set unit =
          state_attr('sensor.stromaufnahme_ladestation_total_active_power',
          'unit_of_measurement') -%}  {%- set threshold = 10 if unit == 'W' else
          0.01 -%}  {%- if value > threshold -%}
            gold
          {%- else -%}
            grey
          {%- endif -%}
        secondary: >
          {%- set value =
          states('sensor.stromaufnahme_ladestation_total_active_power') | int
          -%}  {%- set unit =
          state_attr('sensor.stromaufnahme_ladestation_total_active_power',
          'unit_of_measurement') -%}  {{value}} {{unit}}
        tap_action:
          action: more-info
        card_mod:
          style: |
            ha-card {
              border: none;
              padding: 0px !important;
              margin-bottom: -10px;
              margin-top: -10px;
            }

Badges 2

Aber ich schaffe es nicht, das Aussehen den anderen Badges anzupassen. Das betrifft die Größe, den Abstand von Icon zu Text etc.Kann mir da jemand weiterhelfen?Entweder die mushroom-Karte zu Stylen, oder das mit einer entity-Karte hinzubekommen?EDIT:Ich habe es jetzt mit mushroom-template-badge umgesetzt und das sieht schon den anderen Badges sehr ähnlich:

  - type: custom:mushroom-template-badge
    entity: sensor.shelly_zisterne_analogeingang_analog_value
    icon: mdi:car-coolant-level
    color: >
      {% set value = states(entity) | float %} {% if value > 60 %} blue {%
      elif value > 25 %} skyblue {% elif value > 15 %} lightcoral {% else %}
      mediumvioletred {% endif %}
    content: >
      {% set value = states(entity) | float | round(0) %} {% set unit =
      state_attr(entity, 'unit_of_measurement') %} {{ value }} {{ unit }}
    tap_action:
      action: more-info
    card_mod:
      style:
        mushroom-state-info$: |
          .content {
            white-space: nowrap !important;
          }

Badges 3

Allerdings schaffe ich es hier nicht den Zeilenumbruch weg zu bekommen und den Rahmen leider auch nicht.

2

OK, ich habe das hier jetzt nicht als EDIT meines vorigen Beitrags gemacht, da ich eine Lösung gefunden habe, und die mit euch teilen möchte.
Ich habe den Ersatz der Badges mit folgendem Code hinbekommen und das Aussehen ist wirklich sehr ähnlich:

- type: horizontal-stack
  cards:
    - type: custom:mushroom-chips-card
      alignment: end
      chips:
        - type: template
          entity: sensor.shelly_zisterne_analogeingang_analog_value
          icon: mdi:car-coolant-level
          icon_color: >
            {% set value = states(entity) | float %} {% if value > 60 %} blue
            {% elif value > 25 %} skyblue {% elif value > 15 %} lightcoral {%
            else %} mediumvioletred {% endif %}
          content: >
            {% set value = states(entity) | float | round(0) %} {% set unit =
            state_attr(entity, 'unit_of_measurement') %} {{ value }} {{ unit
            }}
          tap_action:
            action: more-info
          card_mod:
            style: |
              ha-card {
                --ha-card-border-width: 0px;
                --chip-font-size: 15px;
                --chip-font-weight: 400;
                border: none;
              }

Ich hoffe, das hilft euch, wenn ihr ähnliche Probleme habt.

1 „Gefällt mir“