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

[maesenator]

Thank you!

I didn’t make much changes to the original code so that would certainly make sense.
But I do not think that would explain the larger size of the avatar in the top.

[hsec]

I guess it has to do with this part. If you remove it, the scroll bars disappear.
But don’t ask me why.

@maesenator

             .content {

                /* Remove extra bottom border */
                margin: -18px -24px -24px !important;
              }

[hsec]

BTW, is there any way to modify the code so it can be reused?
Maybe using decluttering cards? Or something else?
It could be useful specially if you have more people.

[spacekiek]

Great, this works !
And I learned a little bit more of scripting

[maesenator]

That did work!
Weird, but thank you

[dimitri.landerloos]

@hsec @maesenator; i had a further look and it definitely seems related to the current bugs with the browser mod pop-ups. So it is likely you will need to “refix” (by adding back what you have just removed) when browser mod popups are fixed.

Currently popups come up full screen rather than how they are meant to come up and so modifying the margins seems to have it confused about where the card actually is as the outer card is technically larger than the inner box so adding margin it will allow you to make it larger than the inner box allows for. Hence a scroll.

But yes removing the margins will fix it for now, but when the cards go back to being the size they are meant to it is likely that your inner card will then be too big. But then just add it back again

[maesenator]

Thanks for looking into it, and for the heads up!

[dimitri.landerloos]

Oh and one more thing. Currently the battery charging animation is broken as it hasnt been updated. Change your battery section to this and it should work

                  - type: custom:mushroom-template-card
                    primary: '{{ states(entity) }}%'
                    secondary: >
                      {{ 'charging' if
                      is_state('binary_sensor.sm_g991b_is_charging', 'on' )
                      else 'discharging' }}
                    icon: >
                      {% set battery_level = (states(entity) | int / 10) |
                      round(0) | int * 10 %}

                      {% if battery_level == 100 %}
                        mdi:battery
                      {% elif battery_level > 0 %}
                        mdi:battery-{{ battery_level }}
                      {% else %}
                        mdi:battery-alert-variant-outline
                      {% endif %}
                    icon_color: |-
                      {% set battery_level = states(entity) | int %}
                      {% if battery_level > 90 %} 
                        green
                      {% elif battery_level > 60 %}
                        light-green
                      {% elif battery_level > 50 %}
                        lime
                      {% elif battery_level > 40 %}
                        yellow
                      {% elif battery_level > 30 %}
                        amber
                      {% elif battery_level > 20 %}
                        orange
                      {% elif battery_level > 10 %}
                        deep-orange
                      {% else %}
                        red
                      {% endif %} 
                    entity: sensor.sm_g991b_battery_level
                    layout: vertical
                    badge_icon: >-
                      {% if is_state('binary_sensor.sm_g991b_is_charging',
                      'on') %}
                        mdi:lightning-bolt
                      {% elif states(entity) | int < 10 %} 
                        mdi:exclamation-thick
                      {% endif %}
                    badge_color: '{{ ''red'' if states(entity) | int < 10 else ''light-blue'' }}'
                    tap_action:
                      action: none
                    hold_action:
                      action: none
                    double_tap_action:
                      action: none
                    card_mod:
                      style:
                        mushroom-shape-icon$: |
                          .shape {

                            /* Radial progress bar */
                            background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(var(--icon-color) {{ states(config.entity) }}% 0%, var(--card-background-color) 0% 100%);
                          }
                          .shape:after {
                            /* Add back icon shape */
                            content: "";
                            height: 100%;
                            width: 100%;
                            position: absolute;
                            border-radius: var(--icon-border-radius);
                            background: var(--shape-color);
                          }
                        .: |
                          ha-card {

                            /* Remove default card styling */
                            --ha-card-background: none;
                            --ha-card-box-shadow: none;
                            --ha-card-border-width: 0;

                            /* Center card on row */
                            width: fit-content;
                            margin: auto;
                            /* Make card non-responsive to select and pointer */
                            user-select: none;
                            pointer-events: none;
                          }
                          ha-state-icon {
                            /* Icon charging animation */
                            {{ 'animation: charge 3s linear infinite;' if is_state('binary_sensor.sm_g991b_is_charging', 'on') }}
                          }
                          @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%); }
                          }

Remember to replace entities with your own (including in the card mod animation section!)

[maesenator]

Ha. I didn’t even notice that, nor that this animation was possible.
Sweet, and thank you again sir

[obrien.craig]

Did you ever get this working. I copied a bit of your code, and have been trying to get it to work.
I am close, its just that the value seems to be in the wrong location

Here is my part of the code

      - type: custom:mushroom-template-card
        primary: ''
        icon: none
        layout: horizontal
        icon_color: blue
        entity: sensor.pihole_cpuusage
        badge_icon: mdi:speedometer
        badge_color: '#3498db'
        secondary: ''
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {

                /* Radial progress bar */
                background: radial-gradient(var(--card-background-color) 60%, 
                                            transparent calc(60% + 1px)), 
                            conic-gradient(var(--icon-color) {{ states(config.entity) }}% 0%, 
                                            var(--card-background-color) 0% 100%);
              }
              .shape:after {
                content: "{{ states(config.entity) | round(0)  }}%";
                font-size: var(--card-primary-font-size);
                height: 100%;
                width: 100%;
                position: absolute;
                border-radius: var(--icon-border-radius);
                background: var(--shape-color);
              }

I seem to be very close to it working. So if anyone can point me in the direction, so make the values move to the centre, it would be great.

[eMeF]

@Valdorama did you manage to add the badge to Mushroom Fan Card in the end? Can you share your code if so?

[dimitri.landerloos]

Try like this. If you dont like that the number now matches the color of the icon selected you can also change the color with color: white;

type: custom:mushroom-template-card
primary: ''
icon: none
layout: horizontal
icon_color: blue
entity: sensor.processor_use
badge_icon: mdi:speedometer
badge_color: '#3498db'
secondary: ''
tap_action:
  action: more-info
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        /* Radial progress bar */
        background: radial-gradient(var(--card-background-color) 60%, 
                                    transparent calc(60% + 1px)), 
                    conic-gradient(var(--icon-color) {{ states(config.entity) }}% 0%, 
                                    var(--card-background-color) 0% 100%);
      }
      .shape:after {
        content: '';
        height: 100%;
        width: 100%;
        position: absolute;
        border-radius: var(--icon-border-radius);
        background: var(--shape-color);
      }
    .: |
      ha-state-icon:after {
        content: "{{ states(config.entity) | round(0)  }}%";
        font-size: var(--card-primary-font-size);
        position: absolute;
        top: 21px;
        left: 12px;
      }

Remember to change the entity back to your own

[dimitri.landerloos]

You can add a badge to any card with card-mod like this:

type: custom:mushroom-fan-card
entity: fan.bedroom_fan
show_percentage_control: true
collapsible_controls: true
show_oscillate_control: true
card_mod:
  style: |
    ha-state-icon:after {
      content: "{{state_attr('fan.bedroom_fan','percentage')}}%";
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgb(var(--rgb-green));
      color: var(--card-background-color);
      font-weight: bolder;
      border-radius: 50%;
      top: -5px;
      right: -5px;
      width: 16px;
      height: 16px;
      font-size: 8px; 
    }

But in order to add an icon to the badge have a look at the below.

Mushroom Cards - Build a beautiful dashboard easily

Yes, why not? Mushroom Multi-Badges [Mushroom Multi-Badge] type: custom:mushroom-template-card primary: Mushrooms icon: mdi:mushroom icon_color: red badge_icon: mdi:bug badge_color: green card_mod: style: | mushroom-badge-icon:after { content: "bug_report"; font-size: 0.9em; font-family: 'Material Icons'; position: absolute; display: flex; justify-content: center; align-items: center; top: 32px; color: va…

[carlone1]

some animations no longer work in Mushroom Cards - Build a beautiful dashboard easily.
I mention only a few

• shower
• sprinklers
• motion

thanks for your work

[dimitri.landerloos]

This has already been addressed. Please check the below.

Mushroom Cards - Build a beautiful dashboard easily

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 …

[paddy0174 (Patrick)]

@carlone1
You might want to take a good and long read of this topic:

How to help us help you - or How to ask a good question

Before we begin… This forum is not a helpdesk The people here don’t work for Home Assistant, that’s an open source project. We are volunteering our free time to help others. Not all topics may get an answer, never mind one that helps you solve your problem. [image] This also isn’t a general home automation forum, this is a forum for Home Assistant and things related to it. Any question about Home Assistant, and about using things with Home Assistant, is welcome here. We can’t help you with e…

I mention only a few:

• Preamble (especially!)
• #1
• #2
• #4
• #8
• #15
• #22

[hsec]

hahah as usual, the cleanest code possible!

[eMeF]

Thanks a lot!

The badge_icon: mdi:bug only works with template card as far as I know and tried. I could possibly try recreating the fan-card into template-card but I am planning to use it in other cases and would end up recreating many other cards as well.

With the code provided, I was able to get closer to what I am trying to achieve and now I’m struggling with the following:

• The badge gets animated/rotated with the icon_animation: true setting in mushroom-fan-card
• I would like to use mdi icon in the badge
  

This is my current code

type: custom:mushroom-fan-card
entity: fan.whisper_flex
icon_animation: true
show_percentage_control: true
collapsible_controls: true
tap_action:
  action: call-service
  service: script.fan_on_off_with_automation
card_mod:
  style: |
    ha-state-icon:after {
      content: "A";
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgb(var(--rgb-blue));
      color: var(--card-background-color);
      font-weight: bolder;
      border-radius: 50%;
      top: -5px;
      right: -5px;
      width: 16px;
      height: 16px;
      font-size: 8px; 
    }

Anyone can please help me with that?

[Tadies]

Anohter one for You Dimitri…
i saw your rotaing drum on washmachine icon in here…

Mushroom Cards - Build a beautiful dashboard easily

Something like this: [Untitled video - Made with Clipchamp (92)] you will likely need to play with the left: 44.5px value depending on your screen size. it is hard to make things universal when you are overlaying multiple cards (or in this case chips). type: custom:mushroom-chips-card chips: - type: template icon: mdi:washing-machine icon_color: orange - type: template icon: mdi:washing-machine icon_color: orange card_mod: style: | ha-card { lef…

i did fiddle around with it what im trying to do but somehow i fail…
sofar this icon works perfect…only not the rotaing drum
is this able to do it?

    mushroom-entity-chip:nth-child(8)$: |
      ha-state-icon {
        {% if is_state('switch.wasmachine','on') %}
            animation: shake 400ms ease-in-out infinite,  wash 1s ease-in-out infinite;
            transform-origin: 50% 58%;
          {% 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 wash {
          50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%,
          36% 73%, 35% 100%, 100% 100%, 100% 0); }

[dimitri.landerloos]

If you read the post i linked you it is definitely possible to set an mdi icon in the fake badge that we have created. You will need to download an icon pack etc. But the post makes it quite clear how to do it.

You dont need to use badge_icon: at all.

We can base the “badge” on the mushroom-shape-icon. Instead of the ha-state-icon so it doesnt inherit any animations. Like this:

type: custom:mushroom-fan-card
entity: fan.bedroom_fan
show_percentage_control: true
collapsible_controls: true
show_oscillate_control: true
icon_animation: true
card_mod:
  style: |
    mushroom-shape-icon:after {
      content: "{{state_attr('fan.bedroom_fan','percentage')}}%";
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgb(var(--rgb-green));
      color: var(--card-background-color);
      font-weight: bolder;
      border-radius: 50%;
      top: -5px;
      right: -5px;
      width: 16px;
      height: 16px;
      font-size: 8px; 
    }