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

[lwsrbrts (Lewis Roberts)]

I did search but I’m sure someone will have beaten me to the punch somewhere in this thread but I wanted to animate my robot vacuum and couldn’t find any examples. Initially I was doing it in a template-entity-row and it took ages to find out how to do it there - so I adapted it to a mushroom card too so I could post.

I appreciate it’s not a complex one but might save someone else some time.

type: custom:mushroom-template-card
primary: Vacuum
icon: mdi:robot-vacuum
icon_color: white
layout: vertical
card_mod:
  style:
    .: |
      ha-state-icon {
        animation: vacuumMovement 4s infinite;
      }
      @keyframes vacuumMovement {
        0% {
          transform: translate(-5px,-5px) rotate(0deg);
        }
        12.5% {
          transform: translate(-5px,5px) rotate(0deg);
        }
        25% {
          transform: translate(-5px,5px) rotate(-90deg);
        }
        37.5% {
          transform: translate(5px,5px) rotate(-90deg);
        }
        50% {
          transform: translate(5px,5px) rotate(-180deg);
        }
        62.5% {
          transform: translate(5px,-5px) rotate(-180deg);
        }
        75% {
          transform: translate(5px,-5px) rotate(-270deg);
        }
        87.5% {
          transform: translate(-5px,-5px) rotate(-270deg);
        }
        100% {
          transform: translate(-5px,-5px) rotate(-360deg);
        }
      }

[dimitri.landerloos]

Dont sell yourself short - this is great and its always nice to post a solution.

[Crazycoder445]

Note: Current code sizes best for desktop viewing. If planning to use on mobile you can change the padding options

Nevermind, I have solved my own problem! I came up with this. It is essentially two mushroom template cards stacked vertically. The bottom card is using card mod to adjust the icon spacing, padding, and size to match what the mushroom lock card button looks like. This way you can set the button’s tap action to whatever you want. I included the code for both a normal layout/size and another for using it in a 2-column grid if anyone would like to use it!

Thanks!

Full Size:

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-template-card
    primary: Front Door
    secondary: >
      {% if is_state('binary_sensor.front_door_contact_sensor_intrusion','on')
      %}
        Door Open
      {% elif is_state('lock.front_door','unlocked') %}
        Unlocked
      {% else %}
        Locked
      {% endif%}
    icon: >-
      {% if is_state('binary_sensor.front_door_contact_sensor_intrusion','on')
      %}
        mdi:door-open
      {% elif is_state('lock.front_door','unlocked') %}
        mdi:lock-open
      {% else %}
        mdi:lock
      {% endif%}
    icon_color: >-
      {% if is_state('lock.front_door','locked') and
      is_state('binary_sensor.front_door_contact_sensor_intrusion','off') %}
        green
      {% else %}
        red
      {% endif%}
    badge_icon: >-
      {% set battery_level = (states('sensor.front_door_battery') | 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 %}
    badge_color: |-
      {% set battery_level = states('sensor.front_door_battery') | 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 %}
    tap_action:
      action: none
    hold_action:
      action: more-info
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: |-
      {% if is_state('lock.front_door','locked') %}
        mdi:lock-open
      {% else %}
        mdi:lock
      {% endif%}
    layout: vertical
    entity: script.front_door_lock_and_refresh
    tap_action:
      action: perform-action
      perform_action: script.front_door_lock_and_refresh
      target: {}
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --icon-symbol-size: 23px;
            --icon-size: 30px;
            padding-right: 420px;
            padding-left: 10px;
            padding-bottom: 10px;
            border-radius: 12px !important;
          }
        .: |
          ha-state-icon {
            padding-right: 3px;
            padding-left: 380px;
            padding-bottom: -20px;
            height: 15px;
            width: 50px;
            color: white;
          }
           ha-card {
            margin-top: -19px;
            margin-bottom: 1px;
            margin-left: 30px;
            margin-right: 30px;
            }
card_mod:
  style: |
    ha-card {
      {% if is_state('lock.front_door','locked') and
      is_state('binary_sensor.front_door_contact_sensor_intrusion','off') %}
          background: rgba(101,170,91,0.2);
      {% else %}
          background: rgba(226,84,66,0.2);
      {% endif %}
    }

Half Size:

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-template-card
    primary: Front Door
    secondary: >
      {% if is_state('binary_sensor.front_door_contact_sensor_intrusion','on')
      %}
        Door Open
      {% elif is_state('lock.front_door','unlocked') %}
        Unlocked
      {% else %}
        Locked
      {% endif%}
    icon: >-
      {% if is_state('binary_sensor.front_door_contact_sensor_intrusion','on')
      %}
        mdi:door-open
      {% elif is_state('lock.front_door','unlocked') %}
        mdi:lock-open
      {% else %}
        mdi:lock
      {% endif%}
    icon_color: >-
      {% if is_state('lock.front_door','locked') and
      is_state('binary_sensor.front_door_contact_sensor_intrusion','off') %}
        green
      {% else %}
        red
      {% endif%}
    badge_icon: >-
      {% set battery_level = (states('sensor.front_door_battery') | 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 %}
    badge_color: |-
      {% set battery_level = states('sensor.front_door_battery') | 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 %}
    tap_action:
      action: none
    hold_action:
      action: more-info
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: |-
      {% if is_state('lock.front_door','locked') %}
        mdi:lock-open
      {% else %}
        mdi:lock
      {% endif%}
    layout: vertical
    entity: script.front_door_lock_and_refresh
    tap_action:
      action: perform-action
      perform_action: script.front_door_lock_and_refresh
      target: {}
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --icon-symbol-size: 21px;
            --icon-size: 30px;
            padding-right: 170px;
            padding-left: 10px;
            padding-bottom: 10px;
            border-radius: 12px !important;
          }
        .: |
          ha-state-icon {
            padding-right: 3px;
            padding-left: 145px;
            padding-bottom: -20px;
            height: 12px;
            width: 5px;
            color: white;
          }
           ha-card {
            margin-top: -19px;
            margin-bottom: 1px;
            margin-left: 30px;
            margin-right: 30px;
            }
card_mod:
  style: |
    ha-card {
      {% if is_state('lock.front_door','locked') and
      is_state('binary_sensor.front_door_contact_sensor_intrusion','off') %}
          background: rgba(101,170,91,0.2);
      {% else %}
          background: rgba(226,84,66,0.2);
      {% endif %}
    }

[miketarg]

Thanks,

Just wanted to say that this worked perfectly

May I pick your brain again and ask if I want to do something similar however instead of showing what is not at zero value and rather show one of two sensors that are not set to off state. Followed by generic text For example:-

“Waiting for battery to charge to 80%”
(binary_sensor.battery_is_80)

Or

“Waiting for PV to generate over 2500kWh”
(binary_sensor.total_pv_power_helper)

As currently I have no idea of the correct syntax to use?

Regards Mike.

[Dmitry3650 (Dmitry)]

Hello, is it possible to make the same Gauge card using mushroom cards? If possible, does anyone have a code example?

[Eigeplackter]

Hi everybody,

as of now I have single custom:button-cards to change the source of my amp,
which works fine.

type: custom:button-card
entity: script.src_htpc
tap_action:
  action: perform-action
  perform_action: script.src_htpc
  target: {}
icon_tap_action:
  action: none
show_entity_picture: false
icon: phu:emby
layout_options:
  grid_columns: 2
  grid_rows: auto
show_state: false
show_name: false
card_mod:
  style: |
    :host {
      {% if is_state_attr('media_player.denon_avr_x2800h', 'source','HTPC') -%}
              --paper-item-icon-color: rgba(140, 20, 252,1) 
      {% else -%}
              --paper-item-icon-color: grey
      {%- endif %}
     }    
    ha-card {
      --ha-card-background: #;
      border-radius: 15px;
      box-shadow: rgba(140, 20, 252,1) 0px 1px 50px;important
    }   

Reading up on all those beatiful solutions that have amassed in (Part 1), this one triggered me.
I thought it would be a nice option to cut down on the amount of buttons on the dashboard.

I tried to adapt the given code to my needs but, looks like something that only a mother could love …

type: custom:layout-card
layout_type: grid
layout:
  grid-template-columns: 50% 50%
  grid-template-areas: |
    "A1 A2"
cards:
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        name: ''
        entity: input_select.denon
        show_state: true
        show_entity_picture: true
        entity_picture: /local/EMBY.png
        styles:
          card:
            - font-size: 2rem
            - font-weight: bold
          icon:
            - height: 4rem
            - width: 4rem
    view_layout:
      grid-area: A1
  - type: horizontal-stack
    view_layout:
      grid-area: A1
    cards:
      - type: custom:mushroom-select-card
        entity: input_select.denon
        secondary_info: none
        icon_type: none
        fill_container: true
        card_mod:
          style:
            mushroom-select-option-control$:
              mushroom-select$: |
                .mdc-select__anchor{
                  background: none !important;
                  border-radius: 20px !important;
                }
                .mdc-line-ripple::before {
                  border-bottom-width: 0px !important;
                }
                .mdc-line-ripple::after {
                  border-bottom-width: 0px !important;
                }
                .mdc-select__selected-text {
                  color: transparent !important;
                }
                .mdc-select__dropdown-icon {
                  fill: transparent !important;  
                }
                .mdc-select {
                  position: absolute !important;
                  width: 100% !important;
                  --select-height: 97px;
                  top: 0%;
                  right: 0%;
                }
            .: |
              ha-card {
               background: none;
              }
layout_options:
  grid_columns: 4
  grid_rows: auto

But I’m scratching my head, will get bloody soon , about 3 things:

1. Besides the overall look, I’d like to change the picture per source value, as in the original code with heat, cool…
   Just cant find where the other pictures, or better icons, are hidden in the code ?

2. When I change the source outside of HA, i.e. Alexa or a remote, the input_select.denon doesn’t seem to acknowledge ? How to change this ?

3. Why does it write Denon (brand of the amp) into the card ?
   I guess its the friendly_name of my input_select helper, which calls the automations.
   Is there a way to hide those names ?

Maybe someone could give me a push into the right direction, or enlight my nearly bloody head

[soulripper13]

Better use apex char cards

square: false
type: grid
show_name: false
cards:
  - type: custom:apexcharts-card
    chart_type: radialBar
    experimental:
      color_threshold: true
    header:
      show: true
      title: Climate
      show_states: true
      colorize_states: true
    series:
      - entity: sensor.humidity
        color_threshold:
          - value: 10
            color: red
          - value: 20
            color: orange
          - value: 40
            color: green
          - value: 50
            color: green
          - value: 60
            color: green
          - value: 70
            color: orange
          - value: 90
            color: red
        show:
          header_color_threshold: true
      - entity: sensor.temperature
        min: 0
        max: 35
        color_threshold:
          - value: 0
            color: MidnightBlue
          - value: 5
            color: RoyalBlue
          - value: 10
            color: DeepSkyBlue
          - value: 20
            color: GreenYellow
          - value: 23
            color: GreenYellow
          - value: 25
            color: Orange
          - value: 28
            color: OrangeRed
        show:
          header_color_threshold: true
    apex_config:
      plotOptions:
        radialBar:
          offsetY: 0
          startAngle: -90
          endAngle: 90
          dataLabels:
            name:
              show: false
            value:
              show: false
      legend:
        show: false
      fill:
        type: gradient
        opacity: 0.2
columns: 1

[Frosty]

that looks good. I like it.

@Dmitry3650

Hello, is it possible to make the same Gauge card using mushroom cards? If possible, does anyone have a code example?

there’s not much you can do imo with the standard gauge card but something like this.

type: custom:stack-in-card
cards:
  - type: gauge
    entity: sensor.lounge_temperature
    name: ''
    min: 0
    max: 35
    needle: false
    severity:
      green: 0
      yellow: 20
      red: 30
    card_mod:
      style:
        ha-gauge:
          $: |
            svg.text > .value-text {
              fill: none !important;
            }
            svg.gauge > .needle {
              fill: black !important;
            }
        .: |
          ha-card {
            background: transparent !important;
          }
  - type: custom:mushroom-template-card
    primary: |
      {{ states('sensor.lounge_temperature') }}°C
    secondary: Temperature
    icon: mdi:thermometer
    icon_color: blue
    layout: vertical
    card_mod:
      style: |
        ha-card {
          position: absolute;
          top: 40%;
          left: 41%;          
        }

[joostiphone (Joost)]

I’m using the Mushroom Template Badge for badges & icons which works great in the browser on a desktop, but doesn’t work when using the iOS app. What is causing this?

[Frosty]

I would say clear the cache in the app. I don’t have an iPhone so I can’t help past this point

[ciddi89 (Christian)]

Would also clear the cache under settings → companion app → debug → clear frontend cache or something like that. Then reload the dashboard. Maybe this helps you.

[joostiphone (Joost)]

Sjees, that was easy. Thanks!

[dimitri.landerloos]

Anytime updating a custom card, theme or the like, or even updating Homeassistant itself you should clear the cache.

The update for cards even tell you in the update notification that you need to do it

[skank]

Sorry for the questions but i got another one concerning mushroom update card.
How do you guys do this?
I would love to see all my updates in 1 mushroom update card…
But is that doable?
I got HA updates, core updates, os updates, unifi updates, addons updates etc etc…

Very curious

[Alessjo99]

Good evening, I updated my home assistant and I can no longer view the chips, I need your help.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Ingresso
    secondary: >-
      {{ states('sensor.ingresso_temperatura_e_umidita_temperatura') }} °C |  {{
      states('sensor.ingresso_temperatura_e_umidita_umidita') | int(0) }} %
    icon: mdi:door-open
    tap_action:
      action: navigate
      navigation_path: /lovelace-mushroom/ingresso
    icon_color: '#ffb52b'
    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: 50px;
          margin-left: -18px !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: |
          {% if is_state('binary_sensor.porta_ingresso_apertura', 'on') %}
            mdi:door-open
          {% else %}
            mdi:door
          {% endif %}
        icon_color: |
          {% if is_state('binary_sensor.porta_ingresso_apertura', 'on') %}
            red
          {% else %}
            grey
          {% endif %}
        entity: binary_sensor.porta_ingresso_apertura
        content_info: none
        card_mod: null
        style: |
          ha-card {
              box-shadow: 0px 0px;
          }
        tap_action:
          action: more-info
      - type: template
        icon: |
          {% if is_state('light.luce_ingresso', 'on') %}
            mdi:lightbulb
          {% else %}
            mdi:lightbulb
          {% endif %}
        icon_color: |
          {% if is_state('light.luce_ingresso', 'on') %}
            amber
          {% else %}
            grey
          {% endif %}
        entity: light.luce_ingresso
        content_info: none
        card_mod: null
        style: |
          ha-card {
              box-shadow: 0px 0px;
          }
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-size: 15px;
          --chip-spacing: -15px;
        } 
card_mod:
  style: |
    ha-card {
      height: 102px;
    }

[Dmitry3650 (Dmitry)]

Hello, please help me, how can I change the font color so that it is not white? how to change font size and style? I tried to do color: ‘#00bcd4’ in the styles section, but it doesn’t work… I’m probably doing something wrong.

  - type: custom:stack-in-card
    cards:
      - type: gauge
        entity: sensor.datchik_temperatury_i_vlazhnosti_zal_humidity
        name: humidity
        min: 0
        max: 100
        needle: false
        severity:
          green: 40
          yellow: 55
          red: 60
    card_mod:
      style:
        ha-gauge:
          $: |
            svg.text > .value-text {
              fill: none !important;
            }
            svg.gauge > .needle {
              fill: black !important;
            }
        .: |
          ha-card {
            border: none;
            background: none !important;
          }
    style:
      color: '#00bcd4'
      top: 77%
      left: 75%
      width: 40%

[Frosty]

you will have to ask in the card_mod thread as this is the mushroom thread, will get more help there.
but this will change the color

card_mod:
      style:
        ha-gauge:
          $: |
            svg.text > .value-text {
              fill: green !important;
            }

[Dmitry3650 (Dmitry)]

Thanks for the example of this map. I’m happy to use it. But the problem with the color was not solved, your method for changing the color does not want to work on my card…

[jeroenvdd89 (Jeroen)]

hi lads tiny question just to clean my stuff up,

type: custom:mushroom-template-card
primary: Wachtzaal
secondary: ''
icon: ''
entity: light.wachtz
layout_options:
  grid_columns: 1
  grid_rows: 1
layout: vertical
card_mod:
  style: |
    {% if is_state('light.wachtz','on') %}
     :host {
       --ha-card-background: var(--blue-grey-color);
     }
    {% endif %}

I use this verry simple card but I use it allot, is there a way to reference the entity directly in the style? so I don’t have to go out of visual editor and change that one too, when the entity gets updated?

[dimitri.landerloos]

{% if is_state(config.entity,'on') %}