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

president75 · March 29, 2024, 10:27am

You are the best

Frosty · March 29, 2024, 11:33am

I’ve been following this post since I started HS, just wanted to say you go above and beyond to help people in this community.
I’ve learnt so much from your examples and its so much appreciated.

EDIT:
that goes for dimitri.landerloos aswell

Dmitry3650 · March 29, 2024, 3:04pm

Hello friend, the background is still present in two modes… I can’t get rid of it, please watch the video
Анимация23

type: custom:mushroom-template-card
icon: mdi:fire
entity: climate.otoplenie_zal
icon_color: |
  {{ 'red' if is_state(config.entity, 'heat') else 'disabled' }}
tap_action:
  action: more-info
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: none !important;
       }
    .: |
      {% if state_attr(config.entity, 'hvac_action') ==
      'heating'  %}
      ha-state-icon {
        animation: fire 3.5s infinite;
        transform-origin: 50% 85%;
      }
        ha-card {
          background: none;
          box-shadow: none;
          margin-left: -0px !important;
          margin-right: 0px !important;
          margin-bottom: 0px !important;
          #width: 75%;
        }
      @keyframes fire {
        0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      }
      {% endif %}

Zenia · March 29, 2024, 8:08pm

Also, if you will add | int behind your badge temperature, it will rounded to full number

          ha-card:after {
                    content: "{{ states('sensor.openweathermap_forecast_temperature') |int }}";
                    position: absolute;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: rgb(var(--rgb-orange));
                    color: rgb(var(--rgb-black));
                    font-weight: 900;
                    border-radius: 50%;
                    top: -6px;
                    right: -5px;
                    width: 20px;
                    height: 20px;
                    font-size: 15px;
                    z-index: 1;
                                  }

LiQuid_cOOled · March 30, 2024, 12:46am

Misunderstood what you meant by the background. Thought you meant the shape background. I’ll take a look, should be an easy fix!

Trial_Master · March 30, 2024, 12:48am

I’m using the Mushroom Climate Card and would like to have the default changed from showing the Modes to showing the set temperate, what code is needed to swap the default?

LiQuid_cOOled · March 30, 2024, 1:07am

This will fix it

type: custom:mushroom-template-card
icon: mdi:fire
entity: climate.otoplenie_zal
icon_color: |
  {{ 'red' if is_state(config.entity, 'heat') else 'disabled' }}
tap_action:
  action: more-info
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: none !important;
       }
    .: |

      ha-state-icon {
      {% if state_attr(config.entity, 'hvac_action') ==
      'heating'  %}

        animation: fire 3.5s infinite;
        transform-origin: 50% 85%;
      {% endif %} }

      ha-card {
          background: none !important;
          box-shadow: none;
          margin-left: -0px !important;
          margin-right: 0px !important;
          margin-bottom: 0px !important;
          width: 75%;
        }
      @keyframes fire {
        0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      }

LiQuid_cOOled · March 30, 2024, 6:15am

Thank you for the kind words!!

The work and knowledge @dimitri.landerloos has shared has been the foundation I initially based my education and knowledge on. His contributions have led to the continued success of this community.

LiQuid_cOOled · March 30, 2024, 6:41am

Did you just snag a picture or do you have code associate with the card?

Dmitry3650 · March 30, 2024, 7:46am

Cool!!! Thanks a lot!!! this code works perfect!

LiQuid_cOOled · March 30, 2024, 7:49am

Just needed a small formatting change. Happy to assist!!!

Dakononov · March 30, 2024, 9:40am

This is custom:flower-card.
I tried to recreate a similar card using mushroom, but my knowledge of CSS is not enough

LiQuid_cOOled · March 30, 2024, 9:48am

Is the forked module or the original no longer working ?

Dakononov · March 30, 2024, 9:55am

No GitHub - Olen/lovelace-flower-card: Lovelace Flower Card to match the custom plant integration is working well! I just want to have this design for the other cards. The main thing- how to move the circle out of the card?

LiQuid_cOOled · March 30, 2024, 9:57am

Its definitely possible, I’ll just need a day or so to design the card.

Dakononov · March 30, 2024, 10:20am

is it possible to do the same, only with the custom:mushroom-chips-card (template)?

LiQuid_cOOled · March 30, 2024, 10:24am

Depends on what you are putting in the body of the card. The post only showed a pic in the left top corner

Zenia · March 30, 2024, 1:14pm

It’s probably some minor mistake, but I can’t figure it out without our EXPERTS LiQuid and Dmitri. My fan light not animated when I turn light on

type: custom:stack-in-card
mode: vertical
card_mod:
  style: |-
    ha-card {
      
      {% if states('light.living_fan') == 'on' %}
      box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
      {% else %}
      box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
      {% endif %}      
      {% if is_state('light.living_fan', 'on') %}
      background: rgba(255, 152, 0, 0.1) !important;
      {% endif %}
      }       
cards:
  - type: custom:mushroom-fan-card
    entity: fan.living_fan
    name: '  '
    show_percentage_control: true
    show_oscillate_control: true
    tap_action:
      action: toggle
    hold_action:
      action: none
    double_tap_action:
      action: none
    icon: mdi:fan
    icon_color: |
      {{ '#00bcd4' if is_state(config.entity, 'on') else 'blue' }}
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
           background: none !important;
              }
        .: |
          ha-state-icon {
              animation:
              {% set pwr = states(config.entity) %} 
              {% set perc = state_attr(config.entity,'percentage')|int %}
              {% set spd = 'rotation infinite linear' %}
              {% if ( pwr == 'off') %} 0s {{spd}} 
              {% elif (perc <= 17 and pwr == 'on') %} 2.5s {{spd}}
              {% elif (perc <= 34 and pwr == 'on') %}  2s {{spd}}
              {% elif (perc <= 51 and pwr == 'on') %}  1.5s {{spd}}
              {% elif (perc <= 67 and pwr == 'on') %}  1s {{spd}}
              {% elif (perc <= 84 and pwr == 'on') %}  .75s {{spd}}
              {% elif (perc <= 100 and pwr == 'on') %}  .5s {{spd}}
              {% endif %};
               }
              @keyframes rotation {
              0% {transform: rotate(0deg);}
              100% {transform: rotate(360deg);} }
          ha-card {
                  border: none;
                  background: none;
                  margin-left: -0px !important;
                  margin-right: 0px !important;
                  margin-bottom: 0px !important;
                    }
    layout: null
  - type: custom:mushroom-light-card
    entity: light.living_fan
    name: '  '
    icon: mdi:ceiling-fan-light
    use_light_color: true
    show_brightness_control: true
    tap_action:
      action: toggle
    hold_action:
      action: none
    double_tap_action:
      action: none
    layout: null
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
           background: none !important;
              }
          .: |
            ha-state-icon {
              animation: {{ 'illumination 2s infinite' if is_state('light.living_fan', 'on') }};
            }
            @keyframes illumination {
              0%, 100% { clip-path: inset(0 0 0 0); }
              95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
            }

Thank you

Dakononov · March 30, 2024, 4:35pm

No, that was a question about this code

type: custom:mushroom-template-card
entity: fan.ventilation_pwm_fan1
tap_action:
  action: toggle
icon: mdi:fan
icon_color: |
  {{ 'blue' if is_state(config.entity, 'on') else 'grey' }}
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: none !important;
       }
    .: |
      ha-state-icon {
      
          {% set pwr = states(config.entity) %} 
          {% set perc = state_attr(config.entity,'percentage')|int %}

          {% if (perc <= 17 and pwr == 'on') %} animation: rotation 2.5s linear infinite
          {% elif (perc <= 34 and pwr == 'on') %} animation: rotation 2s linear infinite
          {% elif (perc <= 51 and pwr == 'on') %} animation: rotation 1.5s linear infinite
          {% elif (perc <= 67 and pwr == 'on') %} animation: rotation 1s linear infinite
          {% elif (perc <= 84 and pwr == 'on') %} animation: rotation .75s linear infinite
          {% elif (perc <= 100 and pwr == 'on') %} animation: rotation .5s linear infinite
          {%- else  %} animation: rotation 0s linear infinite
                
          {% endif %};
           }
        ha-card {
          background: none;
          box-shadow: none;
          margin-left: -0px !important;
          margin-right: 0px !important;
          margin-bottom: 0px !important;
          #width: 75%;
        }
          @keyframes rotation {
          0% {transform: rotate(0deg);}
          100% {transform: rotate(-360deg);
          }

Deninho91 · March 30, 2024, 9:22pm

Hey

Can someone help, to Card mod an Image instead of an Icon?

I Want that the picture is near the middle and Not as Here shown on top?

Do Not know how…

Hope someone can help here

Thank you!