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

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

[miketarg]

Never mind I figured it out!

{% elif states('sensor.solis_s6_solis_battery_charge_power') | float |round(0)  != 0 and states('sensor.solis_s6_solis_battery_discharge_power') | float |round(0)  != 0 %} W
{{states('sensor.solis_s6_solis_battery_charge_power') | float |round(0)  }} W
{{states('sensor.solis_s6_solis_battery_discharge_power') | float |round(0)  }} W
{% elif states('sensor.solis_s6_solis_battery_charge_power') | float |round(0)  != 0 and states('sensor.solis_s6_solis_battery_discharge_power') | float |round(0)  == 0 %}
{{states('sensor.solis_s6_solis_battery_charge_power') | float |round(0)  }} W
{% elif states('sensor.solis_s6_solis_battery_charge_power') | float |round(0)  == 0 and states('sensor.solis_s6_solis_battery_discharge_power') | float |round(0)  != 0 %} 
{{states('sensor.solis_s6_solis_battery_discharge_power') | float |round(0)  }} W
  {% endif %}

[paddy0174 (Patrick)]

Just to add to this, you could make that better readable by using “set” in your template.

{% set charge = states('sensor.solis_s6_solis_battery_charge_power') | float | round(0) %}
{% set discharge = states('sensor.solis_s6_solis_battery_discharge_power') | float | round(0) %}
[...]
{% elif charge != 0 and discharge != 0 %} W
{{ charge }} W
{{ discharge }} W
[...]

And I’d try to use int(0) instead of float(0) | round(0), as you wouldn’t need to round that later on.

No need to do this, but it makes it much better readable.

[dimitri.landerloos]

Absolutely agree with using set.

Just keeping in mind for the second bit that:

| int(0)

Will convert a value such as 9.9 to 9. The (0) just refers to a default value you are giving if the state of the entity is not a number. Like unknown, unavailable, or None, etc.

| round(0)

Converts a value like 9.9 to 10, as it does proper rounding. But it may still display as 10.0 depending on the use. The (0) here does Not refer to a default, but rather the decimals to round to.

So IMO, one is not better than the other, it really depends on the accuracy you want.

To illustrate what i mean by the default value:

I had to add the | float(0) with a default in front of the | round(0), otherwise it fails:

You can also do this instead to have a default for the | round(0) without using | float(0) in front.

[stephanschleichstr13]

Is it possible to use Labels Like in badge in a Chips Card?

[TillitschScHocK (Till)]

Hello everyone,

I’m having an issue with the animations in my Mushroom Cards. The cards display correctly, but the animations no longer work. I was using the templates from rhysb. Link to his Part

Does anyone have any idea what might be causing this or how I can fix the problem?

Thank you in advance for your help!

[Frosty]

@dimitri.landerloos updated all the animations which can be found here

[TillitschScHocK (Till)]

Thanks, I found it on Github too. Big thanks for the great animations.

[aniboii]

Hi everyone,

I am working on my first dashboard and wanted to use some features from both the mushroom light card as well as the custom room card made by Everything Smart Home for Minimalist.

Essentially what I want is to merge features from both cards. I would like the slider and brightness/temp/color slider and controls to be at the same row as the Bedroom text (like the default minimalist light card) but then also be able to add a label showing temperature and more buttons at the bottom row for things like heating etc.

I can’t seem to find any yaml templates for mushroom to use as a base for adding more items and I have no idea where to get started if I want to port the slider and temp/brightness/colour functionality over to minimalist so I’m pretty stuck.
Here’s a crappy drawing of what I want to do the bottom buttons are just examples of buttons.

[miketarg]

Hello

Great work on this its fantastic,

Just a quick question, can I use these animations on Mushroom Template Badges?

I can’t get it to work.

This is my code

type: custom:mushroom-template-badge
content: |-
  {% set state=states('binary_sensor.kitchen_camera_person_occupancy') %}
  {% if state=='off' %}
  Clear
  {% elif state=='on' %}
  Detected
  {% endif %}
icon: |-
  {% if is_state('binary_sensor.kitchen_camera_person_occupancy', 'on') %}
    mdi:motion-sensor
  {% else %}
    mdi:motion-sensor-off
  {% endif %}
color: |-
  {% if is_state('binary_sensor.kitchen_camera_person_occupancy', 'on') %}
    yellow
  {% else %}
    grey
  {% endif %}
entity: binary_sensor.kitchen_camera_person_occupancy
tap_action:
  action: more-info
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: motion 2s linear infinite;
      }
      @keyframes motion {
        0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); }
        50% { --shape-color: rgba(var(--rgb-blue), 0.2); }
      }
    .: |
      ha-state-icon {
        animation: clip 2s linear infinite;
      }
      @keyframes clip {
        50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
      }

thanks

[Faecon (Jo)]

I just want to have a tittle with the name of the person who is logged in

          - type: custom:mushroom-template-card
            primary: {{user}}

I found this on the forum, but that is not working for me. Do I miss something ?