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

That’s great! I have another solution that I will post tonight.

1 Like

You should be able to most of that with Mushroom and card_mod now.

1 Like

Very nice, thanks

For the blur to work correctly on iOS we need to enable HW acceleration. To do that we can add the following lines:

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);

Once we add it to the Mushroom Media Player we have:

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

Thanks to @theandouz for help to track down the issue and testing :grin:

4 Likes

Hi,
how could I use this weather icon package with the Mushroom Template card? I would like to make my own weather card with template card and with this icon set.

Thanks in advanced!

Here is a version with full artwork that would suit a tablet layout. It dynamically adjusts to the aspect ratio of the media, but you can fix it to a square aspect ratio with aspect-ratio: 1 / 1;.

Mushroom Media Player Blurred Album Art Tablet Mode:

Mushroom Media Player Blended Blur Tablet

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;
        }
        ha-card:before {
          transform: translate3d(0,0,0);
          -webkit-transform: translate3d(0,0,0);
          content: "";

          background: url('/local/idle_art.png') center no-repeat;
          {% if not is_state(config.entity, 'idle') %}
            background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
          {% endif %}

          background-size: contain;
          margin: 4px 4px 16px;
          filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
          border-radius: var(--control-border-radius);

          {% set media_type = state_attr(config.entity, 'media_content_type') %}
          {% if media_type == 'tvshow' %}
            aspect-ratio: 16 / 9;
          {% elif media_type == 'movie' %}
            aspect-ratio: 2 / 3;
          {% else %}
            aspect-ratio: 1 / 1;
          {% endif %}
        }
  - 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);
      content: "";
      position: absolute;
      height: 100%;
      width: 100%;

      background: url('/local/idle_art.png') center no-repeat;
      {% if not is_state('media_player.currently_playing', 'idle') %}
        background: url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
      {% endif %}

      filter: blur(150px) saturate(200%);
      background-size: 100% 100%;
    }
    ha-card {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
    }

Updated with rounded art corners and idle album art.

40 Likes

Wow @rhysb you are a machine! Just want to thank you for your help in this group. I’ve been using HASS for +5 years and mushroom + your tips have changed my look and feel tremendously!

Would you have a solution (or alternative route) for my Q posted here?

1 Like

This is an example I did a while ago. It should get you started.

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    primary: >-
      {{ state_attr(entity, 'temperature') | round(1) }} °C
    secondary: '{{ states(entity) | title }}'
    icon: none
    entity: weather.weatherflow_hourly_based_forecast
    picture: >-
      {% set condition = states(entity) %} {% if condition == 'partlycloudy' and
      is_state('sun.sun', 'below_horizon') %}
        {% set condition = condition + '-night' %}
      {% endif %} /local/weather_icons/anim/{{ condition }}.svg
    card_mod:
      style: |
        ha-card {
          --icon-border-radius: 0;
        }
1 Like

You can do it like this.

Mushroom Title Single Line:

type: custom:mod-card
card:
  type: custom:mushroom-title-card
  title: Bathroom
  subtitle: >-
    {{ states('sensor.bathroom_sensor_temperature') | round(1) }}°C / {{
    states('sensor.bathroom_sensor_humidity') | round(1) }}%
card_mod:
  style:
    mushroom-title-card$: |
      .header {
        display: table !important;
      }
      .subtitle {
        display: table-cell;
        text-align: right;
        width: 100%;
      }
7 Likes

Et Voila! That worked. Thanks

1 Like

What is the best way to add a second row to the left of the double right row? (see photo)

Also I wonder; How do you add the content to make it all be in one row? I made a huge vertical and horiziontal card, that start to look quite messy now (see photo) Is it any easier way to do it, and still keep the row properly?


@rhysb jumped the gun a bit. Main title starts to wrap pretty quickly, especially on mobile but also on dekstop. See screenshot. Played around with the width % n above code but could not get if fixed. Suggestions?

I think I have the same type of layout. See this post.

My code (filling the gaps):
type: vertical-stack
cards:
  - type: custom:mod-card
    card:
      type: custom:mushroom-title-card
      title: Bedroom Robin
      subtitle: '{{ states(''sensor.04_038521_temperature'') | round(1) }}°C'
    card_mod:
      style:
        mushroom-title-card$: |
          .header {
            display: table !important;
          }
          .subtitle {
            display: table-cell;
            text-align: right;
            width: 65%;
          }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-light-card
        entity: light.led_strip_robin
        use_light_color: true
        show_brightness_control: true
        show_color_control: true
        show_color_temp_control: false
        fill_container: false
        collapsible_controls: false
        icon: mdi:led-strip-variant
      - type: custom:mushroom-light-card
        entity: switch.ikea_switch_lampjes_robin
        fill_container: true
        name: Robin Nightlight
        icon: mdi:lightbulb
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-light-card
        entity: light.slaapkamer_gitte_111
        show_brightness_control: true
        collapsible_controls: false
        use_light_color: false
      - entity: climate.robin
        type: custom:mushroom-climate-card
        hvac_modes:
          - heat_cool
        show_temperature_control: true
        tap_action:
          action: more-info
1 Like

I dont suppose anyone has a mushroom conditional card that shows when any of the Thermostats or TRVs are calling for heat ?

I can get a conditional card to work with just 1 main entity but I want the overall status to show me the source calling it in a mushroom card.

This is the code that give me the friendly name of the climate entity and lists them vertically

    {{
    states.climate|selectattr('state','eq','heat')|map(attribute='attributes.friendly_name')|list|join('\n')
    }}

I have 5 sources it could be, so if we can get into 2 columns to not have to expand the card, that would be amazing too.

This conditional card is not working as will only show on 1 condition and doesnt work with OR

image

Thanks in advance

Martyn

I’m trying to change the icon color (not the circle around it) to a permanent color in the theme. I can change it by adding:

mushroom-shape-icon$: |
      ha-icon {
       --icon-color: white!important;
      }  

on the card itself, but how can I add it with card-mod into the theme as a default?
`

EDIT:

  card-mod-card: |
    mushroom-shape-icon {
      --icon-color: white!important;
    }  

Vacuum part :slight_smile:

Home Assistant air conditioner button

image

  • icon picture changes depending on the state of the air conditioner.
type: custom:mushroom-template-card
secondary: '{{ states(''sensor.hue_motion_temp_yatak_odasi'')  }} °C'
primary: Midea
entity: input_boolean.notify_home3
icon: mdi:weather-partly-cloud
fill_container: false
multiline_secondary: false
tap_action:
  action: navigate
  navigation_path: klima
layout: vertical
picture: |
  {% if is_state('climate.146235046506144_climate', 'off') %}
    /local/icons/klima.png
  {% elif is_state('climate.146235046506144_climate', 'cool') %}
    /local/png/klimablue.PNG
  {% elif is_state('climate.146235046506144_climate', 'heat') %}
    /local/png/klimared.PNG
  {% else %}
    /local/icons/klima.png
  {% endif %}
style: |
  mushroom-card {
    background-size: 42px 42px;
  }
  mushroom-shape-icon {
    --shape-color: none !important;
  }  
    ha-card { 
      background: #1a1a2a;, 1.25);
      margin-top: 10px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 20px;
    }
card_mode:
  style: |
    :host {
      background: rgba(var(--rgb-primary-background-color), 0.5);
      border-radius: 50px;!important
    } 
line_width: 8
line_color: '#FF6384'

icon pictures :

klima :

klima red:

klima blue :

Current beahviour of the button navigates to air conditoner page but you can change it with editing tap_action part. For example this code directly turns on and off the airconditioner instead of navigating to the page.

type: custom:mushroom-template-card
secondary: '{{ states(''sensor.hue_motion_temp_yatak_odasi'')  }} °C'
primary: Midea
icon: mdi:weather-partly-cloud
fill_container: false
multiline_secondary: false
tap_action:
  action: toggle
entity: climate.146235046506144_climate
layout: vertical
picture: |
  {% if is_state('climate.146235046506144_climate', 'off') %}
    /local/icons/klima.png
  {% elif is_state('climate.146235046506144_climate', 'cool') %}
    /local/png/klimablue.PNG
  {% elif is_state('climate.146235046506144_climate', 'heat') %}
    /local/png/klimared.PNG
  {% else %}
    /local/icons/klima.png
  {% endif %}
style: |
  mushroom-card {
    background-size: 42px 42px;
  }
  mushroom-shape-icon {
    --shape-color: none !important;
  }  
    ha-card { 
      background: #1a1a2a;, 1.25);
      margin-top: 10px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 20px;
    }
card_mode:
  style: |
    :host {
      background: rgba(var(--rgb-primary-background-color), 0.5);
      border-radius: 50px;!important
    } 
line_width: 8
line_color: '#FF6384'

6 Likes

Hi Rhys, is it possible to change the font-size of the target temperature? I’ve been trying with no success (in #container .span ) :

        card_mod:
          style:
            mushroom-climate-temperature-control$:
              mushroom-input-number$: |
                #container {
                  padding: 0px;
                }
                #container .button {
                  height: 100%;
                  width: 30%;
                }
                #container .span {
                  font-size: 40px;
                }
                #container .button:nth-child(1) {
                  background: rgba(var(--rgb-blue), 0.2);
                }
                #container .button:nth-child(3) {
                  background: rgba(var(--rgb-red), 0.2);
                }
          .: |
            host {
              --mush-icon-size: 40px;
              --mush-card-primary-font-size: 28px;
              --mush-card-secondary-font-size: 22px;
            }

Thank you!

Working on my dashboard and I can’t seem to get the person card to show a mdi:car when the status is state is set to driving (or Driving). It shows the Home badge when the state is set to driving. all other badges seem to reference zones that I have configured in home assistant. Any way to get the badge to show a car when the person is driving?

Screen Shot 2022-12-07 at 10.09.56 AM

- type: custom:mushroom-person-card
  entity: person.ally
  use_entity_picture: true
  layout: vertical
  hide_name: true
  hide_state: false
  badge_icon: |-
      {% if is_state('person.ally', 'Driving') %}
      mdi:car
      {% endif %}
   card_mod:
      style: |
         ha-card {
         --badge-icon-size: 1.0em;
            }
         :host {
         --mush-icon-size: 84px;
         --mush-badge-size: 33px;
         height: 110px;
         margin-left: -18px !important;
             }
1 Like

Thanks, been having a play with this today and it seems to work but only if I hold the button… if I just click it the animation stops playing as soon as the mouse button is released.
Is there any way to force it to finish up the animation ?

Here is what I have so far;

          - type: custom:mushroom-template-card
            primary: ''
            secondary: Leave
            icon: mdi:hand-wave-outline
            layout: vertical
            icon_color: green
            tap_action:
              action: call-service
              service: scene.turn_on
              service_data:
                entity_id: scene.leave
            card_mod:
              style: |
                ha-card:active mushroom-shape-icon {
                    display: flex;
                    animation: wave 2.5s;
                }
                @keyframes wave {
                  0% { transform: rotate( 0.0deg); }
                  10% { transform: rotate(14.0deg); }  /* The following five values can be played with to make the waving more or less extreme */
                  20% { transform: rotate(-8.0deg); }
                  30% { transform: rotate(14.0deg); }
                  40% { transform: rotate(-4.0deg); }
                  50% { transform: rotate(10.0deg); }
                  60% { transform: rotate( 0.0deg); }  /* Reset for the last half to pause */
                  100% { transform: rotate( 0.0deg); }
                } 
                ha-card {
                  background: var(--card-background-color);
                  box-shadow: 0 0 4px 0px lightgrey !important;  
                  width: auto;
                  border-radius: 10px;
                  margin-bottom: 2px;
                } 

Also, I seem to be having issues with some animations since the above applies it to the entire shape not just the icon… so when I try to do clipping I get white blank parts… can’t for the life of me figure out the right syntax though that will still allow me to use ha-card:active and the normal ha-card styling, along with selecting the ha-icon too.