Custom:mushroom-chips-card / Chip Karten in Chip Karte (und ohne Ränder)

Hallo liebe Community! Ich versuche schon seit Tagen das Problem zu lösen, komme aber einfach nicht auf die Lösung. Folgendes Problem: Ich versuche unterschiedliche Chip-Karten in einander zu verschachteln. In der custom:mushroom-chips-card habe ich noch zwei weitere Karten dieser Art einfügen wollen. Die Ausrichtung gelingt leider überhaupt nicht. Diese sollten höhenmäßig mittig sein. Bestenfalls auch ohne Ränder. Mit Multiple entity in a row hatte ich es bereits probiert, scheitert allerdings bereits bei der Klima Entität mit der Tap Funktion und den veränderbaren Logo und der Farbe. Hat jemand vielleicht eine erleuchtende Idee? :slight_smile:

type: custom:vertical-stack-in-card
vertical_align: start
horizontal: true
cards:
  - type: custom:mushroom-template-card
    primary: Noras Zimmer
    secondary: >
      {{ states('sensor.tado_kinderzimmer_luftfeuchtigkeit') }}% - {{
      states('sensor.tado_kinderzimmer_temperatur') }}º
    icon: mdi:teddy-bear
    icon_color: |
      {% if states('sensor.tado_kinderzimmer_heizung') | float < 0.1    %}
        brown 
      {% elif states('sensor.tado_kinderzimmer_heizung') | float > 1.0    %}
        orange
      {% elif states('sensor.tado_kinderzimmer_heizung') | float > 60.0    %}
        red
      {% endif %}
    badge_icon: |
      {% if is_state('climate.tado_kinderzimmer','heat')   
      %}
        mdi:fire 
      {% elif is_state('climate.tado_kinderzimmer','auto')   
      %}
        mdi:clock-check-outline
      {% else %} mdi:thermometer {% endif %}
    badge_color: |
      {% if is_state('climate.tado_kinderzimmer','heat')   %}
        red
      {% else %} blue  {% endif %}
    tap_action:
      action: call-service
      service: script.climate_kinderzimmer_toggle
      entity_id: climate.tado_kinderzimmer
    fill_container: true
    layout: horizontal
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: binary_sensor.lichtsensor_occupancy
            icon_color: orange
            icon: false
            card_mod:
              style: |
                ha-card {
                --chip-box-shadow: none;
                --chip-spacing: 0px;
                --chip-background: none;
                --chip-font-size: 15px;
                --chip-font-face: verdana; 
                --chip-font-weight: 100;
                --chip-height: 25px;
                --chip-icon-size: 32px;
                border: none;
                   }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            card_mod: null
            entity: binary_sensor.fenster_kinderzimmer_contact
            tap: more_info
            style: |
              ha-card {
               --ha-card-border-width: 0;
               --ha-card-background: transparent
            icon: >
              {% if is_state('binary_sensor.fenster_kinderzimmer_contact','off')
              %}
                mdi:window-closed
              {% else %}
                mdi:window-open
              {% endif %}
            content: >
              {% if is_state('binary_sensor.fenster_kinderzimmer_contact','off')
              %}
                Closed
              {% else %}
                Open
              {% endif %}
            icon_color: >
              {% if is_state('binary_sensor.fenster_kinderzimmer_contact','on')
              %}
                green
              {% else %}
                red
              {% endif %}

Hey zum Rahmen der Chips probiere das mal:

card_mod:
  style:
    ha-card {
      --ha-card-border-width: 0px; (oder)
      border: none;
    }

Auf die Einrückung achten.

Um sie mittig zu bekommen versuche mit margin-top: 123px; oder padding-top: 123px; etwas zu spielen, eins von beiden sollte gehen.

Hi ich habe sowas auch. Hier eine Beispielkarte:

Hier der Code für die zwei Chipcards:

- type: custom:mushroom-chips-card
  chips:
    - type: template
      icon: mdi:thermometer
      entity: sensor.boiler_room_temperatur
      content: "{{states(config.entity, with_unit = true)}}"
    - type: template
      icon: mdi:water-percent
      entity: sensor.wohnzimmer_klimastation_bme280_humidity
      content: "{{states(config.entity, with_unit = true)}}"
  alignment: end
  card_mod:
    style: |
      ha-card {
        position: absolute;
        top: 12px;
        right: 12px;
        --chip-spacing: -8px !important;
      }  

Vielleicht hilft dir das

Hi, danke dir für den Lösungsvorschlag. Habe diesen Weg tatsächlich schon mal gesehen und habe es mit deinem Code und den Hinweis mit dem Einrücken nochmal probiert. Allerdings ohne Erfolg. Auch nicht mit dem Verschieben der Karte :sweat_smile:

Vielleicht probiere ich es morgen nochmal, wenn ich ausgeschlafen bin^^
danke nochmal und erholsame Feiertage!

Ach das sieht ja super aus. Probiere ich direkt mal aus! Danke :smiley:

Falls dann doch die Ränder bei dir angezeigt werden, dann musst du trotzdem so wie @alexsaas schrieb, eins von den beiden möglichkeiten mit einfügen unter ha-card. Ich glaube bei mir wird das standart mäßig mit dem Theme ausgeblendet, daher fehlt bei mir die Angabe.

//Edit:

Habs gerade getestet. Hier mit folgenden Code ist der Rahmen auf jeden fall weg um die Chipscard:

- type: custom:mushroom-chips-card
  chips:
    - type: template
      icon: mdi:thermometer
      entity: sensor.boiler_room_temperatur
      content: "{{states(config.entity, with_unit = true)}}"
      card_mod:
        style: |
          ha-card {
            border: none;
          }
    - type: template
      icon: mdi:water-percent
      entity: sensor.wohnzimmer_klimastation_bme280_humidity
      content: "{{states(config.entity, with_unit = true)}}"
      card_mod:
        style: |
          ha-card {
            border: none;
          }
  alignment: end
  card_mod:
    style: |
      ha-card {
        position: absolute;
        top: 12px;
        right: 12px;
        --chip-spacing: -8px !important;
      }  

1 „Gefällt mir“

Habe es gerade probiert, border: none; funktioniert zumindest bei der Mushroom-Template-Card. Bei Chips tatsächlich nicht, sorry. Da ist es:


--chip-border-width: 0;

Ach ja, hatte auch noch | hinter style: vergessen. :see_no_evil:

Und @ciddi89s top: 123px; funktioniert auch.

1 „Gefällt mir“

Besten dank allen für die tollen Tipps! Hat endlich geklappt noch einer kurzem Verzweiflung an meinem Verstand :sweat_smile: Am end war es eine fehlende Installation. Nachdem Card Mod über HACHS installiert wurde, hat’s endlich geklappt! Allen eine schöne Osterfeier :slight_smile:

1 „Gefällt mir“

Hallo, versuche das gerade nachzubauen aber was löst das script “script.climate_kinderzimmer_toggle” aus? Wie baue ich mir das selber zusammen?

Danke.