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

[fysmd (Ian Rhodes)]

I can’t install mushroom today:

[Edwin_D]

ut conditional cards per user would be. I’m guessing it won’t be 10+ users so that should be annoying, but doable.

[dimitri.landerloos]

I dont know how to explain it better than what the warning message is telling you, but its saying you cant install that version of mushroom as its made for a newer version of HA than the one you are using.

the one mentioned 2024.8.0b0 is the beta release for the release coming out this wednesday. which is 2024.8.0.

so probably just wait until then? or select the previous version when downloading:

or as described you can call a service with the specific version number you want to install:

Update entities - HACS

so the service call probably looks like this - but not sure, have never used it:

[AUkkers]

Hello !
How can I reduce the distance between these chip cards ?

In the past, this code in card mod helped to make the distance between them smaller. After another update this code doesn’t work anymore (

 card_mod:
  style: |
    ha-card {
    --chip-box-shadow: none;
    --chip-background: none;
    --chip-spacing: -0.5em;
    --chip-icon-size: 0.5em;                
    --chip-border-width: 0;
    position: absolute;
    right: 0px;
    top: 30px;
    }

[Frosty]

@AUkkers

--chip-spacing: -0.5em;

I checked your code still works fine with me.
what versions are you on

[AUkkers]

Right now, version 4.0.0 is installed

[AUkkers]

This code works only if you put positive value in --chip-spacing (

[GTunney]

Negative chip spacing hasn’t worked for me either, it happened when upgrading to 2024.7.x

Positive works but negative doesn’t adjust the spacing. I raised this in the card_mod thread as well but it seems to have gone un-noticed.

[Frosty]

@AUkkers

This code works only if you put positive value in --chip-spacing (

@GTunney

Negative chip spacing hasn’t worked for me either, it happened when upgrading to 2024.7.x

ah OK didn’t check negative values.

[miketarg]

Hello,

Really love this looks great, however.

I cannot get this to work what is it that I am missing?

Here is my code:-

icon: mdi:shimmer
entity: input_boolean.animate_motion_detected_kitchen
icon_color: amber
primary: Sparkle
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: stars 4s linear infinite;
      }
      .shape {
        --shape-color: rgba(var(--rgb-disabled), 0.2);
      }
      @keyframes stars {
        0%, 3.1%, 14.1%, 40.1%, 55.1% { clip-path: inset(0 0 0 0); }
        3%, 40% { clip-path: polygon(48% 100%, 48% 62%, 0 63%, 0 0, 100% 0, 99% 100%); }
        14% { clip-path: polygon(49% 45%, 48% 100%, 0 100%, 0 0, 100% 0, 100% 36%); }
        55% { clip-path: polygon(0 100%, 0 60%, 41% 65%, 49% 46%, 100% 44%, 100% 100%); }
      }

please can someone help as I am pulling my hair out!

[dimitri.landerloos]

Just try and search the forum for the updated animations.

Hint, i updated them.

[miketarg]

Do you think you could post a link… sorry I
I’m not sure where I’m supposed to look?

[dimitri.landerloos]

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

Hi @rhysb, i have made a general mushroom - card-mod styling guide that i have posted here. i have linked to your resource on animations from it because it is great. however since it was made a few things have changed with the way that animations are applied and we get a bunch of questions regarding it right now because people want to use your animations. so i hope you dont mind that i have gone through and updated each of your animations below and will be posting them as a reply here. i will …

My guide has the link too, and the guide is linked in my profile:

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.6.4 and Card Mod Version 3.4.3 (you can also optionally use a theme like i do. i use Minimalist Version 1.3.10). 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 Car…

Also this post i made explains the changes that happened a long time ago well:

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

I have made many many posts about the updates to the animations that now happend roughly 6 months ago. ill do it 1 more time, but after this, if someone asks about why their animations arent working and they are using the old path to the icon. i will not be replying. ha-icon was moved out of the shadow root of mushroom-shape-icon$:. ha-icon was renamed to ha-state-icon for consistency with native cards. --icon-animation was removed and replaced with just animation to avoid confusion. --shap…

[miketarg]

Fantastic work, and thanks for the help earlier, the radom dice one is really nice but how would we pick a polyhedral dice (d4, d6, d8, d10, d12 and d20) is this possible?

[dimitri.landerloos]

You cant with the default Ioncs (MDI) because the only reason it works is because we have a seperate icon named with the number being displayed on the die.

for the D20, D12, etc. we only have the 1 icon.

you could definitely upload some custom dice icons to your instance and then do some card mod to try and add it, but it will not be easy, as swapping default icons for custom ones is not as simple as using --card-mod-icon like you can when swapping from default icon to another using card mod.

[berkans (Berkan Sezer)]

Some of my new home assistant tablet designs.

I am about to finish it.

[miketarg]

Goodevening

I am trying to disable a .shape animation from playing in the below bit of script but I am really struggling with the syntax this is what I have:

      
      .shape {--shape-animation: ping 1.5s infinite;}
      @keyframes ping {
        {% if is_state('input_boolean.asus_toggle','on') -%}
        {{ '--icon-animation: flame 3s linear infinite; transform-origin: 50% 50%;'  }}
        {% else %}
        {% endif %}      
        0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-teal), 0.3) inset; }
        50% { box-shadow: 0 0 5px 15px transparent inset; }
        51% { box-shadow: 0 0 1px 1px rgba(var(--rgb-red), 0.3); }
        100% { box-shadow: 0 0 5px 15px transparent; }
      }
    .: |
      ha-state-icon {
        animation: clip 1.5s infinite;
      }
      @keyframes clip {
        0% { clip-path: circle(13.0% at 50% 50%); }
        100% { clip-path: circle(50.0% at 50% 50%); }
      }

Please can anyone help?

[dimitri.landerloos]

@miketarg

        {% if is_state('input_boolean.asus_toggle','on') -%}
        {{ '--icon-animation: flame 3s linear infinite; transform-origin: 50% 50%;'  }}
        {% else %}
        {% endif %} 

this bit does nothing --icon-animation is not a thing anymore. and you dont have any keyframes for an animation called flame.

consider keyframes as being entirely seperate. dont add stuff to them, and keep them out of other elements. so like this initially:

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: ping 1.5s infinite;
      }
      @keyframes ping {   
        0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-teal), 0.3) inset; }
        50% { box-shadow: 0 0 5px 15px transparent inset; }
        51% { box-shadow: 0 0 1px 1px rgba(var(--rgb-red), 0.3); }
        100% { box-shadow: 0 0 5px 15px transparent; }
      }
    .: |
      ha-state-icon {
        animation: clip 1.5s infinite;
      }
      @keyframes clip {
        0% { clip-path: circle(13.0% at 50% 50%); }
        100% { clip-path: circle(50.0% at 50% 50%); }
      }

you can then wrap the bit that is applying the animation in your if statement. like this:

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        {% if is_state('input_boolean.asus_toggle','on') %}
          --shape-animation: ping 1.5s infinite;
        {% endif %}
      }
      @keyframes ping {   
        0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-teal), 0.3) inset; }
        50% { box-shadow: 0 0 5px 15px transparent inset; }
        51% { box-shadow: 0 0 1px 1px rgba(var(--rgb-red), 0.3); }
        100% { box-shadow: 0 0 5px 15px transparent; }
      }
    .: |
      ha-state-icon {
        animation: clip 1.5s infinite;
      }
      @keyframes clip {
        0% { clip-path: circle(13.0% at 50% 50%); }
        100% { clip-path: circle(50.0% at 50% 50%); }
      }

[miketarg]

Thanks,

Yes, what you have shown makes a lot more sense, it’s also easier to read.

Sorry I struggle with reading anyway due to dyslexia so I really appreciate your help!

[miketarg]

What would the correct syntax be for displaying 2 different entities in the secondary field be?

It needs to shows the one that is not zero value and hide the zero value one

type: custom:mushroom-template-card
secondary: '{{ (states(''sensor.solis_s6_solis_battery_charge_power'')|float)|round(0) }}kWh'
entity: sensor.solis_s6_solis_battery_current_direction
layout: vertical
fill_container: true
tap_action:
  action: navigate
  navigation_path: /dashboard-mushroom/solar
icon: mdi:battery-high
icon_color: |-
  {% set percentage = states('sensor.solis_s6_solis_battery_soc') | int %}
  {% set r, g, b = 0, 0, 0 %}
  {% if (percentage <= 51) %}
    {% set r = 255 %}
    {% set g = (5.0 * percentage) | round | int %}
  {% else %}
    {% set g = 255 %}
    {% set r = (505 - 4.89 * percentage) | round | int %}
  {% endif %}
  {{ "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) }}
primary: Solar {{ (states('sensor.solis_s6_solis_battery_soc')|float)|round(0) }}%
card_mod:
  style: >
    ha-state-icon {
    {% if is_state(config.entity, '0') %}
    animation: charge 3s linear infinite;
    {% else %}
    animation: discharge 3s linear infinite;
    {% endif %}
    }
    @keyframes charge {
    0%, 80% { clip-path: inset(0 0 0 0); }
    10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67%
    84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
    20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67%
    74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
    30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67%
    64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
    40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67%
    54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
    50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67%
    44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
    60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67%
    34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
    70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67%
    24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
    }
    @keyframes discharge {
    0%, 80% { clip-path: inset(0 0 0 0); }
    70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67%
    84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
    60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67%
    74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
    50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67%
    64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
    40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67%
    54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
    30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67%
    44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
    20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67%
    34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
    10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67%
    24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
    }

This is what I have and it works really well. Just not sure how to achieve the desired result

The second entity is called

sensor.solis_s6_solis_battery_discharge_power

Regards and thanks for the help so far!