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

here’s a start for Auto Entities.
read through the link above and fine tune what you want to display.

type: custom:auto-entities
card:
  square: false
  type: grid
  columns: 2
card_param: cards
filter:
  include:
    - domain: sensor
      state: '1'
      options:
        type: custom:mushroom-entity-card
        layout: horizontal
  exclude:
    - state: 'off'
    - state: unknown
show_empty: true
sort:
  method: friendly_name

I guess no then

Can some please help me animate this? Trying to get the fan to spin…
I feel the indentation is off but struggling to figure it out:

type: custom:mushroom-chips-card
chips:
  - type: template
    tap_action:
      action: navigate
      navigation_path: '#fan'
    hold_action:
      action: more-info
    double_tap_action:
      action: toggle
    entity: fan.fan
    icon: |-
      {% if is_state(entity, 'on') %}
        mdi:fan
      {% else %}
        mdi:fan-off
      {% endif %}
    icon_color: |-
      {% if is_state(entity, 'on') %}
        #9CAFAA
      {% else %}
        #B4B4B8
      {% endif %}
    card_mod:
      style: |
        ha-card {
          --chip-background: {{ '#E8EFCF' if is_state(config.entity, 'on') else '#F6F5F2' }};
          box-shadow: '' !important;
          justify-content: center;
          --chip-height: 35px;
          --chip-border-radius: 10px;
          --chip-icon-size: 20px;
          --chip-font-size: 10px;
          --text-color: {{ '#9CAFAA' if is_state(config.entity, 'on') else '#B4B4B8' }};
          font-style: bold;
          font-variant: small-caps;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
          font-family: "Roboto";
          font-weight: bolder;
          width: '' !important;
          min-width: '' !important;
          }
      .: |          
        {% if is_state(config.entity,'on') %}  
         ha-state-icon {
           animation: spin 1.0s linear infinite;
         }
         @keyframes wobbling {
           0% {transform: rotate(-10deg);}
           100% {transform: rotate(10deg);}
         }
         {% else %}
         ha-state-icon {
           animation: spin 5s linear infinite;
         }
         @keyframes wobbling {
           0% {transform: rotate(-10deg);}
           100% {transform: rotate(10deg);}
         }
         {% endif %} 
  1. i would recommend not putting if statements around elements unless strictly neccesary, so like this instead:
      ha-state-icon {
        {% if is_state(config.entity,'on') %}
          animation: spin 1.0s linear infinite;
        {% else %}
          animation: spin 5s linear infinite;
        {% endif %}
       }
       @keyframes wobbling {
         0% {transform: rotate(-10deg);}
         100% {transform: rotate(10deg);}
       }
       @keyframes wobbling {
         0% {transform: rotate(-10deg);}
         100% {transform: rotate(10deg);}
       }
  1. You have the same keyframes twice for no reason it seems.
      ha-state-icon {
        {% if is_state(config.entity,'on') %}
          animation: spin 1.0s linear infinite;
        {% else %}
          animation: spin 5s linear infinite;
        {% endif %}
       }
       @keyframes wobbling {
         0% {transform: rotate(-10deg);}
         100% {transform: rotate(10deg);}
       }
  1. you actually arent even using those keyframes because you are using the spin animation in your animation code instead which is built into mushroom. wobbling isnt a built in one, so you would need keyframes, but you arent using it.
      ha-state-icon {
        {% if is_state(config.entity,'on') %}
          animation: spin 1.0s linear infinite;
        {% else %}
          animation: spin 5s linear infinite;
        {% endif %}
       }
  1. When addressing icons in chips you cant target the chip directly. you need to go through the main chip card, like this (nth-child, being the number of the chip you are targetting):
type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:test-tube
    icon_color: green
    content: Test
    entity: switch.office_screen_left
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        {% if is_state(config.entity,'on') %}
          animation: spin 1.0s linear infinite;
        {% else %}
          animation: spin 5s linear infinite;
        {% endif %}
      }
  1. this also means that unfortunately that we cant use config.entity to target the entity in the chip, as it isnt passed to the main chip card. so you have to specify the entity in your if statement.
type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:test-tube
    icon_color: green
    content: Test
    entity: switch.office_screen_left
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        {% if is_state('fan.fan','on') %}
          animation: spin 1.0s linear infinite;
        {% else %}
          animation: spin 5s linear infinite;
        {% endif %}
      }
  1. this is from experience, the built in animations like spin, dont always seem to react well in chips on all browsers, so i would add keyframes for it just in case.
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        {% if is_state('fan.fan','on') %}
          animation: spin 1.0s linear infinite;
        {% else %}
          animation: spin 5s linear infinite;
        {% endif %}
      }
      @keyframes spin {
        0% {transform: rotate(0deg);}
        100% {transform: rotate(360deg);}
      }

so final it would look like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    tap_action:
      action: navigate
      navigation_path: '#fan'
    hold_action:
      action: more-info
    double_tap_action:
      action: toggle
    entity: fan.fan
    icon: |-
      {% if is_state(entity, 'on') %}
        mdi:fan
      {% else %}
        mdi:fan-off
      {% endif %}
    icon_color: |-
      {% if is_state(entity, 'on') %}
        #9CAFAA
      {% else %}
        #B4B4B8
      {% endif %}
    card_mod:
      style: |
        ha-card {
          --chip-background: {{ '#E8EFCF' if is_state(config.entity, 'on') else '#F6F5F2' }};
          box-shadow: '' !important;
          justify-content: center;
          --chip-height: 35px;
          --chip-border-radius: 10px;
          --chip-icon-size: 20px;
          --chip-font-size: 10px;
          --text-color: {{ '#9CAFAA' if is_state(config.entity, 'on') else '#B4B4B8' }};
          font-style: bold;
          font-variant: small-caps;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
          font-family: "Roboto";
          font-weight: bolder;
          width: '' !important;
          min-width: '' !important;
        }
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        {% if is_state('fan.fan','on') %}
          animation: spin 1.0s linear infinite;
        {% else %}
          animation: spin 5s linear infinite;
        {% endif %}
      }
      @keyframes spin {
        0% {transform: rotate(0deg);}
        100% {transform: rotate(360deg);}
      }
3 Likes

Thank you so much for taking the time to break it down so well - it’ll be clear for anyone who reads this is the future as well.

Can you let me know what are the default animations built into Mushroom cards and how would I go about using them?

Is it just adding the below to the main chip card (nth-child)?

card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
          animation: spin 1.0s linear infinite;

and replace the spin with the respective animation name?

if you haven’t already read his guide it’s definitely worth reading. everything and more is there for animations, states which ones are built in.

1 Like

Is there any way to dynamic flex/resize mushroom template cards?

I’d like the card to cover the whole row if there is no conditional card showing up and adjust its width accordingly if a conditional card is active at the end of the same row

Hi, I have a simple chip card that is a tracker entity. I can only have it show state or name. How can I make it show name AND state?

something like this?

type: custom:mushroom-chips-card
chips:
  - type: template
    content: |-
      {{ state_attr('device_tracker.simonsphone', 'friendly_name') }}
      {{ states('device_tracker.simonsphone') }}
    icon: mdi:home
    icon_color: blue
card_mod:
  style: |
    ha-card {
      width: 30px ;
    }

1 Like

Precisely that! Thank you

Climate card, is there a way I can specify an alternative temp sensor rather than the default one that is picked up from my aircon unit, which is not accurate. TiA :ok_hand:t2:

Hi

Im trying to simplify one of my light cards. Right now I have pool lights that have call it 10 different colors they can change to which are all listed in effect. So what happens right now is when I go to turn on the light it pops up another box to turn the light on or off but also has a drop down with all the color lights listed under effect. I would like to have that drop down on the main light card instead of a separate pop up window so that I can choose the color and then light it be set that way. Is there anyway to handle this?

there’s a couple of custom cards that I can think of that will do what I think your after…

there’s Light entity card

and

RGB Light card
light

I did something similar and used RGB light card with mushroom light card and used stack in card to make it look like one card

Hi everybody!

I am experiencing an unexpected behaviour with Mushroom Cards, in particular the mushroom-number-card.

I have bars that are fully filled even if the state of the card (displayed entities are sensors) are less than 100%.

In the following an explicative image:

image

What am I doing wrong?

The mushroom number card is only supposed to be used for input_number. or number. entities.

so only entities where the number can be changed by the user. it is slider, not a bar.

if you want bars that are filled in based on a number look into the bar card. you can then style it to be similar to the mushroom cards like i have here:

Hello, for a few weeks now I have had the problem that I can no longer switch off the light and the Sybol no longer lights up when the light is on. Have there been any changes made by Home assitant and what can I change to make it work again? Thanks in advance.

there hasn’t been any changes.
does the light work with a standard entity card ?
or with a mushroom template card?

type: custom:mushroom-template-card
primary: kitchen
secondary: ''
icon: mdi:light-switch
entity: light.kitchen_wall_lamp
tap_action:
  action: toggle
icon_color: |-
  {% set state = states('light.kitchen_wall_lamp') %}
  {% if state >= "on" %} green
  {% else %} grey
  {% endif %}

This is the code:

I am not really gifted in this area, and have used a guide on youtube from everything smart home. It all worked in the beginning.

what integration are you using for the light ?
if you goto developer tools then the STATES tab and find the light entity what is the state of the light?

Sorry I should have been more clear, these aren’t your typical RGB lights that can change a million colors, there are 10 or so defined colors that change based on the effect lists. They change colors by turning the light on and off until it gets to the desired color. I assume the color sequence is based on the integration(Jandy iAquaLink). With that being said I don’t believe the RGB light card would do the trick. All I’m really trying to do is eliminate the pop up of another window that shows on/off and the effect drop down box. I would like the drop down box in the main mushroom light card if possible.