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

[Urbanpixels]

Good evening, would anybody be able to help here im really struggling to get my head around what i need to do.

I would like to change the entity icon colour based on the state of the entity.

I have the below:

type: custom:mushroom-entity-card
entity: sensor.myenergi_zappi_24887740_plug_status
layout: vertical
tap_action:
  action: none
hold_action:
  action: none
fill_container: true
name: Hedwig Status
double_tap_action:
  action: none

I tried adding below but it doesent work:

    icon_color: |2
        {% if is_state('sensor.myenergi_zappi_2440_plug_status', 'EV Connected') %}
          amber       
        {% elif is_state('sensor.myenergi_zappi_2740_plug_status', 'EV Disconnected') %}
          red
        {% elif is_state('sensor.myenergi_zappi_2440_plug_status', 'Charging') %}
          green
        {% endif %}

Any assistance would be appreciated

[dimitri.landerloos]

You will want to use the Mushroom Template card instead.

cant use template conditions in any of the other cards.

[Urbanpixels]

I tried that also, but i can’t get the template card to display the entities output (EV connected etc)

[dimitri.landerloos]

put in a template in the “primary” text field that states if is state EV Disconnected then EV Disconnected. just as you have done for your color

like this:

primary: |-
  {% if is_state('sensor.myenergi_zappi_24887740_plug_status', 'EV Connected') %}
    EV Connected      
  {% elif is_state('sensor.myenergi_zappi_24887740_plug_status', 'EV Disconnected') %}
    EV Disconnected
  {% elif is_state('sensor.myenergi_zappi_24887740_plug_status', 'Charging') %}
    Charging
  {% endif %}

[Urbanpixels]

@Urbanpixels

    {% if is_state('sensor.myenergi_zappi_24887740_plug_status', 'EV Connected') %}
          amber       
        {% elif is_state('sensor.myenergi_zappi_24887740_plug_status', 'EV Disconnected') %}
          red
        {% elif is_state('sensor.myenergi_zappi_24887740_plug_status', 'Charging') %}
          green
        {% endif %}

Thank you very much obviously i have lots to learn how these are put together.

The below seems to be working for me.

type: custom:mushroom-template-card
primary: Hedwig Status
secondary: |2-
    {% if is_state('sensor.myenergi_zappi_20_plug_status', 'EV Connected') %}
      EV Connected      
    {% elif is_state('sensor.myenergi_zappi_2440_plug_status', 'EV Disconnected') %}
      EV Disconnected
    {% elif is_state('sensor.myenergi_zappi_240_plug_status', 'Charging') %}
      Charging
    {% endif %}
icon: mdi:ev-plug-ccs2
entity: sensor.myenergi_zappi_24887740_plug_status
icon_color: |2-
      {% if is_state('sensor.myenergi_zappi_2740_plug_status', 'EV Connected') %}
            amber       
          {% elif is_state('sensor.myenergi_zappi_2440_plug_status', 'EV Disconnected') %}
            red
          {% elif is_state('sensor.myenergi_zappi_2440_plug_status', 'Charging') %}
            green
          {% endif %}
layout: vertical
multiline_secondary: true
tap_action:
  action: none
hold_action:
  action: none
double_tap_action:
  action: none

[dimitri.landerloos]

Hi All,
I have posted my guide HERE. for configuring mushroom cards with card mod.

i have hit the post limit on that topic for today, but i will continue to update it with each card. the sections are already written, so its just about getting to post each of them as a reply

@paddy0174 FYI

[BMWAddict (Jasper)]

Simple question I hope: I have a chips card with a fan switch toggle button. See code below (section entity switch alle badfans).

The issue I am having is - there are two fans, if one is on OR already off, when using this toggle button I turn one off and the other one. And not both on OR off. How to fix this? There is no condition option in the GUI editor. If I change the command to off or on - then I can’t toggle.

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: light.allelampenbinnen
    content_info: name
    tap_action:
      action: call-service
      service: light.turn_off
      target:
        entity_id: light.allelampenbinnen
      data: {}
    icon_color: accent
    name: Uit
    use_entity_picture: false
  - type: entity
    entity: switch.allebadfans
    icon: mdi:fan
    icon_color: accent
    content_info: none
    tap_action:
      action: call-service
      service: switch.toggle
      target:
        device_id:
          - abcaa141710f3f7bc300449d8ade9f8c
          - 7d89670c4a1e7b0222003514bfdb8124
      data: {}
  - type: weather
    entity: weather.forecast_thuis
    show_conditions: false
    show_temperature: true
  - type: entity
    entity: sensor.p1_meter_5c2faf040d18_active_power
  - type: entity
    entity: sensor.watermeter_3c39e72f739a_active_water_usage

[dimitri.landerloos]

Instead of calling a toggle service maybe call a script service that checks the status of each of the fans before changing the states.

So just make your script first. Then test until it works the way you expect.

And then call the script on tap instead like this:

tap_action:
  action: call-service
  service: script.yourscriptnameoridhere

[j.otte]

@dimitri.landerloos

card_mod:
  style: |
    ha-state-icon {
      animation

       card_mod: null
        style: |
          ha-state-icon {
            animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;' if states('sensor.wasmachine_watt') | float > 5 }}
              }
              @keyframes shake {
                0%, 100% { transform: translate(0, 0) rotate(0); }
                20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
                40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
                60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
                80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
              }
              @keyframes drum {
                50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
              }

is this good, he is now alwais animated and thats its not good

[xman111 (Craig)]

hey guys, trying to have a template card display it’s state as secondary information. I have a door sensor that the primary info is Front Door, i want the secondary info to say Open or Closed, or whatever the state is. Any help would be much appreciated.

[dimitri.landerloos]

Like this:

card_mod:
  style: |
    ha-state-icon {
      {{ 'animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;' if states('sensor.wasmachine_watt') | float > 5 }}
    }
    @keyframes shake {
      0%, 100% { transform: translate(0, 0) rotate(0); }
      20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
      40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
      60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
      80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
    }
    @keyframes drum {
      50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
    }

You had broken your if statement block because for you the if statement was combined with the animation.

This is why i prefer to do it like this. Just makes it easier to see what is going on.

card_mod:
  style: |
    ha-state-icon {
      {% if states('sensor.wasmachine_watt') | float > 5 %}
        animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
      {% else %}

      {% endif %}
    }
    @keyframes shake {
      0%, 100% { transform: translate(0, 0) rotate(0); }
      20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
      40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
      60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
      80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
    }
    @keyframes drum {
      50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
    }

[dimitri.landerloos]

Yes. Just add the below in your secondary (of course change with your own binary sensor.)

{% if states('binary_sensor.bedroom_wardrobe_right_contact') == 'on' %}
  Open
{% else %}
  Closed
{% endif %}

If you want it to instead show any state the entity is. Use this instead.

{{ states('yourdevicetype.yourdevicename') }}

[xman111 (Craig)]

thanks so much, worked perfectly.

[arythm]

Hey guys,

I am trying to implement the trash can animation. However, the stack in card kina gives me a headache.

I have managed to implement everything I wanted with ONE exception. In the screenshot you can kinda see that the border of the card with the lid animation is visible behind the blue.

It IS very hard to see here though. In my dashboard it is a fine gray line surrounding the blue.
I do not know how to get rid of it. Changing the height of the “lid animation” card does not change anything and I do not know what else to change.

Here is the code:

type: conditional
conditions:
  - entity: input_boolean.mulltonnenleerung
    state: 'off'
card:
  type: custom:stack-in-card
  cards:
    - type: custom:mushroom-template-card
      icon: mdi:trash-can
      entity: calendar.muell
      icon_color: |
        {% set state=state_attr('calendar.muell','message') %}
        {% if state=='Wertstoff' %}
          green
        {% elif state=='Papier' %}  
          blue
        {% else %}
          brown
        {% endif %}
      tap_action:
        action: navigate
        navigation_path: /calendar
      badge_color: ''
      primary: >-
        {% if (states('calendar.muell') == 'on') %} 
          Heute wird die {{state_attr('calendar.muell','message')}}tonne geleert.
        {% else %} Morgen wird die
        {{state_attr('calendar.muell','message')}}tonne geleert. {% endif %}
      secondary: |-
        {% if (states('calendar.muell') == 'on') %} 
          Mülltonne rausgestellt? 
        {% else %} 
         Rausstellen nicht vergessen.
        {% endif %}
      card_mod:
        style: |
          ha-card {
            border-color: {% if is_state_attr('calendar.muell','message', 'Wertstoff')  %} #008000 {% elif is_state_attr('calendar.muell','message', 'Papier') %} #0066ff {% else %} #8B4513 {% endif %};
            border-style: inset; border-width: 05px;
            background-color: {% if is_state_attr('calendar.muell', 'message', 'Wertstoff') %} rgb( 31 139 34 / 0.1) {% elif is_state_attr('calendar.muell', 'message', 'Papier')  %} rgb( 102 163 254 / 0.1) {% else %} rgb( 139 69 19 / 0.1){% endif %}; 
           }
          ha-state-icon {
            clip-path: inset(25% 0 0 0);
            }
    - type: custom:mushroom-template-card
      icon: mdi:trash-can
      icon_color: |
        {% set state=state_attr('calendar.muell','message') %}
        {% if state=='Wertstoff' %}
          green
        {% elif state=='Papier' %}  
          blue
        {% else %}
          brown
        {% endif %}
      card_mod:
        style: "ha-state-icon {\n  animation: lid 1s ease infinite;\n  clip-path: inset(0 0 75% 0);\n  transform-origin: 50% 25%;\n  }\n@keyframes lid {\n  0%, 50%, 80%, 100% { transform: translateY(0); }\n  10% { transform: translateY(-5px) rotate(-37deg); }\n  20% { transform: translateY(-5px) rotate(31deg); }\n  30% { transform: translateY(-5px) rotate(-25deg); }\n  40% { transform: translateY(-5px) rotate(19deg); }\n  60% { transform: translateY(-3px); }\n  }\n\nha-card {\n  width: 10px;\n  top: -72px;\n  left: 5px;\n  border: none;\n  height: 60px;               \n  }\t\n"
  card_mod:
    style: |
      ha-card {
        height: 78px;
        }

I appreciate the help!!

[dimitri.landerloos]

If i understand your question correctly the issue is the slight grey outline on the very edge of your entire card?

If so just try and add

border: none !important;

To your last ha-card section.

Also you had some issues in your structure for the animation in general. Below is it fixed. Will make it easier to diagnose issues in the future

type: conditional
conditions:
  - entity: input_boolean.mulltonnenleerung
    state: 'off'
card:
  type: custom:stack-in-card
  cards:
    - type: custom:mushroom-template-card
      icon: mdi:trash-can
      entity: calendar.muell
      icon_color: |
        {% set state=state_attr('calendar.muell','message') %}
        {% if state=='Wertstoff' %}
          green
        {% elif state=='Papier' %}  
          blue
        {% else %}
          brown
        {% endif %}
      tap_action:
        action: navigate
        navigation_path: /calendar
      badge_color: ''
      primary: >-
        {% if (states('calendar.muell') == 'on') %} 
          Heute wird die {{state_attr('calendar.muell','message')}}tonne geleert.
        {% else %} Morgen wird die
        {{state_attr('calendar.muell','message')}}tonne geleert. {% endif %}
      secondary: |-
        {% if (states('calendar.muell') == 'on') %} 
          Mülltonne rausgestellt? 
        {% else %} 
         Rausstellen nicht vergessen.
        {% endif %}
      card_mod:
        style: |
          ha-card {
            border-color: {% if is_state_attr('calendar.muell','message', 'Wertstoff')  %} #008000 {% elif is_state_attr('calendar.muell','message', 'Papier') %} #0066ff {% else %} #8B4513 {% endif %};
            border-style: inset; border-width: 05px;
            background-color: {% if is_state_attr('calendar.muell', 'message', 'Wertstoff') %} rgb( 31 139 34 / 0.1) {% elif is_state_attr('calendar.muell', 'message', 'Papier')  %} rgb( 102 163 254 / 0.1) {% else %} rgb( 139 69 19 / 0.1){% endif %}; 
          }
          ha-state-icon {
            clip-path: inset(25% 0 0 0);
          }
    - type: custom:mushroom-template-card
      icon: mdi:trash-can
      icon_color: |
        {% set state=state_attr('calendar.muell','message') %}
        {% if state=='Wertstoff' %}
          green
        {% elif state=='Papier' %}  
          blue
        {% else %}
          brown
        {% endif %}
      card_mod:
        style: |
          ha-state-icon {
            animation: lid 1s ease infinite; 
            clip-path: inset(0 0 75% 0);  
            transform-origin: 50% 25%;  
          }
          @keyframes lid { 
            0%, 50%, 80%, 100% { transform: translateY(0); }
            10% { transform: translateY(-5px) rotate(-37deg); }
            20% { transform: translateY(-5px) rotate(31deg); }
            30% { transform: translateY(-5px) rotate(-25deg); }
            40% { transform: translateY(-5px) rotate(19deg); }
            60% { transform: translateY(-3px); }
          }
          ha-card {
            width: 10px;
            top: -72px;
            left: 5px;
            border: none;
            height: 60px;
          }
  card_mod:
    style: |
      ha-card {
        height: 78px;
        border: none !important;
      }

[xman111 (Craig)]

what if i just want to show the last time the state changed as the secondary info?

[arythm]

I had the animation part the same way you wrote it. After saving it in HA and reopening the code it looked like what I posted… So I assumed it wouldn’t make much of a difference except in readability.
I will correct it again!

Thank you so much for your help. That was the last part I still had to fix to make it look like I wanted it!! That concludes hours of work

[dimitri.landerloos]

Thats a bit harder depending on your exact requirements and will never really be perfect as it wont survive a HA restart.

So it will restart at 0 when HA restarts no matter what.

But the best version i have found is this:

{%- set time = (as_timestamp(now()) - as_timestamp(states.binary_sensor.bedroom_wardrobe_right_contact.last_changed)) | int  %}
  {%- set minutes = ((time % 3600) // 60) %}
  {%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
  {%- set hours = ((time % 86400) // 3600) %}
  {%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
  {%- set days = (time // 86400) %}
  {%- set days = '{}d '.format(days) if days > 0 else '' %}
  {{ 'Less than 1 min' if time < 60 else days + hours + minutes }}

Its the most flexible i have found because it counts days as well. Most code you find for this only counts hours and resets at 24 hours unfortunately. This works perfectly like you’d expect

[injectx]

For some reason this card sometimes displays like this;

(which is good)

And sometimes like this:

(which is not good)

This last one throws errors in Chrome Developer Tools:

This the code of the card:

type: custom:vertical-stack-in-card
cards:
  - square: false
    columns: 2
    type: grid
    cards:
      - type: custom:mushroom-template-card
        primary: '{{states(''sensor.p1_meter_3c39e72cd756_active_power'')}} W'
        secondary: Stroom
        icon: mdi:power-plug
        icon_color: green
        entity: sensor.p1_meter_3c39e72cd756_active_power
      - type: custom:mushroom-template-card
        primary: '{{states(''sensor.gasverbruik_per_uur'')}} m³'
        secondary: Gas
        icon: mdi:gas-burner
        entity: sensor.gasverbruik_per_uur
        icon_color: blue
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.p1_meter_3c39e72cd756_active_power
        name: Temperature
        color: var(--green-color)
      - entity: sensor.gasverbruik_per_uur
        name: Humidity
        color: var(--blue-color)
        y_axis: secondary
    hours_to_show: 12
    points_per_hour: 6
    line_width: 3
    font_size: 50
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade

Any ideas? Thanks.

Edit #1: Saw a post in another topic:

@ascha191

My solution: Use stack-in-card instead of vertical-stack-in-card. No problems so far.

Going to try that now.

[j.otte]

please i dont not understand more, we have change but is not good working

    card_mod:
      style: |
        ha-state-icon {
          animation: spin 0.5s linear infinite reverse;' if states('sensor.hybride_pomp_power') | float > 24 }}
            border-radius: 50%;
            border: 8px dotted rgb(var(--rgb-red));
          }
          .shape {
            border: 4px dashed rgb(var(--rgb-green));
            {{ '--shape-animation: spin 2s linear infinite;' if states('sensor.hybride_pomp_power') | float > 24 }}
            --shape-color: none;
            --icon-symbol-size: 5px;
            --icon-size: 34px;
          }