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

[quinquelhas (Marco)]

Hi, can someone tell me why doesn’t change the icon_color?

I can’t do it…

type: custom:stack-in-card
mode: horizontal
style: |
  ha-card {
    width: 360px;
    height: 135px;
    background-color: white;
    border: none;
    }
cards:
  - type: custom:mushroom-light-card
    entity: light.leds_armario
    show_color_control: true
    use_light_color: true
    show_color_temp_color: true
    show_brightness_color: true
    style: |
      ha-card {
      border: none;
      background: #EBEBEB;
      margin-top: 10px
      }
  - type: custom:stack-in-card
    mode: vertical
    style: |
      ha-card {
        width: 120px;
        height: 135px;
        border: none;
       }
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.openclose_2_temperature
            icon_color: red
            style: |
              ha-card {
                margin-left: 25px;
                margin-top: 10px;
                --chip-background: #F2F2F2;
                border: none;
              }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: sensor.openclose_2_battery
            icon: mdi:battery-10
            icon_color: red
            content: '{{ states("sensor.openclose_2_battery") }}%'
            style: |
              ha-card {
               border: none;
               --chip-background: #f2f2f2;
               margin-top: 5px;
               margin-left: 25px;
               width: 10px;
              }
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.aqara_armario_balcao
            icon: mdi:door-closed-lock
            icon_color: >-
              {% set porta=states("sensor.aqara_armario_balcao")%} {% if porta
              == Fechada %} red {% else %} green {% endif %}
            style: |
              ha-card {
                margin-top: 5px;
                margin-left: 25px;
                border: none;
                --chip-background: #f2f2f2;              

}

[nightfever]

Try:

icon_color: >-
  {{ 'red' if is_state(entity,'Fechada') else 'green' }}

[quinquelhas (Marco)]

Doesn’t work , but like that it works…

'{{ ''red'' if is_state(entity,''Fechada'') else '' green }}'

thank you nightfever

[bogdan.sv (Bogdan 🌻)]

Thank you so much for your template. Could you help me? I use youre template, however, my box still has a shadow

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:sofa
    tap_action:
      action: navigate
      navigation_path: soggiorno
    icon_color: blue
    multiline_secondary: true
    primary: Вітальня
    card_mod: null
    style: |
      ha-card {
        box-shadow: 0px 0px;
      }
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.ewelink_th01_temperature_2
        icon_color: blue
        card_mod: null
        style: |
          ha-card {
              box-shadow: 0px 0px;
          }
      - type: entity
        entity: sensor.ewelink_th01_humidity_2
        icon_color: blue
        card_mod: null
        style: |
          ha-card {
            box-shadow: 0px 0px;
          }
alignment: center

[gfandrea (Andrea)]

Hi,
try this code for card-mod:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Studio
    secondary: Dove si gioca
    icon: mdi:space-station
    tap_action:
      action: navigate
      navigation_path: studio
    icon_color: deep-orange
    multiline_secondary: true
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.temperatura_studio
        icon_color: deep-orange
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: 0;
            }
      - type: entity
        entity: sensor.netatmo_casa_indoor_humidity
        icon_color: deep-orange
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: 0;
            }

I have also added this to my theme

# HA variables
  ha-card-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.16)
  ha-card-border-radius: 12px
  ha-card-border-width: 0

[Mattia2399]

you can get inspired if you want

[Imygaf]

I am using chips to show location of family members. At the moment I can only see the person icon and either the name or the state (home, away etc).
Is there any way to show the name of person and also the state so I can see who each chip relates to.

Thanks

[maurizio53 (Maurizio Fabiani)]

Will you share the code?

[Mattia2399]

as soon as I finish creating the home screen, of course

[jeroenvdd89 (Jeroen)]

I ‘kinda’ solved my issue with some card shenanigans:

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-entity-card
    entity: cover.rol_badkamer
    name: Rolluik
    icon: mdi:window-shutter
    tap_action:
      action: more-info
    hold_action:
      action: more-info
    double_tap_action:
      action: more-info
    fill_container: true
    style: |
      ha-card {
      border: none;
      }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: mdi:weather-sunset-up
        fill_container: false
        layout: vertical
        entity: input_boolean.zonsopgang_badkamer_rolluik
        icon_color: |-
          {% if is_state('input_boolean.zonsopgang_badkamer_rolluik','on') %}
          amber
          {% endif %}
        style: |
          ha-card {
          border: none;
          }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: mdi:arrow-up
        fill_container: false
        layout: vertical
        icon_color: |-
          {% if is_state('cover.rol_badkamer','open') %}
          grey
          {% else %}
          blue
          {% endif %}
        tap_action: null
        action: call-service
        service: cover.open_cover
        target:
          entity_id: cover.rol_badkamer
        data: {}
        hold_action:
          action: none
        double_tap_action:
          action: none
        style: |
          ha-card {
            border: none;
            }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: mdi:arrow-down
        fill_container: false
        layout: vertical
        icon_color: |-
          {% if is_state('cover.rol_badkamer','closed') %}
          grey
          {% else %}
          blue
          {% endif %}
        tap_action: null
        action: call-service
        service: cover.close_cover
        target:
          entity_id: cover.rol_badkamer
        data: {}
        hold_action:
          action: none
        double_tap_action:
          action: none
        style: |
          ha-card {
            border: none;
            }

[wgumaa (Waleed)]

Its a combination of themes.

I used Soft UI theme

https://community.home-assistant.io/t/lovelace-soft-ui-simple-and-clean-lovelace-configuration/159357

Then combined it with a bit of coding to “neumorphism” theme

https://github.com/VonWelter/neumorphism?fbclid=IwAR2mnVHFYWQ-Yv-GJHa-VKGGq4wGa_aqfHApDbW4upe36nb7fPfTm3CO1kQ

Hope that helps

[mhackdo18]

Hi Mattia
Can u share the code for the card

You cuccina and salloto ilike
Some Entity below thanks

[royle (roy)]

Hey, there

Does anyone know how to add word-warp to this CSS?

 card_mod:
      style:
        mushroom-shape-icon$: |
          .shape:after {
            content: "{{ state_attr(config.entity, 'current_temperature') | round(0) }}°";
            position: absolute;
            font-size: var(--card-primary-font-size);
            font-weight: bolder;
            {% set status = state_attr('climate.3family_room','hvac_action')
            %}

            {% if status == 'off' %}

            color: grey

            {% elif status == 'cooling' %}

            color: blue

            {% elif status == 'heating' %}

            color: red

            {% else %}

            color: grey

            {% endif %}
          }
          .shape {
            box-shadow: var(--ha-card-box-shadow) !important;
          }
        .: |
          ha-card {
            --ha-card-background: none;
            box-shadow: none;
            --ha-card-border-width: 0;
          }
          mushroom-shape-icon {
            --shape-color: white !important;
          }

[sarruman (Stratos)]

Hi, have you ever sorted this out?
I’m facing the same problem as you.
Thank you in advance!

[MARTWIN (Martinho)]

Getting really close to this, I’ll show you the result once it’s finished ^^

@edit

Buttons

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: |-
      {% if states('input_boolean.room_kitchen') == 'on' %}
      mdi:robot-excited-outline
      {% else %}
      mdi:robot-dead
      {% endif %}
    fill_container: true
    multiline_secondary: true
    entity: input_boolean.room_kitchen
    tap_action:
      action: toggle
    layout: horizontal
    hold_action:
      action: more-info
    icon_color: |-
      {% if states('input_boolean.room_kitchen') == 'on' %}
      blue-grey
      {% else %}
      disabled
      {% endif %}
    double_tap_action:
      action: navigate
      navigation_path: /lovelace/jarvis
    picture: ''
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            {% if is_state('input_boolean.room_kitchen', 'on') %}
            --icon-animation: tilt 4s steps(1) infinite, blink 4s infinite; 
            transform-origin: 50% 92%;
            {% endif %}
          }
          @keyframes tilt {
            0%, 100% { transform: rotate(0deg); }
            33% { transform: rotate(8deg); }
            66% { transform: rotate(-8deg); }
          }
          @keyframes blink {
            0%, 20%, 30%, 45%, 55%, 70%, 80%, 100% { clip-path: inset(0 0 0 0); }
            25% { clip-path: polygon(0 0, 100% 0, 100% 53%, 25% 52%, 24% 77%, 75% 77%, 76% 52%, 100% 52%, 100% 100%, 0 100%); }
            50%  { clip-path: polygon(0 0, 100% 0, 100% 53%, 51% 54%, 51% 76%, 76% 77%, 75% 53%, 100% 52%, 100% 100%, 0 100%); }
            75%  { clip-path: polygon(0 0, 100% 0, 100% 53%, 24% 53%, 24% 77%, 47% 77%, 47% 52%, 100% 52%, 100% 100%, 0 100%); }
          }
        .: |
          ha-card {
            box-shadow: none;
            background: rgba(0,0,0,0);
            text-align: center;
          }
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: >-
      {% if states('light.luzes_kitchen') == 'on' %}

      mdi:lightbulb-on-outline

      {% elif states('binary_sensor.luz_kitchen') == 'on' and
      states('light.luzes_kitchen') == 'off' %}

      mdi:weather-sunny

      {% else %}

      mdi:brightness-5

      {% endif %}
    fill_container: true
    multiline_secondary: false
    entity: binary_sensor.luz_kitchen
    layout: horizontal
    tap_action:
      action: more-info
    hold_action:
      action: navigate
      navigation_path: /lovelace/lights
    double_tap_action:
      action: none
    icon_color: >-
      {% if states('light.luzes_kitchen') == 'on' %}

      orange

      {% elif states('binary_sensor.luz_kitchen') == 'on' and
      states('light.luzes_kitchen') == 'off' %}

      amber

      {% else %}

      disabled

      {% endif %}
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            {% if states('light.luzes_kitchen') == 'on' %}
            --icon-animation: illumination 2s infinite;
            {% elif states('binary_sensor.luz_kitchen') == 'on' and states('light.luzes_kitchen') == 'off' %}
            --icon-animation: sunny 8s ease-in-out infinite alternate;
            {% endif %}
          }

          @keyframes sunny {
            70% { transform: rotate(360deg) scale(1); }
            80% { transform: scale(1); }
            90% { transform: scale(1.15); }
            100% { transform: scale(1); }
          }

          @keyframes illumination {
            0%, 100% { clip-path: inset(0 0 0 0); }
            80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
          }
        .: |
          ha-card {
            box-shadow: none;
            background: rgba(0,0,0,0);
            text-align: center;
          }
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: >-
      {% if states('binary_sensor.occupancy_kitchen') == 'on' and
      states('input_boolean.people_presence') == 'on' %}

      mdi:motion-sensor

      {% elif states('binary_sensor.occupancy_kitchen') == 'on' and
      states('input_boolean.people_presence') == 'off' %}

      mdi:cat

      {% else %}

      mdi:transition

      {% endif %}
    fill_container: true
    multiline_secondary: false
    entity: binary_sensor.occupancy_kitchen
    layout: horizontal
    tap_action:
      action: more-info
    hold_action:
      action: navigate
      navigation_path: /lovelace/secure
    double_tap_action:
      action: none
    icon_color: >-
      {% if states('binary_sensor.occupancy_kitchen') == 'on' and
      states('input_boolean.people_presence') == 'on' %}

      blue-grey

      {% elif states('binary_sensor.occupancy_kitchen') == 'on' and
      states('input_boolean.people_presence') == 'off' %}

      brown

      {% else %}

      disabled

      {% endif %}
    picture: ''
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            {% if states('binary_sensor.occupancy_kitchen') == 'on' and states('input_boolean.people_presence') == 'on' %}
            --icon-animation: clip 2s linear infinite;
            {% elif states('binary_sensor.occupancy_kitchen') == 'on' and states('input_boolean.people_presence') == 'off' %}
            --icon-animation: huh 4s ease infinite;
            transform-origin: 50% 60%;
            {% endif %}
          }

          @keyframes clip {
            50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
          }
          .shape {
            --shape-animation: motion 2s linear infinite;
          }
          @keyframes huh {
            0%, 10%, 75%, 100% { transform: rotate(0deg); }
            15% { transform: rotate(-25deg); }
            30%, 35% { transform: rotate(-40deg); }
            50% { transform: rotate(12deg); }
            65% { transform: rotate(-8deg); }
          }
        .: |
          ha-card {
            box-shadow: none;
            background: rgba(0,0,0,0);
            text-align: center;
          }
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: >-
      {% if states('binary_sensor.window_kitchen') == 'on' %} mdi:door {% elif
      states('cover.estore_cozinha') == 'opening' or
      states('cover.estore_cozinha') == 'closing' %} mdi:garage-variant {% elif
      states('cover.estore_cozinha') == 'open' and
      states('binary_sensor.window_kitchen') == 'off' and
      states('input_boolean.cycle_day') == 'on' %} mdi:window-closed-variant {%
      elif states('cover.estore_cozinha') == 'open' and
      states('binary_sensor.window_kitchen') == 'off' and
      states('input_boolean.cycle_night') == 'on' %} mdi:garage-open-variant {%
      elif states('cover.estore_cozinha') == 'closed' and
      states('binary_sensor.window_kitchen') == 'off' and
      states('input_boolean.cycle_day') == 'on' %} mdi:garage-variant {% elif
      states('cover.estore_cozinha') == 'closed' and
      states('binary_sensor.window_kitchen') == 'off' and
      states('input_boolean.cycle_night') == 'on' %} mdi:window-closed-variant
      {% elif states('binary_sensor.window_kitchen') == 'off' %}
      mdi:window-closed-variant {% endif %}
    fill_container: true
    multiline_secondary: false
    entity: binary_sensor.window_kitchen
    layout: horizontal
    tap_action:
      action: more-info
    hold_action:
      action: navigate
      navigation_path: /lovelace/secure
    double_tap_action:
      action: none
    icon_color: >-
      {% if states('binary_sensor.window_kitchen') == 'on' %} green {% elif
      states('cover.estore_cozinha') == 'opening' or
      states('cover.estore_cozinha') == 'closing' %} brown {% elif
      states('cover.estore_cozinha') == 'open' and
      states('binary_sensor.window_kitchen') == 'off' and
      states('input_boolean.cycle_day') == 'on' %} blue-grey {% elif
      states('cover.estore_cozinha') == 'open' and
      states('binary_sensor.window_kitchen') == 'off' and
      states('input_boolean.cycle_night') == 'on' %} blue-grey {% elif
      states('cover.estore_cozinha') == 'closed' and
      states('binary_sensor.window_kitchen') == 'off' and
      states('input_boolean.cycle_day') == 'on' %} disabled {% elif
      states('cover.estore_cozinha') == 'closed' and
      states('binary_sensor.window_kitchen') == 'off' and
      states('input_boolean.cycle_night') == 'on' %} disabled {% elif
      states('binary_sensor.window_kitchen') == 'off' %} disabled {% endif %}
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            {% if states('binary_sensor.window_kitchen') == 'on' %}
            --icon-animation: open 6s ease-in-out infinite;
            transform-origin: 30%;
            {% elif states('cover.estore_cozinha') == 'opening' or states('cover.estore_cozinha') == 'closing' %}
            --icon-animation: door 3s steps(1) infinite alternate;
            {% endif %}
          }

          @keyframes open {
            0%, 66% { transform: rotateY(0deg); }
            33% { transform: rotateY(-120deg); }
          }
          .shape {
            perspective: 45px;
          }
          @keyframes door {
            0% { clip-path: inset(0 0 0 0); }
            25%  { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 74%, 81% 74%, 81% 100%, 100% 100%, 100% 0); }
            50%  { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 60%, 81% 60%, 81% 100%, 100% 100%, 100% 0); }
            75% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 48%, 81% 48%, 81% 100%, 100% 100%, 100% 0); }
          }
        .: |
          ha-card {
            box-shadow: none;
            background: rgba(0,0,0,0);
            text-align: center;
          }

Kitchen (aka Cozinha)

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: input_boolean.room_kitchen
    primary: Cozinha
    secondary: |
      {{ states('sensor.temp_kitchen') | round(0) }}°C | {{
      states('sensor.humd_kitchen') | round(0) }}%
    icon: >

      {% if is_state('light.lightstrip_kitchen_light', 'on') %}

      mdi:fridge-bottom


      {% elif is_state('light.candeeiro_cozinha', 'on') %}

      mdi:fridge


      {% elif is_state('light.varanda_churrasqueira', 'on') %}

      mdi:balcony


      {% elif is_state('media_player.speaker_kt', 'playing') or
      is_state('media_player.speaker_kt', 'playing') %}

      mdi:volume-high


      {% else %}

      mdi:fridge-outline


      {% endif %}
    icon_color: >
      {% if is_state('light.lightstrip_kitchen_light', 'on') %} 

      {{ '#%02x%02x%02x' % state_attr('light.lightstrip_kitchen_light',

      'rgb_color') }}


      {% elif is_state('light.candeeiro_cozinha', 'on') or
      is_state('light.varanda_churrasqueira', 'on') %}

      amber


      {% elif is_state('media_player.speaker_kt', 'playing') or
      is_state('media_player.speaker_kt', 'playing') %}

      purple 


      {% else %}

      disabled


      {% endif %}
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    tap_action:
      action: navigate
      navigation_path: cozinha
    hold_action:
      action: call-service
      service: light.turn_off
      data:
        transition: 3
      target:
        area_id: kitchen
    double_tap_action:
      action: toggle
    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.1);
        } 
        :host {
          background: rgba(var(--rgb-primary-text-color), 0.025);
          --mush-icon-size: 76px;
          height: 66px;
          margin-left: -18px !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: input_boolean.vacuum_kitchen
            state: 'on'
        chip:
          type: template
          icon: |
            {% if states('input_boolean.vacuum_kitchen') == 'on' %}
            mdi:robot-vacuum {% elif states('input_boolean.vacuum_kitchen') ==
            'on' and states('vacuum.robot_cleaner') == 'returning' %}
            mdi:robot-vacuum {% endif %}
          icon_color: |
            {% if states('input_boolean.vacuum_kitchen') == 'on' and
            states('vacuum.robot_cleaner') == 'cleaning' %}
            pink
            {% elif states('input_boolean.vacuum_kitchen') == 'on' and
            states('vacuum.robot_cleaner') == 'returning' %}
            light-green
            {% else %}
            disabled
            {% endif %}
          tap_action:
            action: none
          hold_action:
            action: none
          content_info: 1
      - type: conditional
        conditions:
          - entity: binary_sensor.luz_kitchen
            state: 'on'
        chip:
          type: template
          icon: |
            {% if states('light.luzes_kitchen') == 'on' %}
            mdi:lightbulb-on-outline {% elif states('binary_sensor.luz_kitchen')
            == 'on' and states('light.luzes_kitchen') == 'off' %}
            mdi:weather-sunny {% else %} mdi:brightness-5 {% endif %}
          icon_color: |
            {% if states('light.luzes_kitchen') == 'on' %} orange {% elif
            states('binary_sensor.luz_kitchen') == 'on' and
            states('light.luzes_kitchen') == 'off' %} amber {% else %} disabled
            {% endif %}
          tap_action:
            action: none
          hold_action:
            action: none
          content_info: 2
      - type: conditional
        conditions:
          - entity: binary_sensor.occupancy_kitchen
            state: 'on'
        chip:
          type: template
          icon: |
            {% if states('binary_sensor.occupancy_kitchen') == 'on' and
            states('input_boolean.people_presence') == 'on' %}
            mdi:motion-sensor
            {% elif states('binary_sensor.occupancy_kitchen') == 'on' and
            states('input_boolean.people_presence') == 'off' %}
            mdi:cat
            {% else %}
            mdi:transition
            {% endif %}
          icon_color: |
            {% if states('binary_sensor.occupancy_kitchen') == 'on' and
            states('input_boolean.people_presence') == 'on' %}
            blue-grey
            {% elif states('binary_sensor.occupancy_kitchen') == 'on' and
            states('input_boolean.people_presence') == 'off' %}
            brown
            {% else %}
            disabled
            {% endif %}
          tap_action:
            action: none
          hold_action:
            action: none
          content_info: 3
      - type: conditional
        conditions:
          - entity: input_boolean.jarvis_ai
            state: 'on'
        chip:
          type: template
          icon: |
            {% if states('binary_sensor.window_kitchen') == 'on' %}
            mdi:door
            {% elif states('cover.estore_cozinha') == 'opening' or
            states('cover.estore_cozinha') == 'closing' %}

            mdi:garage-variant

            {% elif states('cover.estore_cozinha') == 'open' and
            states('binary_sensor.window_kitchen') == 'off' and
            states('input_boolean.cycle_day') == 'on' %}

            mdi:window-closed-variant

            {% elif states('cover.estore_cozinha') == 'open' and
            states('binary_sensor.window_kitchen') == 'off' and
            states('input_boolean.cycle_night') == 'on' %}

            mdi:garage-open-variant

            {% elif states('cover.estore_cozinha') == 'closed' and
            states('binary_sensor.window_kitchen') == 'off' and
            states('input_boolean.cycle_day') == 'on' %}

            mdi:garage-variant

            {% elif states('cover.estore_cozinha') == 'closed' and
            states('binary_sensor.window_kitchen') == 'off' and
            states('input_boolean.cycle_night') == 'on' %}

            mdi:window-closed-variant

            {% elif states('binary_sensor.window_kitchen') == 'off' %}

            mdi:window-closed-variant

            {% endif %}
          icon_color: |
            {% if states('binary_sensor.window_kitchen') == 'on' %} green {%
            elif

            states('cover.estore_cozinha') == 'opening' or
            states('cover.estore_cozinha')

            == 'closing' %} brown {% elif states('cover.estore_cozinha') ==
            'open' and

            states('binary_sensor.window_kitchen') == 'off' and

            states('input_boolean.cycle_day') == 'on' %} blue-grey {% elif

            states('cover.estore_cozinha') == 'open' and

            states('binary_sensor.window_kitchen') == 'off' and

            states('input_boolean.cycle_night') == 'on' %} blue-grey {% elif

            states('cover.estore_cozinha') == 'closed' and

            states('binary_sensor.window_kitchen') == 'off' and

            states('input_boolean.cycle_day') == 'on' %} disabled {% elif

            states('cover.estore_cozinha') == 'closed' and

            states('binary_sensor.window_kitchen') == 'off' and

            states('input_boolean.cycle_night') == 'on' %} disabled {% elif

            states('binary_sensor.window_kitchen') == 'off' %} disabled {% endif
            %}
          tap_action:
            action: none
          hold_action:
            action: none
          content_info: 4
      - type: conditional
        conditions:
          - entity: input_boolean.timer_kitchen
            state: 'on'
        chip:
          type: template
          icon: |
            {% if states('timer.kitchen_ceiling') == 'active' and
            states('timer.kitchen_daytime') == 'active' %}
            mdi:clock-time-seven


            {% elif states('timer.kitchen_ceiling') == 'active' and
            states('timer.kitchen_extra') == 'active' %}
            mdi:clock-time-ten


            {% elif states('timer.kitchen_ceiling') == 'active' and
            states('timer.kitchen_noble') == 'active' %}
            mdi:clock-time-five


            {% elif states('timer.kitchen_ceiling') == 'active' and
            states('timer.kitchen_late') == 'active' %}
            mdi:clock-time-one


            {% elif states('timer.kitchen_ceiling') == 'active' and
            states('timer.kitchen_tv') == 'active' %}
            mdi:clock-time-six


            {% elif states('timer.kitchen_ceiling') == 'active' %}
            mdi:clock-time-twelve


            {% elif states('timer.kitchen_ceiling') == 'idle' and
            states('timer.kitchen_daytime') == 'active' %}
            mdi:clock-time-seven-outline


            {% elif states('timer.kitchen_ceiling') == 'idle' and
            states('timer.kitchen_extra') == 'active' %}
            mdi:clock-time-ten-outline


            {% elif states('timer.kitchen_ceiling') == 'idle' and
            states('timer.kitchen_noble') == 'active' %}
            mdi:clock-time-five-outline


            {% elif states('timer.kitchen_ceiling') == 'idle' and
            states('timer.kitchen_late') == 'active' %}
            mdi:clock-time-one-outline


            {% elif states('timer.kitchen_ceiling') == 'idle' and
            states('timer.kitchen_tv') == 'active' %}
            mdi:clock-time-six-outline

            {% else %}
            mdi:clock-time-twelve-outline
            {% endif %}
          icon_color: |
            {% if states('timer.kitchen_daytime') == 'active' %}
            orange
            {% elif states('timer.kitchen_extra') == 'active' %}
            teal
            {% elif states('timer.kitchen_noble') == 'active' %}
            purple
            {% elif states('timer.kitchen_late') == 'active' %}
            deep-purple
            {% elif states('timer.kitchen_tv') == 'active' %}
            pink
            {% elif states('timer.kitchen_ceiling') == 'active' %}
            blue-grey
            {% else %}
            disabled
            {% endif %}
          tap_action:
            action: none
          hold_action:
            action: none
          content_info: 5
      - type: conditional
        conditions:
          - entity: input_boolean.trash_kt
            state: 'on'
        chip:
          type: template
          icon: mdi:delete-empty
          icon_color: red
          tap_action:
            action: none
          hold_action:
            action: none
          content_info: 6
      - type: conditional
        conditions:
          - entity: input_boolean.room_kitchen
            state: 'off'
        chip:
          type: template
          icon: mdi:chip
          icon_color: red
          tap_action:
            action: none
          hold_action:
            action: none
          content_info: 7
      - type: conditional
        conditions:
          - entity: media_player.speaker_kt
            state_not: unavailable
          - entity: media_player.speaker_kt
            state_not: 'off'
        chip:
          type: template
          icon: |
            {% if states('media_player.speaker_kt') == 'playing' %}
            mdi:speaker-wireless
            {% else %}
            mdi:speaker
            {% endif %}          
          icon_color: |
            {% if states('media_player.speaker_kt') == 'playing' %}
            purple
            {% else %}
            blue-grey
            {% endif %}          
          tap_action:
            action: none
          hold_action:
            action: none
          content_info: 8
      - type: conditional
        conditions:
          - entity: media_player.tv_kt
            state_not: unavailable
          - entity: media_player.tv_kt
            state_not: 'off'
        chip:
          type: template
          icon: |
            {% if states('media_player.tv_kt') == 'playing' %}
            mdi:speaker-wireless
            {% else %}
            mdi:speaker
            {% endif %}          
          icon_color: |
            {% if states('media_player.tv_kt') == 'playing' %}
            purple
            {% else %}
            blue-grey
            {% endif %}          
          tap_action:
            action: none
          hold_action:
            action: none
          content_info: 9
      - type: conditional
        conditions:
          - entity: alarm_control_panel.kitchen
            state: triggered
        chip:
          type: template
          icon: mdi:shield-alert-outline
          icon_color: red
          tap_action:
            action: none
          hold_action:
            action: none
          content_info: 10
    alignment: end
    card_mod:
      style:
        mushroom-conditional-chip:nth-child(1):
          mushroom-template-chip$: |
            ha-icon {
              animation: shake 4000ms ease-in-out infinite;
              transform-origin: 50% 68%;
              clip-path: polygon(0 0, 0 100%, 55% 100%, 34% 75%, 75% 41%, 85% %, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
            }
            @keyframes shake {
              0%, 100% { transform: rotate(-5deg) rotate(15deg); }
              50%  { transform: rotate(-10deg); }
              25%  { transform: rotate(-14deg) rotate(9deg); }
              75%  { transform: rotate(21deg) rotate(-16deg); }
            }
        mushroom-conditional-chip:nth-child(2):
          mushroom-template-chip$: |
            ha-icon {
              {% if states('light.luzes_kitchen') == 'on' %}
              animation: illumination 2s infinite;
              {% elif states('binary_sensor.luz_kitchen') == 'on' and states('light.luzes_kitchen') == 'off' %}
              animation: sunny 8s ease-in-out infinite alternate;
              {% endif %}        
            }

            @keyframes sunny {
              70% { transform: rotate(360deg) scale(1); }
              80% { transform: scale(1); }
              90% { transform: scale(1.15); }
              100% { transform: scale(1); }
              }
            @keyframes illumination {
              0%, 100% { clip-path: inset(0 0 0 0); }
              80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
              }
        mushroom-conditional-chip:nth-child(3):
          mushroom-template-chip$: |
            ha-icon {
              {% if states('binary_sensor.occupancy_kitchen') == 'on' and states('input_boolean.people_presence') == 'on' %}
              animation: clip 2s linear infinite;
              {% elif states('binary_sensor.occupancy_kitchen') == 'on' and states('input_boolean.people_presence') == 'off' %}
              animation: huh 4s ease infinite;
              transform-origin: 50% 60%;
              {% endif %}
            }

            @keyframes clip {
              50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
              }
            .shape {
              --shape-animation: motion 2s linear infinite;
              }
            @keyframes huh {
              0%, 10%, 75%, 100% { transform: rotate(0deg); }
              15% { transform: rotate(-25deg); }
              30%, 35% { transform: rotate(-40deg); }
              50% { transform: rotate(12deg); }
              65% { transform: rotate(-8deg); }
              }
        mushroom-conditional-chip:nth-child(4):
          mushroom-template-chip$: |
            ha-icon {

              {% if states('binary_sensor.window_kitchen') == 'on' %}
              animation: open 6s ease-in-out infinite;
              transform-origin: 30%;
              {% elif states('cover.estore_cozinha') == 'opening' or states('cover.estore_cozinha') == 'closing' %}
              animation: door 3s steps(1) infinite alternate;
              {% endif %}
            }


            @keyframes open {
              0%, 66% { transform: rotateY(0deg); }
              33% { transform: rotateY(-120deg); }
              }
            .shape {
              perspective: 45px;
              }
            @keyframes door {
              0% { clip-path: inset(0 0 0 0); }
              25%  { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 74%, 81% 74%, 81% 100%, 100% 100%, 100% 0); }
              50%  { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 60%, 81% 60%, 81% 100%, 100% 100%, 100% 0); }
              75% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 48%, 81% 48%, 81% 100%, 100% 100%, 100% 0); }
              }
        mushroom-conditional-chip:nth-child(5):
          mushroom-template-chip$: |
            ha-icon {
              animation: clock 5s ease-in-out infinite;
            }

            @keyframes clock {
              100% { transform: rotate(360deg) scale(1); }
              }
        mushroom-conditional-chip:nth-child(6):
          mushroom-template-chip$: |
            ha-icon {
              animation: ping 1.25s ease-out infinite ;
            }

            @keyframes ping {
              0% {
                box-shadow: 0 0 5px 1px rgba(var(--rgb-red), 1);
                border-radius: 10px
              }
              100% {
                box-shadow: 0 0 5px 10px rgba(var(--rgb-red), 0);
              }
        mushroom-conditional-chip:nth-child(7):
          mushroom-template-chip$: |
            ha-icon {
              animation: ping 1.25s ease-out infinite;
            }

            @keyframes ping {
              0% {
                box-shadow: 0 0 5px 1px rgba(var(--rgb-red), 1);
                border-radius: 10px
              }
              100% {
                box-shadow: 0 0 5px 10px rgba(var(--rgb-red), 0);
              }
        mushroom-conditional-chip:nth-child(8):
          mushroom-template-chip$: |
            ha-icon {
              {% if states('media_player.speaker_kt') == 'playing' %}
              animation: beat 1.3s ease-out infinite both;
              transform-origin: 50% 80%;
              {% endif %}
            }

            @keyframes beat {
              0% { transform: scale(0.95); }
              10% { transform: scale(1.0); }
              17% { transform: scale(1.10); }
              33% { transform: scale(1.05); }
              60% { transform: scale(0.95); }
              }
        mushroom-conditional-chip:nth-child(9):
          mushroom-template-chip$: |
            ha-icon {
              {% if states('media_player.tv_kt') == 'playing' %}
              animation: beat 1.3s ease-out infinite both;
              transform-origin: 50% 80%;
              {% endif %}
            }

            @keyframes beat {
              0% { transform: scale(0.95); }
              10% { transform: scale(1.0); }
              17% { transform: scale(1.10); }
              33% { transform: scale(1.05); }
              60% { transform: scale(0.95); }
              }
        mushroom-conditional-chip:nth-child(10):
          mushroom-template-chip$: |
            ha-icon {
              animation: ping 1.25s ease-out infinite ;
            }

            @keyframes ping {
              0% {
                box-shadow: 0 0 5px 1px rgba(var(--rgb-red), 1);
                border-radius: 10px
              }
              100% {
                box-shadow: 0 0 5px 10px rgba(var(--rgb-red), 0);
              }
              
        .: |
          ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: 0;
            margin-right: 6px;
          }
            
card_mod:
  style: |
    ha-card {
      height: 100px;

      {% if is_state('light.lightstrip_kitchen_light', 'on') %}
         background: rgba({{ (state_attr('light.lightstrip_kitchen_light', 'rgb_color') | join(',')) }},0.1)
      {% elif is_state('light.candeeiro_cozinha', 'on')  or is_state('light.varanda_churrasqueira', 'on') %}
         background: rgba(245, 192, 47, 0.1);
      {% elif is_state('media_player.speaker_kt', 'playing') or is_state('media_player.speaker_kt', 'playing') %}
         background: rgba(170, 0, 255, 0.1);
      {% elif is_state('input_boolean.room_kitchen', 'off') or is_state('input_boolean.trash_kt', 'on') or is_state('alarm_control_panel.kitchen', 'triggered') %}
         background: rgba(229, 20, 0, 0.25);
      {% endif %}
    }

[quinquelhas (Marco)]

Hey everybody,

How i add one picture in a mushroom-template-card?

I have like that

picture: /local/fotos/teste.jpg

but doesn’t work
someone can help?

[MikeMunich (Mike)]

A new question has arisen. To navigate between individual views, I use a small bar with chip cards.

The currently active page, I control with a different icon color. However, I would prefer to be able to “underline” the current page.

Does anyone of you have an idea if and how this would be possible?

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:home
        tap_action:
          action: navigate
          navigation_path: home
      - type: template
        icon: mdi:cog
        tap_action:
          action: navigate
          navigation_path: system
      - type: template
        icon: mdi:lan
        tap_action:
          action: navigate
          navigation_path: network
      - type: template
        icon: mdi:docker
        icon_color: disabled
        tap_action:
          action: navigate
          navigation_path: docker
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          --chip-font-size: 0.3em;
          --chip-height: 42px          
            }
style: |
  ha-card { 
    border-radius: 10px;
  }

[akkaria (Adam)]

I’m using the mushroom-cover card and would like to change the CSS of the buttons. For example shape, radius and/or size, box shadow etc but don’t seem to be having any luck.

I believe it is the .button class and i’m using card_mod but even then, when i add the code it doesn’t change anything. If i change this in the chrome inspector it updates on the screen, just doesn’t allow me to do it through Home Assistant using the card_mod. Anyone else have any luck or is this purely not possible?

[rhysb (Rhys)]

You can cater for the temp and color buttons like this.

Mushroom Light Slider

type: custom:mushroom-light-card
entity: light.rhys_bedside_light
show_brightness_control: true
tap_action:
  action: toggle
use_light_color: true
icon: mdi:led-strip-variant
show_color_temp_control: true
show_color_control: true
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape:active {
        transform: scale(1.2);
      }
    .: |
      mushroom-light-brightness-control, mushroom-light-color-temp-control,
      mushroom-light-color-control {      
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        opacity: 0.3;
        --control-height: 66px;
        --control-border-radius: var(--ha-card-border-radius, 12px);
        --rgb-disabled: var(--rgb-card-background-color);
      } 
      mushroom-state-item {
        z-index: 1;
        max-width: fit-content;
        margin-bottom: 0px;
        pointer-events: none;
      } 
      mushroom-shape-icon {
        pointer-events: auto;
      }  
      mushroom-button {
        position: absolute;
        width: calc(var(--control-height) * var(--control-button-ratio)) !important;
        height: var(--control-height) !important;
        top: var(--spacing);
        right: var(--spacing);
      }
      mushroom-button:nth-child(3) {
        right:  calc(2 *var(--spacing) + var(--control-height) * var(--control-button-ratio));
      }
      .actions :not(:last-child) {
        margin-right: 0px !important;
      }

[cob94440 (chris)]

Great work as usual.
For your media payer card, is there a way to bypass muted color from node red please

I launch radio flux so they have non album art. How tu have thé radio logo as image

Thé radio code IS like

type: entities
title: Radios
entities:

• type: custom:mini-media-player
  name: Master
  icon: mdi:speaker
  entity: media_player.media_group
  group: true
  source: icon
  volume_stateless: false
  shortcuts:
  align_text: left
  columns: 2
  buttons:
  - type: music
  id: http://stream.virginradio.fr/virgin.aac
  name: Virgin radio
  image: /local/images/Virgin Radio.jpg
  cover: /local/images/led-multi.jpeg
  - type: music
  id: http://stream.rfm.fr/rfm-wr2.mp3
  name: RFM Night Fever
  image: /local/images/RFM.jpg
  cover: /local/images/led-multi.jpeg
  - type: music
  id: http://radiomeuh.ice.infomaniak.ch/radiomeuh-128.mp3
  name: Radio Meuh
  image: /local/images/Radio Meuh.jpeg
  cover: /local/images/led-multi.jpeg
  - type: music
  id: http://jazz-wr06.ice.infomaniak.ch/jazz-wr06-64.aac
  name: Jazz Radio Funk
  image: /local/images/Jazz Radio.jpg
  cover: /local/images/led-multi.jpeg
  - type: music
  id: http://fusionfm.ice.infomaniak.ch:8000/fusionfm-192.mp3
  name: Fusion FM
  image: /local/images/Fusion.jpeg
  cover: /local/images/led-multi.jpeg
  - type: music
  id: http://ouifm.ice.infomaniak.ch/ouifm-high.mp3
  name: Oui FM
  image: /local/images/Oui FM.jpeg
  cover: /local/images/led-multi.jpeg
  - type: music
  id: http://radiofg.impek.com/max1.mp3
  name: Radio FG
  image: /local/images/FG.png
  cover: /local/images/led-multi.jpeg
  - type: music
  id: http://stream.rtsfm.com/rts-beziers
  name: RTS
  image: /local/images/RTS.jpg
  cover: /local/images/led-multi.jpeg
  artwork: cover
• type: custom:mini-media-player
  entity: media_player.jbl_leo
  icon: mdi:speaker
  group: true
  hide:
  controls: true
  info: true
• type: custom:mini-media-player
  entity: media_player.jbl_link_portable_a4c0
  icon: mdi:speaker
  group: true
  hide:
  controls: true
  info: true
  style: |
  ha-card {
  position: relative;
  background: url(’/local/images/led-multi.jpeg’) center / cover;
  –mini-media-player-icon-color: var(–primary-text-color)
  }