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

Faecon · January 19, 2024, 5:38am

it is never in the state “on”, only in heat, cool, dry etc… that’s why I use “not off”

LiQuid_cOOled · January 19, 2024, 5:44am

second attempt

secondary: >
    {% if states('climate.tv_ruimte') != 'off' and states('input_boolean.tvruimte_airco_krachtig') == 'on' %}
    Boost
    {% elif is_state('climate.tv_ruimte', 'heat') %}
      Verwarmen
    {% elif is_state('climate.tv_ruimte', 'cool') %}
      Koelen
    {% elif is_state('climate.tv_ruimte', 'dry') %}
      Drogen
    {% else %}
      Ventileren
    {% endif %}

Faecon · January 19, 2024, 5:57am

                          secondary: >
                            {% if states('climate.tv_ruimte') != 'off' and states('input_boolean.tvruimte_airco_krachtig') == 'on' %}
                              Boost
                            {% elif state=='heat' %}
                              Verwarmen
                            {% elif state=='cool' %}
                              Koelen
                            {% elif state=='dry' %}
                              Drogen
                            {% elif state=='off' %} 
                                                        
                            {% else %}
                              Ventileren
                            {% endif %}

now I got “ventileren” instead of “” (nothing)

LiQuid_cOOled · January 19, 2024, 6:00am

Did you change these statements too?

{% elif is_state('climate.tv_ruimte', 'heat') %}
      Verwarmen
    {% elif is_state('climate.tv_ruimte', 'cool') %}
      Koelen
    {% elif is_state('climate.tv_ruimte', 'dry') %}
      Drogen

Faecon · January 19, 2024, 6:06am

I did not. I will try

LiQuid_cOOled · January 19, 2024, 6:07am

Is Boost off when in heat, cool or dry?

Faecon · January 19, 2024, 6:24am

Boost is an extra function. It is in another attribute

So when i boost i want visual all other things gone. Visual it has to be the word boost and my icon colours has to be standard grey

So in normal situation you have heat,cool etc. And a boost button

kroonen · January 19, 2024, 6:25am

Hi,

I’m trying to get this card with no border and background, but I can’t get it to work. Any idea how to get it right with the card_mod?


type: custom:stack-in-card
cards:
  - type: custom:mushroom-climate-card
    card_mod:
      style: |
        ha-card {
          background: none !important;
          border: none !important
        }
    entity: climate.aircozolder_mqtt_hvac
    step_size: '0.5'
    hvac_modes:
      - heat_cool
      - heat
      - cool
      - fan_only
      - dry
    show_temperature_control: true
    layout: horizontal
    name: Zolderkamer
    icon: mdi:air-conditioner
    double_tap_action:
      action: more-info
card_mod:
  style: |
    mushroom-shape-icon {
      {% if is_state(config.entity, 'heat_cool') %}
        --card-mod-icon: mdi:autorenew;
        animation: spin 3s ease-in-out infinite alternate;
      {% elif is_state(config.entity, 'heat') %}
        --card-mod-icon: mdi:fire;
        animation: heat 2s infinite;
      {% elif is_state(config.entity, 'cool') %}
        --card-mod-icon: mdi:snowflake;
        animation: cool 6s ease-in-out infinite;
      {% elif is_state(config.entity, 'dry') %}
        --card-mod-icon: mdi:water-percent;
        animation: dry 1.5s linear infinite;
      {% elif is_state(config.entity, 'fan_only') %}
        --card-mod-icon: mdi:fan;
        animation: spin 1s linear infinite;
      {% else %}
        --card-mod-icon: mdi:air-conditioner;
      {% endif %}
      display: flex;
    }
    @keyframes cool {
      0%, 100% { transform: rotate(25deg); }
      25% { transform: rotate(-25deg); }
      50% { transform: rotate(50deg); }
      75% { transform: rotate(-50deg); }
    }
    @keyframes heat {
      0%, 100% { --icon-color: rgba(var(--rgb-red), 1); }
      10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); }
      20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); }
      30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); }
      40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); }
      50% { --icon-color: rgba(var(--rgb-red), 0); }
    }
    @keyframes dry {
      0%, 100% { --icon-symbol-size: 21px; }
      10%, 90% { --icon-symbol-size: 22px; }
      20%, 80% { --icon-symbol-size: 23px; }
      30%, 70% { --icon-symbol-size: 24px; }
      40%, 60% { --icon-symbol-size: 25px; }
      50% { --icon-symbol-size: 26px; }
    }
    card_mod:
      style: |
        ha-card {
          background: none !important;
          border: none !important
        }

LiQuid_cOOled · January 19, 2024, 6:27am

I’ll recreate what you are describing…

another thought…

When I am combining two attributes from different devices I generally create a sensor that combines those attributes in my config file.

That way I have one sensor entity that reflects two attributes to a single status.

sensor:
  - platform: template
    sensors:
     fan_direction_speed:
       friendly_name: "Fan Direction Speed"
       unique_id: fan2
       value_template: |
         {% set direction = state_attr('fan.bedroom_fan', 'direction')  %}
         {% set speed = state_attr('fan.bedroom_fan', 'percentage')  %}
         {{[direction,speed]|join("")}}

It gives me this…

Faecon · January 19, 2024, 6:27am

                          secondary: >
                            {% if states('climate.tv_ruimte') != 'off' and states('input_boolean.tvruimte_airco_krachtig') == 'on' %}
                              Boost
                            {% elif is_state('climate.tv_ruimte', 'heat')%}
                              Verwarmen
                            {% elif is_state('climate.tv_ruimte', 'cool') %}
                              Koelen
                            {% elif is_state('climate.tv_ruimte', 'dry') %}
                              Drogen
                            {% elif is_state('climate.tv_ruimte', 'off') %} 
                                                        
                            {% else %}
                              Ventileren
                            {% endif %}

this gives me nothing, so I think it is ok now. Thanks

LiQuid_cOOled · January 19, 2024, 6:52am

I tested it and we should be good. If there are issues, let me know.

LiQuid_cOOled · January 19, 2024, 7:05am

Try these options and ensure you are using ; at the end of your card mod code

card_mod:
  style: |
    ha-card {
      border-style: none !important;
      background: none !important;
                     }

card_mod:
  style: |
    ha-card {
      border: none !important;
      background: none !important;
                     }

Border is set in the theme, so most of the time you’ll need to override it with an !important;

kroonen · January 19, 2024, 7:51am

H have it like this but not working

type: custom:stack-in-card
cards:
  - type: custom:mushroom-climate-card
    card_mod:
      style: |
        ha-card {
          background: none !important;
          border: none !important;
        }
    entity: climate.aircozolder_mqtt_hvac
    step_size: '0.5'
    hvac_modes:
      - heat_cool
      - heat
      - cool
      - fan_only
      - dry
    show_temperature_control: true
    layout: horizontal
    name: Zolderkamer
    icon: mdi:air-conditioner
    double_tap_action:
      action: more-info
card_mod:
  style: |
    mushroom-shape-icon {
      {% if is_state(config.entity, 'heat_cool') %}
        --card-mod-icon: mdi:autorenew;
        animation: spin 3s ease-in-out infinite alternate;
      {% elif is_state(config.entity, 'heat') %}
        --card-mod-icon: mdi:fire;
        animation: heat 2s infinite;
      {% elif is_state(config.entity, 'cool') %}
        --card-mod-icon: mdi:snowflake;
        animation: cool 6s ease-in-out infinite;
      {% elif is_state(config.entity, 'dry') %}
        --card-mod-icon: mdi:water-percent;
        animation: dry 1.5s linear infinite;
      {% elif is_state(config.entity, 'fan_only') %}
        --card-mod-icon: mdi:fan;
        animation: spin 1s linear infinite;
      {% else %}
        --card-mod-icon: mdi:air-conditioner;
      {% endif %}
      display: flex;
    }
    @keyframes cool {
      0%, 100% { transform: rotate(25deg); }
      25% { transform: rotate(-25deg); }
      50% { transform: rotate(50deg); }
      75% { transform: rotate(-50deg); }
    }
    @keyframes heat {
      0%, 100% { --icon-color: rgba(var(--rgb-red), 1); }
      10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); }
      20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); }
      30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); }
      40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); }
      50% { --icon-color: rgba(var(--rgb-red), 0); }
    }
    @keyframes dry {
      0%, 100% { --icon-symbol-size: 21px; }
      10%, 90% { --icon-symbol-size: 22px; }
      20%, 80% { --icon-symbol-size: 23px; }
      30%, 70% { --icon-symbol-size: 24px; }
      40%, 60% { --icon-symbol-size: 25px; }
      50% { --icon-symbol-size: 26px; }
    }
style: |
  ha-card {
          font-size: 1rem;
           background: none !important;
           border: none !important;    
             }

LiQuid_cOOled · January 19, 2024, 8:00am

You’re card_mod settings are conflicting with each other

type: custom:stack-in-card
cards:
  - type: custom:mushroom-fan-card
    entity: climate.aircozolder_mqtt_hvac
    step_size: '0.5'
    hvac_modes:
      - heat_cool
      - heat
      - cool
      - fan_only
      - dry
    show_temperature_control: true
    layout: horizontal
    name: Zolderkamer
    icon: mdi:air-conditioner
    double_tap_action:
      action: more-info
    card_mod:
     style: |
       mushroom-shape-icon {
        {% if is_state(config.entity, 'heat_cool') %}
          --card-mod-icon: mdi:autorenew;
          animation: spin 3s ease-in-out infinite alternate;
        {% elif is_state(config.entity, 'heat') %}
          --card-mod-icon: mdi:fire;
           animation: heat 2s infinite;
         {% elif is_state(config.entity, 'cool') %}
          --card-mod-icon: mdi:snowflake;
          animation: cool 6s ease-in-out infinite;
        {% elif is_state(config.entity, 'dry') %}
          --card-mod-icon: mdi:water-percent;
         animation: dry 1.5s linear infinite;
        {% elif is_state(config.entity, 'fan_only') %}
         --card-mod-icon: mdi:fan;
         animation: spin 1s linear infinite;
       {% else %}
         --card-mod-icon: mdi:air-conditioner;
       {% endif %}
       display: flex;
         }
       @keyframes cool {
        0%, 100% { transform: rotate(25deg); }
        25% { transform: rotate(-25deg); }
        50% { transform: rotate(50deg); }
        75% { transform: rotate(-50deg); }
       }
       @keyframes heat {
       0%, 100% { --icon-color: rgba(var(--rgb-red), 1); }
       10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); }
       20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); }
       30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); }
       40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); }
       50% { --icon-color: rgba(var(--rgb-red), 0); }
        }
       @keyframes dry {
       0%, 100% { --icon-symbol-size: 21px; }
       10%, 90% { --icon-symbol-size: 22px; }
       20%, 80% { --icon-symbol-size: 23px; }
       30%, 70% { --icon-symbol-size: 24px; }
       40%, 60% { --icon-symbol-size: 25px; }
       50% { --icon-symbol-size: 26px; }
       }
card_mod:
  style: |
    ha-card {
          font-size: 1rem;
           background: none !important;
           border: none !important;    
             }

kroonen · January 19, 2024, 8:51am

I don’t get it to work. I only have 1 card_mod

type: custom:stack-in-card
cards:
  - type: custom:mushroom-climate-card
    entity: climate.aircozolder_mqtt_hvac
    step_size: '0.5'
    hvac_modes:
      - heat_cool
      - heat
      - cool
      - fan_only
      - dry
    show_temperature_control: true
    layout: horizontal
    name: Zolderkamer
    icon: mdi:air-conditioner
    double_tap_action:
      action: more-info
card_mod:
  style: |
    mushroom-shape-icon {
      {% if is_state(config.entity, 'heat_cool') %}
        --card-mod-icon: mdi:autorenew;
        animation: spin 3s ease-in-out infinite alternate;
      {% elif is_state(config.entity, 'heat') %}
        --card-mod-icon: mdi:fire;
        animation: heat 2s infinite;
      {% elif is_state(config.entity, 'cool') %}
        --card-mod-icon: mdi:snowflake;
        animation: cool 6s ease-in-out infinite;
      {% elif is_state(config.entity, 'dry') %}
        --card-mod-icon: mdi:water-percent;
        animation: dry 1.5s linear infinite;
      {% elif is_state(config.entity, 'fan_only') %}
        --card-mod-icon: mdi:fan;
        animation: spin 1s linear infinite;
      {% else %}
        --card-mod-icon: mdi:air-conditioner;
      {% endif %}
      display: flex;
    }
    @keyframes cool {
      0%, 100% { transform: rotate(25deg); }
      25% { transform: rotate(-25deg); }
      50% { transform: rotate(50deg); }
      75% { transform: rotate(-50deg); }
    }
    @keyframes heat {
      0%, 100% { --icon-color: rgba(var(--rgb-red), 1); }
      10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); }
      20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); }
      30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); }
      40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); }
      50% { --icon-color: rgba(var(--rgb-red), 0); }
    }
    @keyframes dry {
      0%, 100% { --icon-symbol-size: 21px; }
      10%, 90% { --icon-symbol-size: 22px; }
      20%, 80% { --icon-symbol-size: 23px; }
      30%, 70% { --icon-symbol-size: 24px; }
      40%, 60% { --icon-symbol-size: 25px; }
      50% { --icon-symbol-size: 26px; }
    }
style: |
  ha-card {
          font-size: 1rem;
           background: none !important;
           border: none !important;    
             }

LiQuid_cOOled · January 19, 2024, 9:02am

You have three…

You have a lot of card mod settings that include icons/animations. With Mushroom you may be better off switching to template cards and separating the icon images and animation without having to use --card-mod-icon:

From my understanding animations are best applied to ha-state-icon: in Mushroom.

dimitri.landerloos · January 19, 2024, 12:47pm

Animations can be applied to anything, not just the icon. Depends on the animation type. For these they are animations of a shadow around the mushroom-shape-icon.

But this bit is definitely wrong in his:

card_mod:
  style: |
    mushroom-shape-icon {
      {% if is_state(config.entity, 'heat_cool') %}
        --card-mod-icon: mdi:autorenew;
        animation: spin 3s ease-in-out infinite alternate;
      {% elif is_state(config.entity, 'heat') %}
        --card-mod-icon: mdi:fire;
        animation: heat 2s infinite;
      {% elif is_state(config.entity, 'cool') %}
        --card-mod-icon: mdi:snowflake;
        animation: cool 6s ease-in-out infinite;
      {% elif is_state(config.entity, 'dry') %}
        --card-mod-icon: mdi:water-percent;
        animation: dry 1.5s linear infinite;
      {% elif is_state(config.entity, 'fan_only') %}
        --card-mod-icon: mdi:fan;
        animation: spin 1s linear infinite;
      {% else %}
        --card-mod-icon: mdi:air-conditioner;
      {% endif %}
      display: flex;
    }
    @keyframes cool {
      0%, 100% { transform: rotate(25deg); }
      25% { transform: rotate(-25deg); }
      50% { transform: rotate(50deg); }
      75% { transform: rotate(-50deg); }
    }
    @keyframes heat {
      0%, 100% { --icon-color: rgba(var(--rgb-red), 1); }
      10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); }
      20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); }
      30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); }
      40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); }
      50% { --icon-color: rgba(var(--rgb-red), 0); }
    }
    @keyframes dry {
      0%, 100% { --icon-symbol-size: 21px; }
      10%, 90% { --icon-symbol-size: 22px; }
      20%, 80% { --icon-symbol-size: 23px; }
      30%, 70% { --icon-symbol-size: 24px; }
      40%, 60% { --icon-symbol-size: 25px; }
      50% { --icon-symbol-size: 26px; }
    }
style: |
  ha-card {
          font-size: 1rem;
           background: none !important;
           border: none !important;    
             }

2 style and both are being applied to the stack card rather than the mushroom card. Should be like this most likely @kroonen.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-climate-card
    entity: climate.aircozolder_mqtt_hvac
    step_size: '0.5'
    hvac_modes:
      - heat_cool
      - heat
      - cool
      - fan_only
      - dry
    show_temperature_control: true
    layout: horizontal
    name: Zolderkamer
    icon: mdi:air-conditioner
    double_tap_action:
      action: more-info
    card_mod:
      style: |
        mushroom-shape-icon {
          {% if is_state(config.entity, 'heat_cool') %}
            --card-mod-icon: mdi:autorenew;
            animation: spin 3s ease-in-out infinite alternate;
          {% elif is_state(config.entity, 'heat') %}
            --card-mod-icon: mdi:fire;
            animation: heat 2s infinite;
          {% elif is_state(config.entity, 'cool') %}
            --card-mod-icon: mdi:snowflake;
            animation: cool 6s ease-in-out infinite;
          {% elif is_state(config.entity, 'dry') %}
            --card-mod-icon: mdi:water-percent;
            animation: dry 1.5s linear infinite;
          {% elif is_state(config.entity, 'fan_only') %}
            --card-mod-icon: mdi:fan;
            animation: spin 1s linear infinite;
          {% else %}
            --card-mod-icon: mdi:air-conditioner;
          {% endif %}
          display: flex;
        }
       @keyframes cool {
          0%, 100% { transform: rotate(25deg); }
          25% { transform: rotate(-25deg); }
          50% { transform: rotate(50deg); }
          75% { transform: rotate(-50deg); }
        }
        @keyframes heat {
          0%, 100% { --icon-color: rgba(var(--rgb-red), 1); }
          10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); }
          20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); }
          30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); }
          40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); }
          50% { --icon-color: rgba(var(--rgb-red), 0); }
        }
       @keyframes dry {
          0%, 100% { --icon-symbol-size: 21px; }
         10%, 90% { --icon-symbol-size: 22px; }
         20%, 80% { --icon-symbol-size: 23px; }
         30%, 70% { --icon-symbol-size: 24px; }
         40%, 60% { --icon-symbol-size: 25px; }
         50% { --icon-symbol-size: 26px; }
       }
card_mod:
  style: |
    ha-card {
      font-size: 1rem;
      background: none !important;
      border: none !important;    
    }

LiQuid_cOOled · January 19, 2024, 12:51pm

That’s a clearer explanation, thanks!!! Appreciate it!

kroonen · January 19, 2024, 12:55pm

Thnks, that is the solution and works,

Also thnx for the explanation

Diegocampy · January 19, 2024, 5:23pm

sorry, I’m really a beginner, I’m trying to personalize a card but my knowledge is too limited and even the guides or examples found don’t help me.

I would like this card of mine to display the brightness-4 icon when the lux is less than 20 and the brightness-5 icon if greater than 20.
For the color I would like yellow above 20 and gray below. I can’t do anything because I don’t understand how to set the states with <

        icon: >-
          {% if is_state('sensor.sensore_ingresso_illuminance_lux', '') %}
          mdi:brightness-4 {%- else -%} mdi:brightness-5 {% endif %}
        icon_color: >-
          {% if is_state('sensor.sensore_ingresso_illuminance_lux', '') %}
          disabled {% else %} green {% endif %}

this is my code, but without the < specification.
Can anyone direct me to the correct formatting?
Thanks