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

[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;
          }

[ffm777 (Carlo)]

Is it possible to change the background color of a chip card depending on the state of a sensor? I know that the icon_color can be changed, but I need to change the background. Any help would be appreciated!

[dimitri.landerloos]

You will need to use card mod.

Look at my guide here

Mushroom Cards Card Mod Styling/Config Guide

This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. Below info is true as of Mushroom Version 3.2.2 and Card Mod Version 3.4.1 (you can also optionally use a theme like i do. i use Minimalist Version 1.3.7). links to each post: Alarm Control Panel Card Chips Card Climate Card Cover Card Entity Card Fan Card Humidifier Card Number Card Lock Card Light Card Media Card …

Look first at the section called extra card mod info and then templating inside of card mod.

Then look at any card styling section for any of the cards in the comments of the post

[ffm777 (Carlo)]

@dimitri.landerloos

Look at my guide here

This is a great resource. Didn’t know that yet! Many thanks for creating it. Now I know how it works!

[dimitri.landerloos]

Firstly look at your section here:

animation: spin 0.5s linear infinite reverse;' if states('sensor.all_standby_energy') | float > 7 }}

You dont have a ’ in front of animation despite the fact that the animation section ends with one.

animation: spin 0.5s linear infinite reverse;'

You also have 2 close brackets without the open brackets first.

if states('sensor.hybride_pomp_power') | float > 7 }}

So the correct syntax if you are going to have your if statements this way is this:

{{'animation: spin 0.5s linear infinite reverse;' if states('sensor.all_standby_energy') | float > 7 }}

Now you also have an issue because you are referring to .shape without referencing the object that .shape comes from. This is a bit harder to explain but essentially you need to start at the root of an object and drill down to the element that you want to style.

So for .shape you would need to have this instead.

card_mod:
  style: 
     mushroom-shape-icon$: |
       .shape {

The issue for you is then that now style: no longer has style: | which you are using for the ha-state-icon section.

So what you can do is this:

     .: |
       ha-state-icon {

Think of the .: | as resetting you back to style: |

So all in all it would look like this:

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

But like i said in my last post. The reason you are having issues most of the time is because it looks like you arent noticing your if statements and then breaking them.

So i would write it like this. Just so it is easier to see what is going on.

card_mod:
  style: 
     mushroom-shape-icon$: |
       .shape {
         border: 4px dashed rgb(var(--rgb-green));
         --shape-color: none;
         --icon-symbol-size: 5px;
         --icon-size: 34px;
         {% if states('sensor.hybride_pomp_power') | float > 2 %}
           --shape-animation: spin 2s linear infinite;
         {% else %}

         {% endif %}
       }
     .: |
       ha-state-icon {
         border-radius: 50%;
         border: 8px dotted rgb(var(--rgb-red));
         {% if states('sensor.hybride_pomp_power') | float > 6 %}
           animation: spin 0.5s linear infinite reverse;
         {% else %}

         {% endif %}
       }

[injectx]

@rhysb

card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon:before {
        content: "";
        position: absolute;
        width: 40%;
        height: 30%;
        margin: 6%;
        animation: refresh 300ms linear infinite;
      }
      @keyframes refresh { 
        0% { background: linear-gradient(180deg, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 0%, transparent 50%, transparent 100%); }
        25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 25%, transparent 100%); }
        50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 50%, transparent 100%); }
        75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 75%, transparent 100%); }
        100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 100%); }
      }

These animations don’t seem to work anymore?

[dimitri.landerloos]

Try like this:

card_mod:
  style: |
    ha-state-icon:before {
      content: "";
      position: absolute;
      width: 40%;
      height: 30%;
      margin: 6%;
      animation: refresh 300ms linear infinite;
    }
    @keyframes refresh { 
      0% { background: linear-gradient(180deg, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 0%, transparent 50%, transparent 100%); }
      25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 25%, transparent 100%); }
      50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 50%, transparent 100%); }
      75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 75%, transparent 100%); }
      100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 100%); }
    }

Im working on a draft updating all of these animations to the new format because we keep getting so many questions about it…

[soo]

Please help me with light card

I need to apply --shape-color to background of etiire light card including light color update

how to do it with card-mod?

[dimitri.landerloos]

To color the entire background of the card the same color as the color of the light you can do this:

card_mod:
  style: |
    ha-card {
      background: {{ '#%02x%02x%02x' % state_attr('light.lounge_lights','rgb_color')}};
    }

it converts the rgb_color values that the state attribute gives into hex format.

Can also do it like this:

card_mod:
  style: |
    ha-card {
      background: rgb({{ state_attr('light.lounge_lights','rgb_color')[0]}}, {{ state_attr('light.lounge_lights','rgb_color')[1]}}, {{ state_attr('light.lounge_lights','rgb_color')[2]}});
    }

Takes each value seperately and adds it as an rgb value. Better like this because you could then use rgba to add an alpha channel like the shape color has like this:

card_mod:
  style: |
    ha-card {
      background: rgba({{ state_attr('light.lounge_lights','rgb_color')[0]}}, {{ state_attr('light.lounge_lights','rgb_color')[1]}}, {{ state_attr('light.lounge_lights','rgb_color')[2]}}, 0.7);
    }

EDIT: found an even better way of doing it using jinja join. You can convert the list that the rgb_color attribute gives to a string that rgba can use. You just then add your own alpha channel at the end. With the above method the benefit is you could influence each of the r g b colors seperatly by just doing * 0.5 for example to halve the amount of red in the color. Cant do this with the below.

card_mod:
  style: |
    ha-card {
      background: rgba({{ state_attr('light.lounge_lights','rgb_color') | join(', ')}}, 0.8)
    }

[soo]

Great! Thanks, bro
I will try this

[dimitri.landerloos]

FYI posted an update with an even easier method

[xman111 (Craig)]

i may have missed this but with a template card, how do i make the icon show locked when door is locked and an unlocked icon when door is unlocked? ok figured it out, was the same as icon color field… now doors are green with the locked icon when locked and red with the unlocked icon when unlocked.

{% if is_state('lock.front_door_lock', 'locked') %} mdi:lock{% else %} mdi:lock-open {% endif %}

[soo]

Thanks again! Can I integrate it in theme to apply to all cards on dashboard ?

solution:

  card-mod-card-yaml: |
    .: |
       ha-card {
         background: rgba({{ state_attr('light.lounge_lights','rgb_color') | join(', ')}}, 0.2)
       }

[berkans (Berkan Sezer)]

Hello everyone.

I am now building a new dashboard called Live Tiles. This time I am trying to avoid using “vertical-stack-in-card” and “stack-in-card” as much as I can because these 2 card slows down the page load. So far I have created a super fast dashboard with dynamic cards. But I could’t decide which theme to use. So I decided to ask you folks.

So which one do you think should be the main look of the Dashboard ?

1. Orange Theme

2. Multi Color Theme

3. Dark Blue Theme

My room cards at the top of the page will also look like this.

I will post the codes and the guide on my github page as soon as complete the dashboard.