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

you can get inspired if you want :slight_smile:

aaa

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

Will you share the code?

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

1 Like

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

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;
            }
3 Likes

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

1 Like

Hi Mattia
Can u share the code for the card

You cuccina and salloto ilike
Some Entity below thanks

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;
          }

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

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

@edit
Captura de ecrã 2023-04-29 181619sadsa

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 %}
    }

3 Likes

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?

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;
  }

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?

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

Mushroom Light Slider

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;
      }
33 Likes

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)
    }

Hey community, this is a great project and a long thread. I have searched but haven’t found a clear answer. Here goes my question.

I want to use a card (entity or template) to show WAN status (connected) in the primary info slot and IP in secondary. The IP is an attribute of the entity WAN - a binary_sensor.

If I use an entity card, I can show ‘connected’ as primary but can’t find a way to get the attribute in the secondary. If I use a template card, I can get the state to show as ‘on’ in primary info and ip in the secondary - so using a template card seems to work best for this use case.

Can someone explain why the state is ‘on’ it is displayed as ‘connected’ when using the entity card? Is there a way to expose the ‘connected’ state/value using a template?

how can i check 2 sensor value in one “if” condition? this ist not working :frowning:

              {% if is_state('sensor.smart_state_of_charge', '100') && is_state('binary_sensor.openwb_cp1_autoladestatus', 'off')%}
                not charging

First of all, I’d like to state that I admire your work! U consist an inspiration to me, though I’m totally new to home assistant and your dashboard and views are something totally unreachable to me…!
However, I try to learn from your examples! :grinning:
Having said that, could you please share (an example of) the yaml of your dashboard ? I’ve read your posts about individual cards, but I’d like to copy- imitate your (ideal!) structure…!
I hope I don’t ask for much!
Thank you so much in advance!

1 Like

Hi @rhysb. Is it possible to do wider Chips card so will auto match screen size. Just now I have used padding to make it a little more wider.

type: custom:mushroom-chips-card
chips:
  - type: template
    tap_action:
      action: none;
    hold_action:
      action: call-service
      service: notify.mobile_app_sylwester_s_s21
      data:
        message: Ringing
        title: Find Phone
        data:
          ttl: 0
          importance: high
          priority: high
          tag: Find
          channel: alarm_stream
          timeout: 60
    icon: mdi:target
    icon_color: red
    content: Find Phone
alignment: center
card_mod:
  style: |
    ha-card {
      --chip-background: rgba(var(--rgb-red), 0.2);
      --chip-border-radius: var(--mush-control-border-radius, 12px);
      --chip-height: var(--mush-control-height, 36px);
      --chip-box-shadow: none;
      user-select: none;
      --chip-padding: 80px;
    }
    ha-card:active {
      --chip-background: rgba(var(--rgb-red), 0.4);
    }

2 Likes

I’m considering 3 columns for my mushroom dashboard by removing the icon to create more screen real estate - see tile Lounge below. However at the moment the icon turns orange when the light in the room is on. Could I instead turn the whole tile orange if the light in the room is on? Or if that’s not possible could I ad least add a batch and change batch color accordingly?

image

This is my code with the icon

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: Lounge
    secondary: >-
      🌡️{{ states('sensor.atc_f3d3_temperature') | round(1) }}°C 🔋{{
      states('sensor.atc_f3d3_battery') | round(0) }}%
    icon: ''
    entity: light.controller_rgbw_22854b
    tap_action:
      action: navigate
      navigation_path: lounge
    hold_action:
      action: toggle
    icon_color: |-
      {% if is_state('switch.kogan01', 'on') %}
        orange
      {% endif %}
    picture: ''
    badge_icon: mdi:home
  - type: custom:mushroom-template-card
    primary: Kitchen
    secondary: >-
      🌡️{{ states('sensor.atc_b49c_temperature') | round(1) }}°C 🔋{{
      states('sensor.atc_b49c_battery') | round(0) }}%
    icon: mdi:home
    entity: light.controller_rgbw_22854b
    tap_action:
      action: navigate
      navigation_path: kitchen
    hold_action:
      action: toggle
    icon_color: |-
      {% if is_state('light.controller_rgbw_22854b', 'on') %}
        orange
      {% endif %}
    badge_icon: ''
  - type: custom:mushroom-template-card
    primary: Hello, {{user}}
    secondary: How are you?
    icon: mdi:home