Mushroom Template Karte Layout Vertikal Primary und Secondary Text nach unten verschieben

Allgemein
,
1

Ich habe mir eine Mushroom Template Karte erstellt die auf einem Floor Plan eingebunden werden soll. In der Karte möchte ich ein Bild anstatt eines Icons einfügen. Das habe ich inzwischen gelöst in dem ich das Bild als Hintergrund eingefügt habe. Was mir aktuell noch fehlt ist das der Text nach unten verschoben wird. Er liegt aktuell auf dem Hintergrundbild und ich bekomme es nicht nach unten verschoben. Kann mir hier jemand helfen?

type: custom:mushroom-template-card
entity: input_select.haus
layout: vertical
layout_options:
  grid_columns: 2
  grid_rows: 2
primary: test
badge_icon: kuf:scene_sleeping_alternat
picture: /local/floorplan/PixelTransparent.png
card_mod:
  style: |
    mushroom-card { 
      background: url( /local/floorplan/Buttons/Haus.svg ) no-repeat 0px center;
      background-size: 42px 42px;
      background-position: center;
    }
    ha-card {
      width: 120px;
      border-radius: 50%;  
      {% if is_state('input_select.haus','Zuhause') %}
          background: #18AC07 !important;
      {% elif is_state('input_select.haus','Niemand zuhause') %}
          background: #AAAAAA !important;
      {% elif is_state('input_select.haus','Schlafend') %}
          background: #5E8B44 !important; 
      {% elif is_state('input_select.haus','Jemand am schlafen') %}
          background: #5E8B44 !important;          
      {% endif %}  
      border: 0.5px solid white !important;
    }
    mushroom-badge-icon {
      --badge-icon-size: 15px;
      --badge-size: 20px;
      top: -2px ;
      left: 23px;
      }
    mushroom-state-info$: |
      .primary {
        position: relative;
        bottom: 10px !important;
      }

image

2

Für so etwas wurde Mushroom nicht gemacht, auf der Github seite von Mushroom steht sogar:

The goal of Mushroom is not to provide custom card for deep customization. You can use the excellent UI Lovelace Minimalist and Button card plugins for this.

LG

1 „Gefällt mir“
3

Das kannst du nur mit einer vertical-stack Karte lösen, indem du Bild und Text in getrennten Karten stapelst. Die Karte mit dem Text und transparentem Hintergrund kannst du dann mit negativen margin-top Werten über die Bild-Karte nach oben verschieben.

4

Ich benutze die template mushroom cards sehr viel. Da sie sehr flexibel sind. Du kannst das Icon durch ein Bild ersetzen und das vertikale Layout auswählen. So z.B…

Screenshot_20241013_085352_Home Assistant
Screenshot_20241013_085352_Home Assistant996×430 39.2 KB

5

Kannst du den Code der Karte posten?

6

Bin gerade unterwegs. Kommt dann etwas später.

So jetzt:

type: custom:mushroom-template-card
primary: 'Nächster Abfall-Termin: {{states(''sensor.abfallallgemeinto'')}}'
secondary: >-
  {{states('sensor.abfallallgemeinweekday') }} den
  {{states('sensor.abfallallgemeindate') }}

  {{states('sensor.abfallallgemeinname') }}
icon: mdi:trash-can
entity: sensor.abfallallgemeinname
icon_color: |-
  {% if is_state('sensor.abfallallgemeinname', 'Restmüll') %}
    green
  {% elif is_state('sensor.abfallallgemeinname', 'Gelber Sack') %}
    amber
  {% elif is_state('sensor.abfallallgemeinname', 'Papiertonne') %}
    blue
  {% else %}
    pink
  {% endif %}
tap_action:
  action: navigate
  navigation_path: /dashboard-abfallkalender/termine
hold_action:
  action: none
double_tap_action:
  action: none
picture: |-
  {% if is_state('sensor.abfallallgemeinname', 'Restmüll') %}
    /local/abfall/tonne-gruen330.png
  {% elif is_state('sensor.abfallallgemeinname', 'Gelber Sack') %}
    /local/abfall/sack-gelb.png
  {% elif is_state('sensor.abfallallgemeinname', 'Papiertonne') %}
    /local/abfall/tonne-blau330.png
  {% else %}
    /local/abfall/tonne-rot330.png
  {% endif %}
multiline_secondary: true
layout: vertical
card_mod:
  style: |
    ha-card {
    {% if states('sensor.abfallallgemeinto2') | float(0) < 1 %}
    --ha-card-background: red;
    {% elif states('sensor.abfallallgemeinto2') | float(0) < 2 %}
    --ha-card-background: pink;
    {% else %}
    --ha-card-background: transparent;
    {% endif %}
    }

Die Karte verändert die Hintergrundfarbe in Abhängigkeit der Tage vorm Start im Bereich Style

grafik

7

Ich habe es jetzt ganz einfach gelöst, es gab ja bereits ein unsichtbares Bild das habe ich einfach vergrößert und damit den Text nach unten verschoben. Nicht schön hat aber funktioniert

    :host {
        --mush-icon-size: 60px;    
      }