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

[eggman (bertie basset)]

I’ve not tried it, but I think you can template the URL when you use the mushroom template card.

[SteffenDE (Steffen)]

No, it seems not working with mushroom template card. Everything can use templates but the actions can not use tempaltes I belive.

It opens the template statement as a sub for the ha url like:
http://ha.local:8123/dasboard-name/{{%20state_attr(‘sensor.sensor_location’,‘map_link’)%20}}

[eggman (bertie basset)]

The only other way I can think of is to have two conditional cards, only one ever shows, the URL is specified differently in each. Sound like more effort than it’s worth to me but you may want to do it badly enough

[Djowie]

The functionality of the GUI editor is retained with this method.

I will try :D. Thank you

doesn’t seem to be doing the same thing (nothing changes). Do you know what I’m doing wrong

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: sensor.dsmr_day_consumption_total_cost
    icon: mdi:currency-eur
    content: '{{ (states("sensor.dsmr_day_consumption_total_cost")) }}'
  - type: template
    entity: sensor.dsmr_day_consumption_electricity_merged
    icon: mdi:sine-wave
    content: >-
      {{ (states("sensor.dsmr_reading_electricity_currently_delivered") | float)
      * 1000 }} W
  - type: template
    entity: sensor.dsmr_consumption_gas_currently_delivered
    icon: mdi:gas-burner
    icon_color: >-
      {% set gas = (states("sensor.dsmr_consumption_gas_currently_delivered") |
      float ) %} 
        {% if gas > 0 %}
           white
        {% else %}
          disabled
        {% endif %}
    content: >-
      {% set gas = (states("sensor.dsmr_consumption_gas_currently_delivered") |
      float ) %} 
        {% if gas > 0 %}
           {{ gas }} m³
        {% else %}
          
        {% endif %}
  - type: template
    entity: sensor.hacs
    content: ''
    icon_color: |-
      {% if states('sensor.hacs') == "0" %}
      disabled
      {% else %}
      orange
      {% endif %}
    icon: mdi:store
    tap_action:
      action: navigate
      navigation_path: /hacs
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-card { 
        {% set daily_cost = (states("sensor.dsmr_day_consumption_total_cost") | float) %}
          --text-color:
        {% if daily_cost >= 20 %}
          rgb(var(--rgb-red))
        {% elif daily_cost >= 15 %}
          rgb(var(--rgb-orange))
        {% else %}
          rgb(var(--rgb-white))
        {% endif %};
      }
    mushroom-template-chip:nth-child(2)$: |
      ha-card { 
        {% set watt = (states("sensor.dsmr_reading_electricity_currently_delivered") | float) * 1000 %}
          --text-color:
        {% if watt >= 500 %}
          rgb(var(--rgb-red))
        {% elif watt >= 300 %}
          rgb(var(--rgb-orange))
        {% else %}
          rgb(var(--rgb-green))
        {% endif %};
      }
    mushroom-template-chip:nth-child(3)$: |
      ha-card {
        --text-color: orange
      }

[rhysb (Rhys)]

Your selector is incorrect. You should be using mushroom-chip instead of ha-card.

[rhysb (Rhys)]

Here is another Mushroom Media Player Album Art option and probably my favorite so far.

Mushroom Media Player Blended Blurred Album Art:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-media-player-card
    entity: media_player.currently_playing
    icon: mdi:play
    use_media_info: true
    use_media_artwork: false
    show_volume_level: false
    media_controls:
      - play_pause_stop
      - previous
      - next
    volume_controls:
      - volume_buttons
      - volume_set
    fill_container: false
    card_mod:
      style: |
        mushroom-shape-icon {
          display: flex;
          {% set media_type = state_attr(config.entity, 'media_content_type') %}
          {% if media_type == 'tvshow' %}
            --card-mod-icon: mdi:television-classic;
            animation: flicker 1s linear infinite alternate;
          {% elif media_type == 'movie' %}
            --card-mod-icon: mdi:movie-roll;
            animation: spin 2s linear infinite reverse;
          {% elif media_type == 'music' %}
            --card-mod-icon: mdi:music;
            animation: beat 1.3s ease-out infinite both;
          {% elif media_type == 'playlist' %}
            --card-mod-icon: mdi:music;
            animation: beat 1.3s ease-out infinite both;
          {% else %}
            --card-mod-icon: mdi:play;
          {% endif %}

          {{ 'animation: none;' if not is_state(config.entity, 'playing') }}

        }
        @keyframes flicker {
          0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
          32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
        }
        @keyframes beat {
          0%, 60% { --icon-symbol-size: 21px; }
          5%, 17%, 57% { --icon-symbol-size: 22px; }
          10%, 20%, 51% { --icon-symbol-size: 23px; }
          25%, 45% { --icon-symbol-size: 24px; }
          30%, 39% { --icon-symbol-size: 25px; }
          33% { --icon-symbol-size: 26px; }
        }
        ha-card {
          --ha-card-border-width: 0;
        }
  - type: conditional
    conditions:
      - entity: media_player.currently_playing
        state_not: 'off'
      - entity: media_player.currently_playing
        state_not: idle
    card:
      entity: media_player.currently_playing
      hide:
        icon: true
        name: true
        runtime: true
        source: true
        power: true
        state_label: true
        volume: true
        info: true
        progress: false
        controls: true
      more_info: false
      type: custom:mini-media-player
      toggle_power: false
      group: true
      card_mod:
        style:
          mmp-progress$: |
            paper-progress {
              {{ '--paper-progress-container-color: rgba(var(--rgb-indigo-color), 0.2) !important;' if is_state(config.entity, 'playing') }}
            }
          .: |
            ha-card {
              margin: 0px 12px 12px;
              --mmp-progress-height: 12px !important;
              height: var(--mmp-progress-height);
              --mmp-accent-color: rgb(var(--rgb-indigo-color));
              --mmp-border-radius: 12px !important;
              --ha-card-border-width: 0;
            }
card_mod:
  style: |
    ha-card::before {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
      {% if not is_state('media_player.currently_playing', 'idle') %}
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        background: url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
        filter: blur(150px) saturate(400%);
        background-size: 100% 100%;
      {% endif %}
    }
    ha-card {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
      --ha-card-border-width: 0;
      {% if not is_state('media_player.currently_playing', 'idle') %}
        background: url( '{{ state_attr("media_player.currently_playing", "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);

        {% if state_attr('media_player.currently_playing', 'media_content_type') == 'tvshow' %}
          background-size: auto 100%, cover;
        {% else %}
          background-size: 50% auto, cover;
        {% endif %}

        background-position: right;
        background-repeat: no-repeat;
        background-blend-mode: saturation;
      {% endif %}
    }

[Menthe]

I always wanted to use the mushroom media card for music. I use raspberry pi’s with squeezelite functionality and have not managed to get the multiroom buttons to work nicely with the media card.
At the moment i use mini-mediaplayer.

[Boostin4HP]

I love them and wish I could use them but it’s another one that doesn’t work on iOS. Here’s how the 2 new media cards you posted look on iOS.

[cob94440 (chris)]

Nice but whats is your entity currently playing?

[rhysb (Rhys)]

Have a look here:

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

I combine all my media players using a Universal Media Player: media_player: - platform: universal name: Currently Playing children: - media_player.lounge_tv - media_player.lounge - media_player.family_room_tv - media_player.family_room - media_player.office - media_player.bedroom - media_player.garage - media_player.elijahs_bedroom I then conditionally display the Universal Media Player when it is not off: type: conditional conditions…

[Tyfoon]

Yes! Thanks to this post

[Djowie]

</s> <s>type: custom:mushroom-chips-card</s> <s>chips:</s> <s> - type: template</s> <s> entity: sensor.dsmr_day_consumption_total_cost</s> <s> icon: mdi:currency-eur</s> <s> content: '{{ (states("sensor.dsmr_day_consumption_total_cost")) }}'</s> <s> - type: template</s> <s> entity: sensor.dsmr_day_consumption_electricity_merged</s> <s> icon: mdi:sine-wave</s> <s> content: >-</s> <s> {{ (states("sensor.dsmr_reading_electricity_currently_delivered") | float)</s> <s> * 1000 }} W</s> <s> - type: template</s> <s> entity: sensor.dsmr_consumption_gas_currently_delivered</s> <s> icon: mdi:gas-burner</s> <s> icon_color: >-</s> <s> {% set gas = (states("sensor.dsmr_consumption_gas_currently_delivered") |</s> <s> float ) %} </s> <s> {% if gas > 0 %}</s> <s> white</s> <s> {% else %}</s> <s> disabled</s> <s> {% endif %}</s> <s> content: >-</s> <s> {% set gas = (states("sensor.dsmr_consumption_gas_currently_delivered") |</s> <s> float ) %} </s> <s> {% if gas > 0 %}</s> <s> {{ gas }} m³</s> <s> {% else %}</s> <s> </s> <s> {% endif %}</s> <s> - type: template</s> <s> entity: sensor.hacs</s> <s> content: ''</s> <s> icon_color: |-</s> <s> {% if states('sensor.hacs') == "0" %}</s> <s> disabled</s> <s> {% else %}</s> <s> orange</s> <s> {% endif %}</s> <s> icon: mdi:store</s> <s> tap_action:</s> <s> action: navigate</s> <s> navigation_path: /hacs</s> <s>card_mod:</s> <s> style:</s> <s> mushroom-template-chip:nth-child(1)$: |</s> <s> mushroom-chip { </s> <s> {% set daily_cost = (states("sensor.dsmr_day_consumption_total_cost") | float) %}</s> <s> --text-color:</s> <s> {% if daily_cost >= 20 %}</s> <s> rgb(var(--rgb-red))</s> <s> {% elif daily_cost >= 15 %}</s> <s> rgb(var(--rgb-orange))</s> <s> {% else %}</s> <s> rgb(var(--rgb-white))</s> <s> {% endif %};</s> <s> }</s> <s> mushroom-template-chip:nth-child(2): |</s> <s> mushroom-chip { </s> <s> {% set watt = (states("sensor.dsmr_reading_electricity_currently_delivered") | float) * 1000 %}</s> <s> --text-color:</s> <s> {% if watt >= 500 %}</s> <s> rgb(var(--rgb-red))</s> <s> {% elif watt >= 300 %}</s> <s> rgb(var(--rgb-orange))</s> <s> {% else %}</s> <s> rgb(var(--rgb-green))</s> <s> {% endif %};</s> <s> }</s> <s> mushroom-template-chip:nth-child(3): |</s> <s> mushroom-chip {</s> <s> --text-color: orange</s> <s> }</s> <s>
Sorry for bothering you, but changing it to this doesn’t do anything as well. I must be missing something…

nvm it works <3
Don’t forget the $

[henrikrox]

Is there a way to show temperaturea AND humdity for like a room overview page? Just have figured out how to do one of them

[Steffen1988]

Hi guys out there.

I need some help from you to animate an icon. I want to cut off the uper half of the mdi:fountain when it’s off.

The state I want (upper half is missing):

The state thats now after the animation stops (icon is full restored):

I created a second keyframe inspired by the awesome solution from rhysb called no-fountain and find the right clip-path. How is it possible to get this clipping at the end of the animation? After 3 seconds blinking it stays with the default, full visible icon.

card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        {% if is_state('switch.bewasserung', 'on') %}
          --icon-animation: fountain 1.5s ease infinite;
        {% else %}
          --icon-animation: no-fountain 1s linear 3;
        {% endif %}
      }
      @keyframes fountain {
        0%, 100 { clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); }
        50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
        60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
        70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
        80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
      }
      @keyframes no-fountain {
        50% { clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%); }
      }

I am thankful for every help!

[WebPower (Karoly Papp)]

Hello!
Are you using a template card?

type: custom:mushroom-template-card
primary: Living Room
secondary: |-
  {{ states ('sensor.living_room_temp_aqara_temperature') | round(1)}}°C | {{
   states ('sensor.living_room_temp_aqara_humidity')}}%
icon: mdi:sofa
tap_action:
  action: navigate
  navigation_path: /lovelace-home/living-room
icon_color: ''

[henrikrox]

I am, ah im pretty stupid, thanks man greatly appreciate it

Can i also as if you dont mind how you get those icons down to the lower right?

[WebPower (Karoly Papp)]

Hello,

I hope this code helps.

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Gabi Room
    secondary: |-
      {{ states ('sensor.gabi_room_temp_temperature') | round(1)}}°C | {{
       states ('sensor.gabi_room_temp_humidity')}}%
    icon: mdi:bed
    tap_action:
      action: navigate
      navigation_path: /lovelace-home/gabi-room
  - type: custom:mushroom-chips-card
    alignment: end
    chips:
      - type: light
        entity: light.table_lamps_gabi_room
        content_info: none
        icon: mdi:lamp
        use_light_color: true
      - type: entity
        entity: media_player.homepod_gabi_room
        icon: phu:homepod-mini
        content_info: none
      - type: conditional
        conditions:
          - entity: binary_sensor.gabi_room_ms_iaszone
            state: 'on'
        chip:
          type: entity
          entity: binary_sensor.gabi_room_ms_iaszone
          icon_color: red
          content_info: none
    style: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
        --chip-spacing: 0px;
        --chip-padding: 0 0.2em
      }

[fastender]

Will this project become obsolete with the release of the December update for Home Assistant?

[chintito4ever]

What’s coming in December update?

[fastender]

The developer of this project now works in the Home Assistant team and in the latest version Mushroom will be integrated more or less ım Lovelace.

Link: 5 New Features in 2022.12 (Home Assistant) - YouTube