Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

[kurtvdpoel]

Hi, I used your code but my graph still shows the outlines of the individual cards.
What’s wrong in my code?

Kind regards
Kurt

square: false
columns: 1
type: grid
cards:
  - type: custom:stack-in-card
    background: false
    cards:
      - type: grid
        square: false
        columns: 2
        cards:
          - type: custom:mushroom-entity-card
            entity: sensor.living_room_kitchen_temperature
            primary_info: state
            secondary_info: name
            name: Temperature
            icon_color: green
          - type: custom:mushroom-entity-card
            entity: sensor.living_room_kitchen_humidity
            primary_info: state
            secondary_info: name
            name: Humidity
            icon_color: blue
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.living_room_kitchen_temperature
            name: Temperature
            color: '#00bb33'
          - entity: sensor.living_room_kitchen_humidity
            name: Humidity
            color: '#2196f3'
            y_axis: secondary
        hours_to_show: 24
        line_width: 3
        font_size: 50
        animate: true
        show:
          name: false
          icon: false
          state: false
          legend: false
          fill: fade

[Sylwester (Sylwester Olik)]

Hi.
Is it possible to change font? If yes, where I need to copy files and how to set up all?

[Jimmy_Berglund]

Can Anyone please help me explain why i am getting this
Gray line pass my card?

The code might be messy but its cause I’ve Truedsson to do what i can think of to remove the line but it just wont dissapear… Any help would make me mutch thankfull.

type: custom:stack-in-card
keep:
  margin: false
  box_shadow: false
  background: false
cards:
  - type: custom:mushroom-template-card
    primary: Entre
    secondary: dörr
    icon: mdi:door
    layout: horizontal
    multiline_secondary: false
    tap_action:
      action: more-info
    icon_color: white
    hold_action:
      action: none
    double_tap_action:
      action: none
    card_mod:
      style: |
        ha-card {
          padding-bottom: 0px !important;
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          --chip-border-width: 0;
        }
  - type: custom:mushroom-chips-card
    card_mod:
      style: |
        ha-card {
          padding-bottom: 0px !important;
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          --chip-border-width: 0;
        }
    alignment: end
    chips:
      - type: template
        entity: lock.entre_dorr
        icon: |-
          {% set state=states(entity) %}
          {% if state=='locked' %}
          mdi:lock
          {% elif state=='unlocked' %}
          mdi:lock-open-variant
          {% else %}
          grey
          {% endif %}
        tap_action:
          action: more-info
        icon_color: |-
          {% set state=states(entity) %}
          {% if state=='locked' %}
          green
          {% elif state=='unlocked' %}
          red
          {% else %}
          grey
          {% endif %}
      - type: template
        entity: sensor.frontdoor
        icon: |-
          {% set state=states(entity) %}
          {% if state=='Öppen' %}
          mdi:door-open
          {% elif state=='Stängd' %}
          mdi:door
          {% else %}
          mdi:door
          {% endif %}
        tap_action:
          action: more-info
        icon_color: |-
          {% set state=states(entity) %}
          {% if state=='Öppen' %}
          red
          {% elif state=='Stängd' %}
          green
          {% else %}
          grey
          {% endif %}
style: |
  ha-card {
    padding-bottom: 0px !important;
    height: 120px;
    --chip-box-shadow: none;
    --chip-background: none;
    --chip-spacing: 0;
    --chip-border-width: 0;
  }

[Kabala (Cata)]

Part 1

type: custom:stack-in-card
mode: vertical
keep:
  box_shadow: true
  border_radius: true
  margin: true
  outer_padding: true
  background: true
cards:
  - type: vertical-stack
    cards:
      - type: conditional
        conditions:
          - entity: media_player.garage
            state_not: 'off'
        card:
          type: custom:mushroom-media-player-card
          use_media_info: true
          show_volume_level: true
          tap_action:
            action: more-info
          entity: media_player.garage
          icon: mdi:garage-alert-variant
          card_mod:
            style: |
              ha-card {
                {% if not is_state(config.entity, 'off') %}
                  background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
                  background-position: center;
                  background-repeat: no-repeat;
                  background-size: cover;
                  position: relative;
                  background-blend-mode: overlay;
                  background-color: rgba(var(--rgb-card-background-color),0.8);
                {% endif %}  
              }
      - type: conditional
        conditions:
          - entity: media_player.kuche
            state_not: 'off'
        card:
          type: custom:mushroom-media-player-card
          use_media_info: true
          show_volume_level: true
          tap_action:
            action: more-info
          entity: media_player.kuche
          icon: mdi:silverware-fork-knife
          card_mod:
            style: |
              ha-card {
                {% if not is_state(config.entity, 'off') %}
                  background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
                  background-position: center;
                  background-repeat: no-repeat;
                  background-size: cover;
                  position: relative;
                  background-blend-mode: overlay;
                  background-color: rgba(var(--rgb-card-background-color),0.8);
                {% endif %}  
              }
      - type: conditional
        conditions:
          - entity: media_player.tv_samsung_6_series_55
            state: 'on'
        card:
          type: custom:mushroom-media-player-card
          entity: media_player.tv_samsung_6_series_55
          use_media_info: true
          show_volume_level: true
          tap_action:
            action: more-info
          icon: mdi:television-classic
          card_mod:
            style: |
              ha-card {
                {% if not is_state(config.entity, 'off') %}
                  background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
                  background-position: center;
                  background-repeat: no-repeat;
                  background-size: cover;
                  position: relative;
                  background-blend-mode: overlay;
                  background-color: rgba(var(--rgb-card-background-color),0.8);
                {% endif %}  
              }
      - type: conditional
        conditions:
          - entity: media_player.laptop
            state: playing
          - entity: sensor.spotify_source
            state_not: Laptop
        card:
          type: custom:mushroom-media-player-card
          entity: media_player.laptop
          use_media_info: true
          show_volume_level: true
          tap_action:
            action: more-info
          fill_container: false
          volume_controls: []
          media_controls: []
          collapsible_controls: false
          name: Laptop
          card_mod:
            style: |
              ha-card {
                {% if not is_state(config.entity, 'off') %}
                  background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
                  background-position: center;
                  background-repeat: no-repeat;
                  background-size: cover;
                  position: relative;
                  background-blend-mode: overlay;
                  background-color: rgba(var(--rgb-card-background-color),0.8);
                {% endif %}  
              }
      - type: conditional
        conditions:
          - entity: sensor.spotify_source
            state: Garage
        card:
          type: custom:mushroom-media-player-card
          use_media_info: true
          show_volume_level: true
          tap_action:
            action: more-info
          icon: mdi:garage-alert-variant
          entity: media_player.spotify
          media_controls:
            - previous
            - play_pause_stop
            - next
          name: Garage
          layout: horizontal
          card_mod:
            style: |
              ha-card {
                {% if not is_state(config.entity, 'off') %}
                  background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
                  background-position: center;
                  background-repeat: no-repeat;
                  background-size: cover;
                  position: relative;
                  background-blend-mode: overlay;
                  background-color: rgba(var(--rgb-card-background-color),0.8);
                {% endif %}  
              }
      - type: conditional
        conditions:
          - entity: sensor.spotify_source
            state: Küche
        card:
          type: custom:mushroom-media-player-card
          use_media_info: true
          show_volume_level: true
          tap_action:
            action: more-info
          icon: mdi:silverware-fork-knife
          entity: media_player.spotify
          media_controls:
            - previous
            - play_pause_stop
            - next
          name: Küche
          layout: horizontal
          card_mod:
            style: |
              ha-card {
                {% if not is_state(config.entity, 'off') %}
                  background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
                  background-position: center;
                  background-repeat: no-repeat;
                  background-size: cover;
                  position: relative;
                  background-blend-mode: overlay;
                  background-color: rgba(var(--rgb-card-background-color),0.8);
                {% endif %}  
              }
      - type: conditional
        conditions:
          - entity: sensor.spotify_source
            state: '[TV] Samsung 6 Series (55)'
        card:
          type: custom:mushroom-media-player-card
          use_media_info: true
          show_volume_level: true
          tap_action:
            action: more-info
          icon: mdi:television-classic
          entity: media_player.spotify
          media_controls:
            - previous
            - play_pause_stop
            - next
          name: Samsung TV
          layout: horizontal
          card_mod:
            style: |
              ha-card {
                {% if not is_state(config.entity, 'off') %}
                  background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
                  background-position: center;
                  background-repeat: no-repeat;
                  background-size: cover;
                  position: relative;
                  background-blend-mode: overlay;
                  background-color: rgba(var(--rgb-card-background-color),0.8);
                {% endif %}  
              }
      - type: conditional
        conditions:
          - entity: sensor.spotify_source
            state: S20 FE
        card:
          type: custom:mushroom-media-player-card
          use_media_info: true
          show_volume_level: true
          tap_action:
            action: more-info
          icon: mdi:cellphone
          entity: media_player.spotify
          media_controls:
            - previous
            - play_pause_stop
            - next
          name: Cata Smartphone
          layout: horizontal
          card_mod:
            style: |
              ha-card {
                {% if not is_state(config.entity, 'off') %}
                  background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
                  background-position: center;
                  background-repeat: no-repeat;
                  background-size: cover;
                  position: relative;
                  background-blend-mode: overlay;
                  background-color: rgba(var(--rgb-card-background-color),0.8);
                {% endif %}  
              }
      - type: conditional
        conditions:
          - entity: sensor.spotify_source
            state: Laptop
        card:
          type: custom:mushroom-media-player-card
          use_media_info: true
          show_volume_level: true
          tap_action:
            action: more-info
          icon: mdi:laptop
          entity: media_player.spotify
          media_controls:
            - previous
            - play_pause_stop
            - next
          name: Laptop
          layout: horizontal
          fill_container: false
          volume_controls:
            - volume_buttons
          card_mod:
            style: |
              ha-card {
                {% if not is_state(config.entity, 'off') %}
                  background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
                  background-position: center;
                  background-repeat: no-repeat;
                  background-size: cover;
                  position: relative;
                  background-blend-mode: overlay;
                  background-color: rgba(var(--rgb-card-background-color),0.8);
                {% endif %}  
              }
  - square: false
    columns: 4
    type: grid
    cards:
      - type: custom:mushroom-template-card
        secondary: ''
        icon: mdi:radio
        entity: media_player.garage
        primary: Garage
        multiline_secondary: true
        icon_color: >-
          {{ is_state("input_select.lms_player", "garage") | iif("orange",
          "disabled") }}
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: garage
          target:
            entity_id: input_select.lms_player
        fill_container: true
        hold_action:
          action: more-info
        layout: vertical
        card_mod:
          style: |
            :host { 
              --primary-text-color: 
              {% if is_state('input_select.lms_player', 'garage')%} rgb(var(--rgb-indigo))
              {% else %} rgb(var(--rgb-disabled))
              {% endif %}
              }
            ha-card {
              {% if is_state('input_select.lms_player', 'garage') %}
              background: rgb(var(--rgb-indigo), 0.2);
              {% endif %}
              margin-left: auto;
              margin-right: auto;
              width: 70px;
              border-radius: 30px;
              --card-primary-font-size: 13px;
              --card-secondary-font-size:
              }
      - type: custom:mushroom-template-card
        secondary: ''
        icon: mdi:silverware-fork-knife
        entity: media_player.kuche
        primary: Küche
        multiline_secondary: true
        icon_color: >-
          {{ is_state("input_select.lms_player", "kuche") | iif("orange",
          "disabled") }}
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: kuche
          target:
            entity_id: input_select.lms_player
        fill_container: true
        layout: vertical
        hold_action:
          action: more-info
        card_mod:
          style: |
            :host { 
              --primary-text-color: 
              {% if is_state('input_select.lms_player', 'kuche')%} rgb(var(--rgb-indigo))
              {% else %} rgb(var(--rgb-disabled))
              {% endif %}
              }
            ha-card {
              {% if is_state('input_select.lms_player', 'kuche') %}
              background: rgb(var(--rgb-indigo), 0.2);
              {% endif %}
              margin-left: auto;
              margin-right: auto;
              width: 70px;
              border-radius: 30px;
              --card-primary-font-size: 13px;
              --card-secondary-font-size:
              }
      - type: custom:mushroom-template-card
        secondary: ''
        icon: mdi:television-classic
        entity: media_player.tv_samsung_6_series_55_3
        multiline_secondary: true
        icon_color: >-
          {{ is_state("input_select.lms_player", "tv_samsung_6_series_55") |
          iif("orange", "disabled") }}
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: tv_samsung_6_series_55
          target:
            entity_id: input_select.lms_player
        fill_container: true
        layout: vertical
        hold_action:
          action: more-info
        primary: TV
        card_mod:
          style: |
            :host { 
              --primary-text-color: 
              {% if is_state('input_select.lms_player', 'tv_samsung_6_series_55')%} rgb(var(--rgb-indigo))
              {% else %} rgb(var(--rgb-disabled))
              {% endif %}
              }
            ha-card {
              {% if is_state('input_select.lms_player', 'tv_samsung_6_series_55') %}
              background: rgb(var(--rgb-indigo), 0.2);
              {% endif %}
              margin-left: auto;
              margin-right: auto;
              width: 70px;
              border-radius: 30px;
              --card-primary-font-size: 13px;
              --card-secondary-font-size:
              }
      - type: custom:mushroom-template-card
        secondary: ''
        icon: mdi:laptop
        entity: media_player.laptop
        primary: Laptop
        multiline_secondary: true
        icon_color: >-
          {{ is_state("input_select.lms_player", "laptop") | iif("orange",
          "disabled") }}
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: laptop
          target:
            entity_id: input_select.lms_player
        fill_container: true
        layout: vertical
        hold_action:
          action: more-info
        card_mod:
          style: |
            :host { 
              --primary-text-color: 
              {% if is_state('input_select.lms_player', 'laptop')%} rgb(var(--rgb-indigo))
              {% else %} rgb(var(--rgb-disabled))
              {% endif %}
              }
            ha-card {
              {% if is_state('input_select.lms_player', 'laptop') %}
              background: rgb(var(--rgb-indigo), 0.2);
              {% endif %}
              margin-left: auto;
              margin-right: auto;
              width: 70px;
              border-radius: 30px;
              --card-primary-font-size: 13px;
              --card-secondary-font-size:
              }

[Kabala (Cata)]

Part 2

  - type: custom:stack-in-card
    mode: vertical
    keep:
      box_shadow: true
      border_radius: true
      margin: true
      outer_padding: false
      background: true
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: action
            tap_action:
              action: call-service
              service: script.lms
            icon: mdi:play
            icon_color: indigo
          - type: action
            icon: mdi:stop
            tap_action:
              action: call-service
              service: script.lms_stop
              data: {}
              target: {}
            icon_color: deep-orange
          - type: action
            icon: mdi:volume-minus
            tap_action:
              action: call-service
              service: input_number.decrement
              data: {}
              target:
                entity_id: input_number.lms_volume
            icon_color: disabled
          - type: action
            icon: mdi:volume-plus
            tap_action:
              action: call-service
              service: input_number.increment
              data: {}
              target:
                entity_id: input_number.lms_volume
            icon_color: disabled
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-height: 40px;
            }
  - square: false
    columns: 4
    type: grid
    cards:
      - type: custom:mushroom-entity-card
        entity: input_select.chromecast_radio_station
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: ProFM
          target:
            entity_id: input_select.chromecast_radio_station
        icon_color: disabled
        primary_info: none
        layout: vertical
        hold_action:
          action: more-info
        icon_type: none
        name: ProFM
        secondary_info: name
        card_mod:
          style: |
            ha-card {
              background-image: url("/local/radio/ProFM.png");
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              background-color: rgba(var(--rgb-card-background-color), 0.8);
              background-blend-mode: overlay;
              position: relative;
              {% if is_state('input_select.chromecast_radio_station', 'ProFM') %}
              {% else %}
                background: rgba(var(--rgb-card-background-color), 0.8);
              {% endif %}  
            }
      - type: custom:mushroom-entity-card
        entity: input_select.chromecast_radio_station
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: KissFM
          target:
            entity_id: input_select.chromecast_radio_station
        icon_color: disabled
        primary_info: none
        layout: vertical
        hold_action:
          action: more-info
        icon_type: none
        name: KissFM
        secondary_info: name
        card_mod:
          style: |
            ha-card {
              background-image: url("/local/radio/KissFM.png");
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              background-color: rgba(var(--rgb-card-background-color), 0.8);
              background-blend-mode: overlay;
              position: relative;
              {% if is_state('input_select.chromecast_radio_station', 'KissFM') %}
              {% else %}
                background: rgba(var(--rgb-card-background-color), 0.8);
              {% endif %}  
            }
      - type: custom:mushroom-entity-card
        entity: input_select.chromecast_radio_station
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: EuropaFM
          target:
            entity_id: input_select.chromecast_radio_station
        icon_color: disabled
        layout: vertical
        hold_action:
          action: more-info
        icon_type: none
        secondary_info: name
        name: EuropaFM
        primary_info: none
        card_mod:
          style: |
            ha-card {
              background-image: url("/local/radio/EuropaFM.png");
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              background-color: rgba(var(--rgb-card-background-color), 0.8);
              background-blend-mode: overlay;
              position: relative;
              {% if is_state('input_select.chromecast_radio_station', 'EuropaFM') %}
              {% else %}
                background: rgba(var(--rgb-card-background-color), 0.8);
              {% endif %}  
      - type: custom:mushroom-entity-card
        entity: input_select.chromecast_radio_station
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: RadioZu
          target:
            entity_id: input_select.chromecast_radio_station
        icon_color: disabled
        layout: vertical
        hold_action:
          action: more-info
        icon_type: none
        secondary_info: name
        name: RadioZu
        primary_info: none
        card_mod:
          style: |
            ha-card {
              background-image: url("/local/radio/RadioZu.png");
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              background-color: rgba(var(--rgb-card-background-color), 0.8);
              background-blend-mode: overlay;
              position: relative;
              {% if is_state('input_select.chromecast_radio_station', 'RadioZu') %}
              {% else %}
                background: rgba(var(--rgb-card-background-color), 0.8);
              {% endif %}  
      - type: custom:mushroom-entity-card
        entity: input_select.chromecast_radio_station
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: DigiFM
          target:
            entity_id: input_select.chromecast_radio_station
        icon_color: disabled
        layout: vertical
        hold_action:
          action: more-info
        icon_type: none
        secondary_info: name
        name: DigiFM
        primary_info: none
        card_mod:
          style: |
            ha-card {
              background-image: url("/local/radio/DigiFM.png");
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              background-color: rgba(var(--rgb-card-background-color), 0.8);
              background-blend-mode: overlay;
              position: relative;
              {% if is_state('input_select.chromecast_radio_station', 'DigiFM') %}
              {% else %}
                background: rgba(var(--rgb-card-background-color), 0.8);
              {% endif %} 
      - type: custom:mushroom-entity-card
        entity: input_select.chromecast_radio_station
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: MagicFM
          target:
            entity_id: input_select.chromecast_radio_station
        icon_color: disabled
        layout: vertical
        hold_action:
          action: more-info
        icon_type: none
        secondary_info: name
        name: MagicFM
        primary_info: none
        card_mod:
          style: |
            ha-card {
              background-image: url("/local/radio/MagicFm.png");
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              background-color: rgba(var(--rgb-card-background-color), 0.8);
              background-blend-mode: overlay;
              position: relative;
              {% if is_state('input_select.chromecast_radio_station', 'MagicFM') %}
              {% else %}
                background: rgba(var(--rgb-card-background-color), 0.8);
              {% endif %} 
      - type: custom:mushroom-entity-card
        entity: input_select.chromecast_radio_station
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: VirginRadio
          target:
            entity_id: input_select.chromecast_radio_station
        icon_color: disabled
        layout: vertical
        hold_action:
          action: more-info
        icon_type: none
        secondary_info: name
        name: Virgin
        primary_info: none
        card_mod:
          style: |
            ha-card {
              background-image: url("/local/radio/VirginRadio.png");
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              background-color: rgba(var(--rgb-card-background-color), 0.8);
              background-blend-mode: overlay;
              position: relative;
              {% if is_state('input_select.chromecast_radio_station', 'VirginRadio') %}
              {% else %}
                background: rgba(var(--rgb-card-background-color), 0.8);
              {% endif %} 
      - type: custom:mushroom-entity-card
        entity: input_select.chromecast_radio_station
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: RadioPetrecere
          target:
            entity_id: input_select.chromecast_radio_station
        icon_color: disabled
        layout: vertical
        hold_action:
          action: more-info
        icon_type: none
        secondary_info: name
        name: Petrecere
        primary_info: none
        card_mod:
          style: |
            ha-card {
              background-image: url("/local/radio/RadioPetrecere.jpg");
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              background-color: rgba(var(--rgb-card-background-color), 0.8);
              background-blend-mode: overlay;
              position: relative;
              {% if is_state('input_select.chromecast_radio_station', 'RadioPetrecere') %}
              {% else %}
                background: rgba(var(--rgb-card-background-color), 0.8);
              {% endif %} 
      - type: custom:mushroom-entity-card
        entity: input_select.chromecast_radio_station
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: NationalFM
          target:
            entity_id: input_select.chromecast_radio_station
        icon_color: disabled
        layout: vertical
        hold_action:
          action: more-info
        icon_type: none
        secondary_info: name
        name: NationalFM
        primary_info: none
        card_mod:
          style: |
            ha-card {
              background-image: url("/local/radio/NationalFM.png");
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              background-color: rgba(var(--rgb-card-background-color), 0.8);
              background-blend-mode: overlay;
              position: relative;
              {% if is_state('input_select.chromecast_radio_station', 'NationalFM') %}
              {% else %}
                background: rgba(var(--rgb-card-background-color), 0.8);
              {% endif %}
      - type: custom:mushroom-entity-card
        entity: input_select.chromecast_radio_station
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: WefunkRadio
          target:
            entity_id: input_select.chromecast_radio_station
        icon_color: disabled
        layout: vertical
        hold_action:
          action: more-info
        icon_type: none
        secondary_info: name
        name: WefunkRadio
        primary_info: none
        card_mod:
          style: |
            ha-card {
              background-image: url("/local/radio/WefunkRadio.png");
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              background-color: rgba(var(--rgb-card-background-color), 0.8);
              background-blend-mode: overlay;
              position: relative;
              {% if is_state('input_select.chromecast_radio_station', 'WefunkRadio') %}
              {% else %}
                background: rgba(var(--rgb-card-background-color), 0.8);
              {% endif %}
      - type: custom:mushroom-entity-card
        entity: input_select.chromecast_radio_station
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: FunkyRadio
          target:
            entity_id: input_select.chromecast_radio_station
        icon_color: disabled
        layout: vertical
        hold_action:
          action: more-info
        icon_type: none
        secondary_info: name
        name: FunkyRadio
        primary_info: none
        card_mod:
          style: |
            ha-card {
              background-image: url("/local/radio/FunkyRadio.png");
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              background-color: rgba(var(--rgb-card-background-color), 0.8);
              background-blend-mode: overlay;
              position: relative;
              {% if is_state('input_select.chromecast_radio_station', 'FunkyRadio') %}
              {% else %}
                background: rgba(var(--rgb-card-background-color), 0.8);
              {% endif %}
      - type: custom:mushroom-entity-card
        entity: input_select.chromecast_radio_station
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: RadioFunkyThrills
          target:
            entity_id: input_select.chromecast_radio_station
        icon_color: disabled
        layout: vertical
        hold_action:
          action: more-info
        icon_type: none
        secondary_info: name
        name: FunkyThrills
        primary_info: none
        card_mod:
          style: |
            ha-card {
              background-image: url("/local/radio/RadioFunkyThrills.jpg");
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              background-color: rgba(var(--rgb-card-background-color), 0.8);
              background-blend-mode: overlay;
              position: relative;
              {% if is_state('input_select.chromecast_radio_station', 'RadioFunkyThrills') %}
              {% else %}
                background: rgba(var(--rgb-card-background-color), 0.8);
              {% endif %}
      - type: custom:mushroom-entity-card
        entity: input_select.chromecast_radio_station
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: Bayern1
          target:
            entity_id: input_select.chromecast_radio_station
        icon_color: disabled
        layout: vertical
        hold_action:
          action: more-info
        icon_type: none
        secondary_info: name
        name: Bayern1
        primary_info: none
        card_mod:
          style: |
            ha-card {
              background-image: url("/local/radio/Bayern1.png");
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              background-color: rgba(var(--rgb-card-background-color), 0.8);
              background-blend-mode: overlay;
              position: relative;
              {% if is_state('input_select.chromecast_radio_station', 'Bayern1') %}
              {% else %}
                background: rgba(var(--rgb-card-background-color), 0.8);
              {% endif %}
      - type: custom:mushroom-entity-card
        entity: input_select.chromecast_radio_station
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: Bayern3
          target:
            entity_id: input_select.chromecast_radio_station
        icon_color: disabled
        layout: vertical
        hold_action:
          action: more-info
        icon_type: none
        secondary_info: name
        name: Bayern3
        primary_info: none
        card_mod:
          style: |
            ha-card {
              background-image: url("/local/radio/Bayern3.png");
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              background-color: rgba(var(--rgb-card-background-color), 0.8);
              background-blend-mode: overlay;
              position: relative;
              {% if is_state('input_select.chromecast_radio_station', 'Bayern3') %}
              {% else %}
                background: rgba(var(--rgb-card-background-color), 0.8);
              {% endif %}
      - type: custom:mushroom-entity-card
        entity: input_select.chromecast_radio_station
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: Charivari
          target:
            entity_id: input_select.chromecast_radio_station
        icon_color: disabled
        layout: vertical
        hold_action:
          action: more-info
        icon_type: none
        secondary_info: name
        name: Charivari
        primary_info: none
        card_mod:
          style: |
            ha-card {
              background-image: url("/local/radio/Charivari.png");
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              background-color: rgba(var(--rgb-card-background-color), 0.8);
              background-blend-mode: overlay;
              position: relative;
              {% if is_state('input_select.chromecast_radio_station', 'Charivari') %}
              {% else %}
                background: rgba(var(--rgb-card-background-color), 0.8);
              {% endif %}
      - type: custom:mushroom-entity-card
        entity: input_select.chromecast_radio_station
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: Energy
          target:
            entity_id: input_select.chromecast_radio_station
        icon_color: disabled
        layout: vertical
        hold_action:
          action: more-info
        icon_type: none
        secondary_info: name
        name: Energy
        primary_info: none
        card_mod:
          style: |
            ha-card {
              background-image: url("/local/radio/Energy.png");
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              background-color: rgba(var(--rgb-card-background-color), 0.8);
              background-blend-mode: overlay;
              position: relative;
              {% if is_state('input_select.chromecast_radio_station', 'Energy') %}
              {% else %}

[Homeotte41 (Jonathan)]

hi, we can me help me?
the card is not stopping flashing by the light off, how can i that make it? en stop the moving icon by off

 type: custom:mushroom-template-card
primary: Meterkast
secondary: |2-

        {{ states("sensor.lumi_lumi_weather_temperature_2") }}°C 
       
icon: mdi:lightning-bolt-outline
multiline_secondary: false
tap_action:
  action: navigate
  navigation_path: /lovelace/13
fill_container: true
icon_color: |
  {% if is_state('switch.meterkastlamp', 'on') %}
   red
  {% endif %}
double_tap_action:
  action: none
layout: vertical
hold_action:
  action: none
badge_color: ''
badge_icon: ''
entity: switch.meterkastlamp
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: flash 4s linear infinite;' if is_state(config.entity, 'on') }}
      }
      @keyframes flash {
        0%, 4%, 8%, 12%, 16%, 20%, 24%, 28%, 32%, 100% { transform: translate(0px,0px); }
        2% { transform: translate(-0.3px, 0px); }
        6% { transform: translate(0.3px, 0px); }
        10% { transform: translate(-0.2px, 0px); }
        14% { transform: translate(0.2px, 0px); }
        18% { transform: translate(-0.2px, 0px); }
        22% { transform: translate(0.5px, 0px); }
        26% { transform: translate(-0.5px, 0px); }
        34% { transform: translate(-1px, 5px); --icon-color: rgb(var(--rgb-amber)); }
        38% { transform: translate(0px, 0px); --icon-color: rgb(var(--rgb-white)); }
        40% { --icon-color: rgb(var(--rgb-amber)); }

[Jorggs]

Well that’s embarrassing! I was certain I had the latest version, but that has worked a treat. Many thanks.

[rhysb (Rhys)]

You can use vertical-stack-in-card instead of stack-in-card. Install from HACS.

[rhysb (Rhys)]

Try using vertical-stack-in-card instead of stack-in-card.

[rhysb (Rhys)]

You are missing the opening curly brackets and '. Should be like this:

{{ '--icon-animation: flash 4s linear infinite;' if is_state(config.entity, 'on') }}

[sviperz]

No, that’s not what I need. mdi icons are simple outlined ones, and I need those that a regular weather chip has:

[Intro_Verti]

Hi @Tyfoon, could you please paste it again in yaml?
I can’t get it correct, not that good in yaml…Thank you!

[Boostin4HP]

https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/3322

[P4SQL]

Hi all,

is it somehow possible to change the icon and the color of the icon for a mushroom-vacuum-card?
I tried to reuse some of my YAML code which is working fine for other mushroom card types, but it does not work for vacuum.

Thanks for your advise.

Cheers
P4SQL

[Tyfoon]

Ah, I see I made a copy paste mistake. Now correct Yaml in same post. p.s. I have changed the chip look to just show the icon + value and not the background. I like it better. If you remove the card mod you get them back again

p.s.2; I still would like to get them closer together so they can sit next to each other

[platini76]

@piitaya

        icon_color: purple

    - domain: switch
      state: 'on'
      options:
        type: custom:mushroom-light-card
        layout: vertical
        icon_color: Amber
        icon: mdi:lightbulb
        show_color_temp_control: true
        show_brightness_control: true

icon color did not work…

[piitaya (Paul)]

Color should be lowercase : amber

[Homeotte41 (Jonathan)]

Thank you, yes that fix the problem

[platini76]

@platini76

        icon_color: Amber

sorry it did not work also with lowercase, in

square: false
columns: 1
type: grid
cards:
  - type: custom:auto-entities
    show_empty: false
    card:
      square: false
      columns: 3
      type: grid
    card_param: cards
    filter:
      include:
        - domain: light
          state: 'on'
          options:
            type: custom:mushroom-light-card
            layout: default
            icon: mdi:lightbulb
            show_brightness_control: true
            collapsible_controls: true
            use_light_color: true
        - domain: switch
          state: 'on'
          options:
            type: custom:mushroom-light-card
            layout: vertical
            icon: mdi:lightbulb
            show_brightness_control: true
            collapsible_controls: true
            use_light_color: true
      exclude:
        - entity_id: switch.roon_rock
        - entity_id: switch.presa_lavatrice
        - entity_id: switch.superracer
        - integration: sonos
        - integration: browser_mod
        - integration: aarlo
        - attributes:
            is_hue_group: true
          options:
            tap_action:
              action: toggle

[rhysb (Rhys)]

icon-color: is not a supported setting for mushroom-light-card. If you want to change the default Icon Color for Mushroom Light Card you can add mush-rgb-state-light: var(--rgb-amber-color) to your theme.