Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

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

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.

Ekran Resmi 2022-06-13 12.41.29

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 ?

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

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

Sorry, donā€™t have any such lights to test with.

So, figured how to individually reference Chips.

more cookies

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.

14 Likes

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 :sweat_smile:

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 :slightly_smiling_face:

1 Like

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

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.

1 Like

Been trying to change font size on ā€˜chipsā€™ is that even possible?

Thanks!

Youā€™re my hero !!! works like a charm !

Is there any way to have larger ICONS ?

1 Like

Yep, like this.

jumbo

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

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

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.

1 Like

Try this: Mushroom Cards - Build a beautiful dashboard easily šŸ„ - #1230 by tempus2016

Try something like this:

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

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?

7 Likes

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

That didnā€™t work.

You have an extra space in front of card_mod.

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