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

Casita · January 12, 2024, 11:01am

Hello, is it possible to have a custom background ?
I tried without success. In the meantime, I put an icon that has 3 colors. The ideal is to remove the icon to have the background of the card in the color like the icon.
THANKS

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: |-
      {% set tempo = states('sensor.rte_tempo_couleur_actuelle') %}
      {% if tempo == 'Bleu' %} mdi:flash
      {% elif tempo == 'Blanc' %} mdi:flash-outline
      {% elif tempo == 'Rouge' %} mdi:flash
      {% endif %}
    content: >-
      Ce jour 

      {% set tempo = states('sensor.rte_tempo_couleur_actuelle')%}

      {% if tempo == 'Bleu' %} Bleu
      {{states('input_number.prix_achat_hc_bleu')}} |
      {{states('input_number.prix_achat_hp_bleu')}}

      {% elif tempo == 'Blanc' %} Blanc
      {{states('input_number.prix_achat_hc_blanc')}} |
      {{states('input_number.prix_achat_hp_blanc')}}

      {% elif tempo =='Rouge' %} Rouge
      {{states('input_number.prix_achat_hc_rouge')}} |
      {{states('input_number.prix_achat_hp_rouge')}}

      {% endif %}
    entity: sensor.rte_tempo_couleur_actuelle
    icon_color: |-
      {% set tempo = states('sensor.rte_tempo_couleur_actuelle') %}
                {% if tempo == 'Bleu' %} blue
                {% elif tempo == 'Blanc' %} primary_color
                {% elif tempo == 'Rouge' %} red
                {% else %} yellow
                {% endif %}
  - type: template
    entity: sensor.rte_tempo_prochaine_couleur
    content: >-
      Demain

      {% set tempo = states('sensor.rte_tempo_prochaine_couleur')%}

      {% if tempo == 'Bleu' %} Bleu
      {{states('input_number.prix_achat_hc_bleu')}} |
      {{states('input_number.prix_achat_hp_bleu')}}

      {% elif tempo == 'Blanc' %} Blanc
      {{states('input_number.prix_achat_hc_blanc')}} |
      {{states('input_number.prix_achat_hp_blanc')}}

      {% elif tempo =='Rouge' %} Rouge
      {{states('input_number.prix_achat_hc_rouge')}} |
      {{states('input_number.prix_achat_hp_rouge')}}

      {% endif %}
    icon: |-
      {% set tempo = states('sensor.rte_tempo_prochaine_couleur') %}
      {% if tempo == 'Bleu' %} mdi:flash
      {% elif tempo == 'Blanc' %} mdi:flash-outline
      {% elif tempo == 'Rouge' %} mdi:flash
      {% endif %}
    icon_color: |-
      {% set tempo = states('sensor.rte_tempo_prochaine_couleur') %}
                {% if tempo == 'Bleu' %} blue
                {% elif tempo == 'Blanc' %} primary_color
                {% elif tempo == 'Rouge' %} red
                {% else %} yellow
                {% endif %}
alignment: justify

andrezpt · January 12, 2024, 2:23pm

hello, im trying to put some animations on my icons, but it doesn-t work, can someone help

type: custom:mushroom-template-card
entity: switch.zigbee2mqtt_bridge_permit_join
icon: mdi:lightbulb-on
icon_color: amber
primary: Light Bulb
card_mod:
  style:
    mushroom-shape-icon$: >
      ha-icon {{--icon-animation: illumination 2s infinite;' if is_state(entity,
      'on') }}

      @keyframes illumination {
        0%, 100% { clip-path: inset(0 0 0 0); }
        80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
      }

the icon dont animate.

dimitri.landerloos · January 12, 2024, 2:52pm

Scroll up a little bit in this topic and you can see that i have linked to updated animations many many times.

andrezpt · January 12, 2024, 3:51pm

thanks alot…it works

andrezpt · January 12, 2024, 4:23pm

i put the spin working but not he other icons… im gone rest… maybe tomorrow i find the problem…

type: custom:mushroom-template-card
entity: switch.zigbee2mqtt_bridge_permit_join
icon: mdi:washing-machine
icon_color: amber
primary: Washing Machine
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        {{'animation: shake 400ms ease-in-out infinite, drum 2s ease infinite; transform-origin: 50% 110%;' if is_state(config.entity, 'on')}}
      }
      @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 drum {
        50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
      }


      {{'animation: spin 1s linear infinite;' if is_state(config.entity, 'on')}}

dimitri.landerloos · January 12, 2024, 4:58pm

This bit is wrong.

you just need:

card_mod:
  style: |
    ha-state-icon {

rest should then work.

RkcCorian · January 12, 2024, 6:11pm

I’m not restricted to this specific color. I just had a look which colors are defined and tried to use a standard one. And this is working with custom:mushroom-cover-card (see example below) but by whatever reason not for the custom:mushroom-template-card. This I do not understand…

  - type: custom:mushroom-cover-card
    entity: cover.hausrollladen
    tap_action:
      action: more-info
    show_position_control: true
    show_tilt_position_control: false
    show_buttons_control: true
    layout: horizontal
    double_tap_action:
      action: toggle
    name: Haus
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            background: none !important;
          } 
        .: |
          ha-state-icon {
           color: 
             {% if is_state(config.entity, 'open') %}
               {% if state_attr(config.entity, 'current_position') > 0 %} 
                 var(--accent-color)
               {% else %}
               {% endif %};
             {% else %}
             {% endif %};
          }

Example colors that I see with “inspect”…

RkcCorian · January 12, 2024, 6:13pm

The alternative solution would be to use custom:mushroom-entity-card but I do not get the code working for the specific icon AND the removal of the background. I feel I have a syntax error but do not know where

  - type: custom:mushroom-entity-card
    entity: sensor.hausbefeuchtung
    tap_action:
      action: more-info
    card_mod:
      style: |
        ha-state-icon {
          --card-mod-icon: mdi:mushroom;
        }
        .: |
          mushroom-shape-icon$: |
            .shape {
              background: none !important;
              }

dimitri.landerloos · January 12, 2024, 6:23pm

cant have 2 | in a row which you have here (you actually even have 3):

style: |
  .: |
    mushroom-shape-icon$: |

your code should look like this:

- type: custom:mushroom-entity-card
  entity: sensor.hausbefeuchtung
  tap_action:
    action: more-info
  card_mod:
    style: 
      mushroom-shape-icon$: |
        .shape {
          background: none !important;
        }
      .: |
        ha-state-icon {
          --card-mod-icon: mdi:mushroom;
        }

take a look at the guide in my profile at the section about what .: | and $ do.

r_anand · January 12, 2024, 7:35pm

Shower animation is going down.

      - type: custom:mushroom-template-card
        entity: switch.shower_pump_plug
        tap_action:
          action: more-info
        icon: |
          {% if is_state(entity,'on') %}
            mdi:shower-head
          {% else %}
            mdi:power-plug-off
          {% endif %}
        icon_color: |
          {% if states('sensor.shower_pump_plug_power') | float(0) |int > 20 %}
            orange
          {% endif %}
        card_mod:
          style: |
            {% if states('sensor.shower_pump_plug_power') | float(0) |int > 20
            %}
            ha-state-icon {
              animation: clip 0.7s ease-out infinite;
             }
            @keyframes clip {
              0% {clip-path: inset(0 0 45% 0); }
              100% { clip-path: inset(0 0 0 0); }
              }
            } 
            {% endif %}   
            ha-card {
              background: transparent;
              border-style: none;
              --spacing:0px
            } 
            :host {
              padding: 0px;
            }  
            mushroom-shape-icon {
             --shape-color: none !important;
             }

What am I doing wrong here ? Can you help please ?

RkcCorian · January 12, 2024, 7:41pm

This is working finally, many thanks!! Just for others and to have it complete for similar use cases where I need to use the template-card… with below code it is working with standard color (example below with --error-color) for the custom:mushroom-entity-card but not for the custom:mushroom-template-card. Is this because of a mistake with me or a lack of implementation at the custom:mushroom-template-card?

Dashboard (above custom:mushroom-entity-card with proper color, below custom:mushroom-template-card with wrong color)

Code

type: vertical-stack
title: Klima
cards:
  - type: custom:mushroom-entity-card
    entity: sensor.hausbefeuchtung
    tap_action:
      action: more-info
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            background: none !important;
          }
        .: |
          ha-state-icon {
            {% if is_state(config.entity, 'Aus') %}
              --card-mod-icon: mdi:air-humidifier-off;
            {% elif is_state(config.entity, 'Leer') %}
              --card-mod-icon: mdi:water-off-outline;
            {% else %} 
              --card-mod-icon: mdi:air-humidifier;
            {% endif %}
           color: 
             {% if is_state(config.entity, 'Aus') %} 
               var(--icon-color-disabled)
             {% elif is_state(config.entity, 'Leer') %}
               var(--error-color)
             {% else %}
             {% endif %};
          }
  - type: custom:mushroom-template-card
    entity: sensor.hausbefeuchtung
    icon: |
      {% if is_state(config.entity, 'Aus') %}
        mdi:air-humidifier-off
      {% elif is_state(config.entity, 'Leer') %}
        mdi:water-off-outline
      {% else %} 
        mdi:air-humidifier
      {% endif %}
    primary: '{{ state_attr(config.entity, ''friendly_name'') }}'
    secondary: '{{ states(config.entity) }}'
    tap_action:
      action: more-info
    double_tap_action:
      action: toggle
    icon_color: |
      {% if is_state(config.entity, 'Aus') %}
        var(--icon-color-disabled)
      {% elif is_state(config.entity, 'Leer') %}
        var(--error-color)
      {% else %}
      {% endif %}
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            background: none !important;
            }

pressurejetsolutions · January 12, 2024, 7:50pm

Cant get aminated icons to work copy and pasted and just see icon not moving.
anyone have this problem. so confued as i have card-mod installed and working
as im using it for sytling on layout and but cant get any of the animated icons going

dimitri.landerloos · January 12, 2024, 7:57pm

just scroll up in this topic from the bottom a bit and you can see that i have linked to updated animations many times. its likely you are using old ones.

if that is not the case, please post your code so we can actually help.

seanmccabe · January 12, 2024, 8:26pm

Thats perfection thank you sir.

What did you change? Try to do a diff check, but not seeing what changed.

Casita · January 12, 2024, 8:47pm

Hello, is it possible to make text on 2 lines so that I can have 2 template chips side by side. For example, I would like this rendering:

Today red remains 11
Tarif 0,73 | 0,13

dimitri.landerloos · January 12, 2024, 10:53pm

the template cards dont accept straight css.

saying var(--error-color) is not something it knows. you will need to tell it the color you want to use unless you are going to use card mod like your entity card example. so like this:

    type: custom:mushroom-template-card
    icon: |
      {% if is_state(config.entity, 'Aus') %}
        mdi:air-humidifier-off
      {% elif is_state(config.entity, 'Leer') %}
        mdi:water-off-outline
      {% else %} 
        mdi:air-humidifier
      {% endif %}
    primary: '{{ state_attr(config.entity, ''friendly_name'') }}'
    secondary: '{{ states(config.entity) }}'
    entity: sensor.alarm_time
    tap_action:
      action: more-info
    double_tap_action:
      action: toggle
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            background: none !important;
          }
        .: |
          ha-state-icon {
            {% if is_state(config.entity, 'Aus') %}
              color: var(--icon-color-disabled) !important;
            {% elif is_state(config.entity, 'Leer') %}
              color: var(--error-color) !important;
            {% endif %}
          }

also to note, i would recommend almost never doing what you have done here:

RkcCorian:

           color: 
             {% if is_state(config.entity, 'Aus') %} 
               var(--icon-color-disabled)
             {% elif is_state(config.entity, 'Leer') %}
               var(--error-color)
             {% else %}
             {% endif %};
          }

i understand the temptation, but doing this leads to inconsistent application of the color when the card is loaded. just have the full entry in each if section like i have done above.

dimitri.landerloos · January 12, 2024, 10:57pm

try to not wrap the entire section in your if statement. only wrap the actual animation part like this. see if that helps.

type: custom:mushroom-template-card
entity: switch.shower_pump_plug
tap_action:
  action: more-info
icon: |
  {% if is_state(entity,'on') %}
    mdi:shower-head
  {% else %}
    mdi:power-plug-off
  {% endif %}
icon_color: |
  {% if states('sensor.shower_pump_plug_power') | float(0) |int > 20 %}
    orange
  {% endif %}
card_mod:
  style: |
    ha-state-icon {
      {% if states('sensor.shower_pump_plug_power') | float(0) |int > 20 %}
        animation: clip 0.7s ease-out infinite;
      {% endif %}   
    }
    @keyframes clip {
      0% {clip-path: inset(0 0 45% 0); }
      100% { clip-path: inset(0 0 0 0); }
    }
    ha-card {
      background: transparent;
      border-style: none;
      --spacing:0px
    } 
    :host {
      padding: 0px;
    }  
    mushroom-shape-icon {
      --shape-color: none !important;
    }

dimitri.landerloos · January 12, 2024, 10:58pm

seanmccabe:

                card_mod: null
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-padding: 0 0 0 10px;
                  }

vs

LiQuid_cOOled:

            card_mod:
              style: |
                ha-card {
                 --chip-box-shadow: none;
                 --chip-background: none;
                 --chip-padding: 0 0 0 10px;
                 }

see the difference? incorrect indentation at your card_mod: section and then having a null that was generated because of the incorrect indentation.

RkcCorian · January 12, 2024, 11:03pm

Many thanks!!! Also for the hint to make it better

dimitri.landerloos · January 12, 2024, 11:03pm

You can do it with a css pseudo element if you use card mod. but you cant do this by default no.

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:test-tube
    icon_color: green
    content: 1st Line
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      span:after {
        content: '2nd Line';
        display: flex;
        padding-top: 0.3em;
        color: var(--secondary-text-color);
      }