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

SoulAssassin · February 9, 2024, 4:23pm

Guys, as far as I understand, it’s impossible to make only the icon rotate without the main text?

        - type: custom:mushroom-template-card
          primary: Fan
          icon: mdi:fan
          icon_color: teal
          layout: vertical
          entity: light.bathroom_dimmer_fan
          card_mod:
            style: |
                ha-card {
                  border: none !important;
                  box-shadow: 0px 0px;
                  animation: rotation linear infinite;
                  {% if states('light.bathroom_dimmer_fan') == 'on' %}
                  animation-duration: 2s;
                  {%- else -%}
                  {%- endif %}
                }
                @keyframes rotation {
                  0% {
                    transform: rotate(0deg);
                  }
                  100% {
                    transform: rotate(360deg);
                  }
                }

dimitri.landerloos · February 9, 2024, 4:25pm

Look at the updated animations that i have linked to many many times in this thread.

dimitri.landerloos · February 9, 2024, 4:27pm

No you definitely can.

        - type: custom:mushroom-template-card
          primary: Fan
          icon: mdi:fan
          icon_color: teal
          layout: vertical
          entity: light.bathroom_dimmer_fan
          card_mod:
            style: |
                ha-card {
                  border: none !important;
                  box-shadow: 0px 0px;
                }
                ha-state-icon {
                  animation: rotation linear infinite;
                  {% if states('light.bathroom_dimmer_fan') == 'on' %}
                  animation-duration: 2s;
                  {%- else -%}
                  {%- endif %}
                }
                @keyframes rotation {
                  0% {transform: rotate(0deg);}
                  100% {transform: rotate(360deg);}
                }

SoulAssassin · February 9, 2024, 4:29pm

Oh, thanks homie It seemed to me that I had already tried everything, including the examples here… apparently I missed it.

jata · February 9, 2024, 9:38pm

This is a known issue - but not a bug. It’s go to do with a clearing the cache.

github.com/piitaya/lovelace-mushroom

Icons are missing in Mushroom card with Home Assistant 2024.2

opened 08:22AM - 08 Feb 24 UTC

closed 12:45PM - 09 Feb 24 UTC

whyyouhateme

important

### Requirements - [X] I checked the troubleshooting section in the README to… verify that I have the latest Mushroom version. - [X] I did a search to see if there is a similar issue or if a pull request is open. - [X] I have read the state of card mod support (in pin issues) and understand card mod support is not provided in this repository. ### Current Behavior Missing icons on almost all cards after upgrading to 2024.2.0. I installed the latest Mushroom update, it didn't help. Some cards help to assign the icon manually, but when reset to default again disappears. UPDATE Icons do not work only when connected directly. They appear when connecting through a domain with SSL certificate. I cleaned cookies and cache for direct connection, it didn't help. ### Expected Behavior _No response_ ### Steps To Reproduce _No response_ ### Context YAML state ```yaml ``` ### Environment ```markdown - Browser:Chrome - HA Version: 2024.2.0 - Mushroom: 3.4.2 ``` ### Anything else? _No response_

I used this fix and all is good now.

jkseamons · February 9, 2024, 11:11pm

Try this.

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 65px auto 15px
      margin: '-4px -4px -8px -4px;'
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.air_filter_days_remaining
        icon: mdi:air-filter
        icon_color: |
          {% set filter_days = states(entity) | int %}
          {% if filter_days < 11 %} 
            red
          {% elif filter_days < 41 %}
            orange
          {% else %}
            green
          {% endif %} 
        card_mod:
          style: |
            ha-card {
              border-width: 0px;
              background: none;
              --ha-card-box-shadow: 0px;
            }
      - type: custom:bar-card
        entity: sensor.air_filter_days_remaining
        height: 42px
        min: '0'
        max: '120'
        entity_row: true
        severity:
          - color: green
            from: 40 
            to: 90
          - color: orange
            from: 10
            to: 39
          - color: red
            from: 0
            to: 9
        positions:
          icon: 'off'
          indicator: 'off'
        card_mod:
          style: |
            ha-card {
              border-width: 0px;
              padding: 12px;
              margin-left: 12px;
              --bar-card-border-radius: 12px;
            }
            bar-card-value {
              margin: 12px;
              font-size: 12px;
              font-weight: bolder;
            }
            bar-card-name {
              margin: 12px;
              font-size: 12px;
              font-weight: bolder;
            }
            bar-card-backgroundbar {
              opacity: 0.2;
              filter: brightness(1);
            }
      - type: custom:mushroom-template-card
        entity: input_boolean.furnace_filter_dropdown
        icon: mdi:chevron-down
        icon_color: disabled
        hold_action:
          action: none
        card_mod:
          style: |
            ha-state-icon {
              transition: transform 0.14s !important;
              {{ 'transform: rotate(-180deg);' if is_state(config.entity, 'on') }}
            }
            ha-card {
              border-width: 0px;
              align-items: flex-end;
              background: none;
              --ha-card-box-shadow: 0px;
              padding-left: 20px!important;
            }
            mushroom-shape-icon {
              --shape-color: None !important;
            }
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-entity-card
        entity: input_datetime.air_filter_last_replaced
        icon: mdi:calendar
        name: Last Replaced
        layout: vertical
        primary: state
        secondary: Date Replaced
        card_mod:
          style: |
            ha-card { 
              border-width: 0px;
              width: 130px;
              margin-left: auto;
              margin-right: auto;
            } 
      - type: custom:mushroom-entity-card
        entity: sensor.air_filter_days_remaining
        name: Since Replaced
        layout: vertical
        primary_info: state
        secondary_info: name
        card_mod:
          style: |
            ha-card { 
              border-width: 0px;
              width: 130px;
              margin-left: auto;
              margin-right: auto;
            } 
      - type: custom:mushroom-entity-card
        entity: input_number.air_filter_threshold
        icon: mdi:calendar-edit
        name: Interval
        layout: vertical
        primary_info: state
        secondary_info: name
        tap_action:
          action: none
        hold_action:
          action: more-info
        double_tap_action:
          action: none
        card_mod:
          style: |
            ha-card { 
              border-width: 0px;
              width: 130px;
              margin-left: auto;
              margin-right: auto;
            } 
      - type: custom:mushroom-template-card
        primary: Reset
        secondary: ''
        icon: mdi:refresh
        layout: vertical
        tap_action:
          action: none
        hold_action:
          action: call-service
          service: script.reset_air_filter_date_to_today
          data: {}
          target: {}
        double_tap_action:
          action: none
        card_mod:
          style: |
            ha-card { 
              border-width: 0px;
              width: 130px;
              margin-left: auto;
              margin-right: auto;
            }           
    card_mod:
      style: |
        ha-card { 
          border-width: 0px;
          margin-top: -14px;
        }
card_mod:
  style: |
    ha-card {
      {{ 'height: 66px;' if is_state('input_boolean.furnace_filter_dropdown', 'off') }}
    }

balazsmark · February 10, 2024, 5:44am

Right, thank you! Resetting frontend cache in companion app under debugging section did the trick. Now it’s back to normal.

mase · February 10, 2024, 8:25am

hey guys,

i got a row of 4 chips and i´m trying to color the background of the different chips based on the state of an entity using card_mod. however i don´t get it working.

anyone knows what´s wrong?

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:numeric-1
    content: 'OFF'
    entity: input_text.test
  - type: template
    icon: mdi:numeric-2
    content: PV
    entity: input_text.test
  - type: template
    icon: mdi:numeric-3
    content: MINPV
    entity: input_text.test
  - type: template
    icon: mdi:numeric-4
    content: MAX
    entity: input_text.test
card_mod:
  style: |
    ha-card {
      {% if is_state(config.entity, 'off') %}
        --chip-background: red;
      {% else %}
      {% if is_state(config.entity, 'PV') %}
        --chip-background: red;
      {% else %}
      {% if is_state(config.entity, 'MINPV') %}
        --chip-background: red;
      {% else %}
      {% if is_state(config.entity, 'MAX') %}
        --chip-background: red;
      {% else %}
      {% endif %}
    }

dt1000 · February 10, 2024, 8:32am

Hi there.
I am setting up some Climate Cards. I activated a few HVAC modes and the buttons appear on the card, but there are no icons.

2024-02-10 08_29_15-Castle Taylor-Morgan – Home Assistant

Have I missed a step in the settings?

Here is my code…

type: custom:mushroom-climate-card
entity: climate.thunderbox_hq
hvac_modes:
  - heat
  - auto
  - 'off'
tap_action:
  action: more-info
show_temperature_control: false
layout: horizontal

Thanks in advance for the help!

SOLUTION: Fixed in the latest update!

LiQuid_cOOled · February 10, 2024, 8:47am

The short answer… Let me know if you need additional help adding your logic.

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:numeric-1
    content: 'OFF'
    entity: input_text.test

  - type: template
    icon: mdi:numeric-2
    content: PV
    entity: input_text.test

  - type: template
    icon: mdi:numeric-3
    content: MINPV
    entity: input_text.test

  - type: template
    icon: mdi:numeric-4
    content: MAX
    entity: input_text.test
card_mod:
  style: |
    .chip-container *:nth-child(1) {
      --chip-background: yellow !important;
    }
    .chip-container *:nth-child(2) {
      --chip-background: red !important;
    }
    .chip-container *:nth-child(3) {
      --chip-background: green !important;
    }
    .chip-container *:nth-child(4) {
      --chip-background: blue !important;
    }

card_mod:
  style: |
    .chip-container *:nth-child(1) {
       {% if is_state('light.pc_lights', 'on') %}
        --chip-background: red !important;;
       {% else %}
        --chip-background: grey !important;
      {% endif %}
        }

mase · February 10, 2024, 9:06am

that worked. thank you
just to understand it if i run in something like that again: i have to do it for every nth-child, it´s not possible to use something like {% if is_state(config.entity, 'off') %}? would simplyfy the code

LiQuid_cOOled · February 10, 2024, 9:08am

I think this is what you are looking for. Simplified

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        content: PV
        icon: mdi:numeric-1
      - type: template
        icon: mdi:numeric-2
        content: MINPV
      - type: template
        icon: mdi:numeric-3
        content: MAX
      - type: template
        icon: mdi:power
        content: 'Off'
    card_mod:
      style:
        .: |
          {% set mode =  states('light.pc_lights') %}
          ha-card {
             padding: 10px  !important;
             --chip-height: 40px !important;
             }
          .chip-container * {
            
            --color: rgb(var(--rgb-primary-text-color)) !important;
          }
          .chip-container *:nth-child(
            {% if mode == "PV" %} 1
            {% elif mode == "MINPV" %} 2
            {% elif mode == "MAX" %} 3
            {% elif mode == "off" %} 4
            {% endif %}
               ) {
            --chip-background: red !important;

           }

My entity was used. Will highlight the state base on the state of input_text.test

mase · February 10, 2024, 9:20am

you´re awesome. thanks!

ScottKendall · February 10, 2024, 2:23pm

ok…I don’t have an input.boolean field…where does that get created? Is that a helper action, if so, how should it be created? Sorry for the noob questions…just trying to wrap my head around this mush card setup (which is beautiful)

SoulAssassin · February 10, 2024, 4:06pm

Guys, please tell me, can the counter entity be added as badge to mushroom-template-card?

jkseamons · February 10, 2024, 5:53pm

Yes, you will need to create that under Settings > Devices & services > Helpers > + CREATE HELPER > Toggle

Morcegolas · February 10, 2024, 7:46pm

Hello, I need some help please.
I’m trying to change my mushroom dashboard, but I don’t know how to do 3 things and I’m seeking for some help.
On the left button, I have this window cover in the chips card that is a venetian blind, and it have the up/down position and the tilt position 0-100.
I want the up/down position to be represented by the icon, and the tilt position by the badge, knowing that the entity is cover.quarto_brinquedos_390_0_391 how can I do that?

The last thing is that I need to move the chips a little to the left so I can see all the badge.
Hope anyone can help me please.

Entity attributes:

current_position: 0
current_tilt_position: 0
device_class: blind
friendly_name: Janela Brinquedos
supported_features: 255

Code for the first button:

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Quarto Brinquedos
        secondary: >-
          {{
          states('sensor.sala_sala_sala_unknown_03_00_00_01_14_a4_temperature')
          | round(0) }} °C
        icon: mdi:unicorn-variant
        entity: light.toys_room_tx_ultimate_toys_room_tx_ultimate_l1
        tap_action:
          action: navigate
          navigation_path: quarto_brinquedos
        hold_action:
          action: toggle
        icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
        fill_container: true
        layout: horizontal
        multiline_secondary: false
        card_mod:
          style: |
            :host([dark-mode]) {
              background: rgba(var(--rgb-primary-background-color), 0.2);
            } 
            :host {
              background: rgba(var(--rgb-primary-text-color), 0.025);
              --mush-icon-size: 76px;
              height: 60px;
              margin-left: -20px !important;
            }
            ha-card {
              border-width: 0px;
              box-shadow: 0px 0px;
            }        
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: cover.quarto_brinquedos_390_0_391
            icon: mdi:window-shutter
            icon_color: blue
            card_mod:
              style: |
                ha-card:after {
                  content: "{{ expand(states.light.luzes_entrada) | selectattr( 'state', 'eq', 'on') | list | count }}";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: rgb(var(--rgb-orange));
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: -5px;
                  right: -5px;
                  width: 16px;
                  height: 16px;
                  font-size: 11px; 
                }
        alignment: end
        card_mod:
          style: |
            ha-card {
              --chip-border-width: 0px;
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: 0;
            } 
    card_mod:
      style: |
        ha-card {
          height: 102px;
          border-width: 0px;
          box-shadow: 0px 0px;
          {% if is_state('light.toys_room_tx_ultimate_toys_room_tx_ultimate_l1', 'on') %}
             background: rgba(255, 152, 0, 0.1);
          {% endif %}
        }```

ScottKendall · February 10, 2024, 8:33pm

I guess I didn’t clarify myself…what is the code that I need to put in my YAML to use the input_boolean in this card example?

jkseamons · February 10, 2024, 9:03pm

No YAML code needed. Just the helper itself. It’s only function is to hide/un-hide the additional info.

ScottKendall · February 10, 2024, 9:17pm

What helper option do I need to choose for this? My google fu didn’t turn up much