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

[weemaba999 (Bart Weemaels)]

Hi @rhysb ,

I’m trying to get this working for a template card where I want the icon to wobble instead of the whole card (your example fit into above example). Somehow it doesn’t work. Can you see what’s missing, or is wobbling not a feature for a mushroom-shape-icon ?

card_mod: null
style: |
  {% set state=states('binary_sensor.drying_machine') %}
  {% if state == 'on' %}
    mushroom-shape-icon {
       animation: wobbling 1s linear infinite alternate;
       animation-duration: 0.1s;
  {%- else -%}
       animation-duration: 0.0s;
  {%- endif %}
        }
  @keyframes wobbling {
     0% {
        transform: rotate(-5deg);
        }
     100% {
        transform: rotate(5deg);
        }
       }
        ha-card {
            --chip-box-shadow: 0px 0px;
            width: 66px;
            border-radius: 30px;
            margin-left: auto;
            margin-right: auto;
                 }
entity: binary_sensor.drying_machine
fill_container: false
icon: mdi:tumble-dryer
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''green'' }}'
layout: vertical
multiline_secondary: false
primary: Droog
secondary: '{{ ''On'' if is_state(entity, ''on'') else ''Off'' }} '
tap_action:
  action: more-info
type: custom:mushroom-template-card

Thanks a lot in advance !

Kr,

Bart

[berkans (Berkan Sezer)]

I made some history stats entities for tracking the time I spent at home or away.

Time are being showed in a translated state like 36,24 is shown as 36,78.

But when I use the UI entities it is shown correctly such as :

Is there a way to display time based entites like that in Mushroom ?

[poudenes]

My lights are RGBWW. So for color it use RGB for kelvin (color_temp) it use color_temp and leave the RGB part alone.

[rhysb (Rhys)]

Try this:

entity: binary_sensor.drying_machine
fill_container: false
icon: mdi:tumble-dryer
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''green'' }}'
layout: vertical
multiline_secondary: false
primary: Droog
secondary: '{{ ''On'' if is_state(entity, ''on'') else ''Off'' }} '
tap_action:
  action: more-info
type: custom:mushroom-template-card
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        {% set state = states(config.entity) %}
        {% if state == 'on' %}
          --icon-animation: wobbling 0.1s ease-in-out infinite alternate;
        {% endif %}
      }
      @keyframes wobbling {
        0% {
          transform: rotate(-5deg);
        }
        100% {
          transform: rotate(5deg);
        }
      }
    .: |
      ha-card {
        width: 66px;
        border-radius: 30px;
        margin-left: auto;
        margin-right: auto;
      }

[rhysb (Rhys)]

Sorry, don’t have any such lights to test with.

[rhysb (Rhys)]

So, figured how to individually reference Chips.

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:cookie
    icon_color: brown
    content: 1 Cookie
  - type: template
    icon: mdi:cookie
    icon_color: brown
    content: 2 Cookies
  - type: template
    icon: mdi:cookie
    icon_color: brown
    content: 3 Cookies
card_mod:
  style:
    mushroom-template-chip:nth-child(3)$: |
      ha-icon {
        animation: rotation 1s linear infinite;
      }
      @keyframes rotation {
        100% {
          transform: rotate(360deg);
        }
      }

Just change the number in nth-child(n) for the appropriate Chip.

[piitaya (Paul)]

Be careful when you use card_mod. I will not bring card_mod retro-compatibility accros updates. A code refactoring can break your all dashboard

Styling using ha-card and mushroom css variables is safe but styling using nested selector is unsafe with updates.
I think you should use button-card if you want better customization

[QuickSwitchLK (Luke)]

Thanks rhysb! with the above code I was able to work out my wrap issue too.

type: grid
cards:
  - type: custom:mushroom-entity-card
    entity: switch.front_living_room_watch_fetch_tv
    fill_container: true
    layout: vertical
    card_mod:
      style:
        mushroom-state-info:
          $: |
            .primary {
              white-space: normal !important;
            }

Thank-you Thank-you. Thank-you.
It was driving me crazy for 3 weeks now. lol.

[cowboysdude (John Wade)]

Been trying to change font size on ‘chips’ is that even possible?

Thanks!

[weemaba999 (Bart Weemaels)]

You’re my hero !!! works like a charm !

Is there any way to have larger ICONS ?

[rhysb (Rhys)]

Yep, like this.

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:elephant
    content: Jumbo Size
    icon_color: grey
    card_mod:
      style: |
        ha-card {
          --chip-font-weight: normal;
          --chip-font-size: 20px;
        }

[rhysb (Rhys)]

Sure, like this.

type: custom:mushroom-template-card
primary: Jumbo
secondary: ''
icon: mdi:elephant
icon_color: grey
card_mod:
  style: |
    :host {
      --mush-icon-size: 300px;
    }

[Danny2100]

For some reason I can’t get the snowflake to rotate when it’s running. Do you know what I am doing wrong?

type: custom:stack-in-card
keep:
  margin: false
  box_shadow: false
  background: false
cards:
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-template-card
        style: |
          ha-card {
            padding-bottom: 14px !important;
          }
        primary: Daniels
        secondary: |
          Currently: {{ state_attr('climate.daniel_s', 'hvac_action') }}
        icon: |-
          {% set mode = states('climate.daniel_s') %}
          {% if mode == 'off' %}
          mdi:power
          {% elif mode == 'cool' %}
          mdi:snowflake
          {% elif mode == 'heat' %}
          mdi:fire
          {% else %}
          mdi:home-thermometer
          {% endif %}
        icon_color: |-
          {% set status = state_attr('climate.daniel_s','hvac_action') %}
          {% if status == 'idle' %}
          grey
          {% elif status == 'cooling' %}
          blue
          {% elif status == 'heating' %}
          red
          {% else %}
          grey
          {% endif %}
           card_mod: 
           styles: |
            @keyframes rotation {
                0% {
                  transform: rotate(0deg);
                }
                100% {
                  transform: rotate(360deg);
                }
              }
              ha-card {
                --icon-box-shadow: 0px 0px;
                animation: rotation linear infinite;
                {%- set status = state_attr('climate.daniel_s','hvac_action') %}
                {%- if status == 'cooling' or status == 'heating' %}
                 animation-duration: 3s;
                {%- endif %}
                }
        entity: climate.daniel_s
        tap_action:
          action: more-info

There’s more to the card than the code I posted, I only posted the relevant bit as the rest was unecessary for the post.

[tempus2016 (Tempus)]

Try this: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #1230 by tempus2016

[tempus2016 (Tempus)]

Try something like this:

            ha-icon {
              animation: rotation 1s linear infinite;
            }
            @keyframes rotation {
              0% {
                transform: rotate(0deg);
              }
              100% {
                transform: rotate(360deg);
              }

[snoekieboe (Roel)]

Don’t get me wrong… i very much like all the things we are doing with/to the mushroom cards but…

Aren’t we moving far far away from it’s intention? My understanding of mushroom cards was to be able to build a “beautiful dashboard easily”. With all the added code and add-ons (stack-card, card mod) aren’t we at risk of (re)creating UI Lovelace minimalist and in the end have so much overlap we can get rid of one?

[zakm (Michal Zak)]

Hello Guys, I would like to ask you I have issue with installing blueprints it shows me this. Do you have any tips how to solve it? Thank you in advance

[Danny2100]

That didn’t work.

[rhysb (Rhys)]

You have an extra space in front of card_mod.

[snoekieboe (Roel)]

Button Card and Auto Entities are front end addons you need to install through HACS. did you do that?