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

[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!

[petrij98]

Hi! Does anyone know how to properly implement bold fonts for the Title Card’s primary font? I have tried multiple different implementations I’ve seen on this forum and none of them appear to display my desired results. Thanks!

My code looks something like this so far:

card_mod:
  style: |
    ha-card {
      text-decoration: underline;
      font-style: italic;
      font-family: "Arial";
      --card-primary-font-weight: 950 !important;
    }

[Frosty]

I don’t know how to do it with the title card but it’s possible with template card to only change the top primary field.

type: custom:mushroom-template-card
card_mod:
  style:
    mushroom-state-info$: |
      .primary {
        font-weight: bold;
        font-variant: small-caps;
        border: 1px solid blue;
        
      }
primary: Hello, {{ user }} !
secondary: testing

[dimitri.landerloos]

like this:

type: custom:mushroom-title-card
title: Hello, {{ user }} !
subtitle: Test
card_mod:
  style: |
    ha-card {
      --title-font-weight: 900;
      --subtitle-font-weight: 900;
    }

or like this:

card_mod:
  style: |
    .title {
      font-weight: 900 !important;
    }
    .subtitle {
      font-weight: 900 !important;
    }

i always prefer to edit it directly through the element than the variable though.
font weights tend to max out at 900 btw:

font-weight - CSS: Cascading Style Sheets | MDN

Should probably be in my guide tbh. ill see if i can add it. because its not mentioned in the title card section:

Mushroom Cards Card Mod Styling/Config Guide

Template Card

Sections are split: Main Icon Styling You can style the main icon like this: Change the icon type/mdi. [image] Of course for the template card you could also just use the visual editor… card_mod: style: | ha-state-icon { --card-mod-icon: mdi:mushroom; } Change the icon color. [image] Of course for the template card you could also just use the visual editor… card_mod: style: | ha-state-icon { color: orange; } Change icon size. [image] car…

(i know it says template card in the preview, but trust me title card is in the same post )

[petrij98]

Aye. Coming in clutch, as always. Thanks @dimitri.landerloos!

[Frosty]

I knew @dimitri.landerloos would come to the rescue. learn something new everyday lol

[dimitri.landerloos]

Something like this?

secondary: |-
  {% if states('input_number.dishwasher_pod_add') | float == 0 %}
    {% if states('input_number.washing_pods_add') | float == 0 %}
      Aaah both are 0 what do i do!
    {% else %}
      Dishwasher is 0, but washing is {{states('input_number.washing_pods_add') | float}}.
    {% endif %}
  {% else %}
    {% if states('input_number.washing_pods_add') | float != 0 %}
      What!? neither are equal to 0?? dishwasher is {{states('input_number.dishwasher_pod_add') | float }} and washing is {{states('input_number.washing_pods_add') | float }}
    {% else %}
      Washing is 0, but dishwasher is {{states('input_number.dishwasher_pod_add') | float }}
    {% endif %}
  {% endif %}

Or even simpler this:

secondary: |-
  {% if states('input_number.dishwasher_pod_add') | float == 0 and states('input_number.washing_pods_add') | float == 0 %}
    Aaah both are 0 what do i do!
  {% elif states('input_number.dishwasher_pod_add') | float != 0 and states('input_number.washing_pods_add') | float != 0 %}
    What!? neither are equal to 0?? dishwasher is {{states('input_number.dishwasher_pod_add') | float }} and washing is {{states('input_number.washing_pods_add') | float }}
  {% elif states('input_number.dishwasher_pod_add') | float != 0 and states('input_number.washing_pods_add') | float == 0 %}
    Washing is 0, but dishwasher is {{states('input_number.dishwasher_pod_add') | float }}
  {% elif  states('input_number.dishwasher_pod_add') | float == 0 and states('input_number.washing_pods_add') | float != 0 %}
    Dishwasher is 0, but washing is {{states('input_number.washing_pods_add') | float }}
  {% endif %}

Of course these are just to illustrate the point, feel free to remove my junk commentary

[miketarg]

Many thanks

Just one small question, I know that the

|float)|round(0)

would be used to change the decimal to want I want but I am at a loss as how to apply it to the code you very kindly provided.

I’m looking to get rid of the decimal and the zero after 371:

I really appreciate your help!