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

[zgadson (Zach)]

Can anyone help me set the color of my brightness slider bar and the max height of my card? I have never been successful with themes but I’ve managed just fine without them until now.

Here’s my code:

                type: custom:mushroom-light-card
                entity: light.basement_lights
                show_brightness_control: true
                primary_info: none
                secondary_info: none
                icon_type: none
                style: |
                  ha-card {
                   height: 60px;
                    background: transparent !important;}

In short, my slider bar is too thick, so I was hoping to use the height element to shrink it down a bit. I’d also like my slider bar to be lime green. My transparent background works just fine, and height works in every other card, but not in Mushrooms.

Thank you!

[silvio]

Tx for the reply mate. I already started adding the css to all pop up elements. This is a pain in the xxx.

[cloudbr34k (Apples)]

Has anyone designed an appliance page , to monitor your appliances
? Just looking for inspiration. This is what I have so far

[schnuggo]

Is it possible, to fix a chip card in the first row?
When scrolling down on that page, that the first row with the chip card is all time visible?
I have a back button realized in every room to come back to the main dashboard. When scrolling down in the room, i have to scroll up to see the back button again.

[artpcpl]

@cloudbr34k

Has anyone designed an appliance page , to monitor your appliances
? Just looking for inspiration. This is what I have so far

Looks good can u share your code, THX

[Sddawson]

Out of interest, what are you using to monitor your pool chemical status? I’m using a Blue Connect.

[cloudbr34k (Apples)]

So I bought your tuya 6 in 1 wifi pool from AliExpress. I have compared it when I get my pool tested and salinity had been bang on and ph was off by.25. so I’m pretty happy with it.
You have to use LocalTuya anf pull in the data as the tuya integration only shows temperature

AU $14.03 44%OFF | Wifi Digital Water Quality Tester Wall Mounted 6 in 1 Water Analyzer PH/ EC/ TDS/ SALT/ G.S/ Temperature APP Remote Monitoring
https://a.aliexpress.com/_mPEaFao

[nsf (Nuno)]

Guys, i’m pulling my hair.
I’m trying to set an icon (fan) to rotate according to the speed of a fan based on it’s power consumption. But I just cant make it work. The best I was able to do was to make the whole card rotate. I tried @rhysb code, from here: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #1188 by rhysb
Can someone point me un the right direction.

[brewston (Tim Jones)]

I’ve got some code for that, mine looks at

'fan.hot_tub_pump_1', 'preset_mode'

and adjusts the rotation speed.

type: custom:mushroom-template-card
primary: null
secondary: null
icon: mdi:pump
icon_color: blue
picture: ''
card_mod:
  style: |
    mushroom-shape-icon {
      display: flex;
      border-radius: 60%;
      {% if (state_attr('fan.hot_tub_pump_1', 'preset_mode') == "HI") %}
      animation: rotation-pulse 1s linear infinite;
      {% elif (state_attr('fan.hot_tub_pump_1', 'preset_mode') == "LO") %}
      animation: rotation-pulse 3s linear infinite;    
      {% endif %}
     }
    @keyframes rotation-pulse {
      0% {
        box-shadow: 0 0 0 0 rgb(var(--rgb-blue), 0.8);
        transform: rotate(0deg);
      }
      70% {
        box-shadow: 0 0 0 10px rgba(var(--rgb-blue), 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(var(--rgb-blue), 0);
        transform: rotate(360deg);
      }
    }

    ha-card {
      background: none ;
      width: 65px;
      display: flex;
     }

[Sddawson]

Very interesting. So localtuya is an HA integration that can talk to this device? Have you plumbed the sensors into your pool piping, and, if so, how? Maybe this would be best via DM or something, since it’s a bit off-topic here.

[peetereczek]

Could you please share your yaml for this card?

[cloudbr34k (Apples)]

which code are you after, or section or image do you want code for?

[codedmind]

I think is better share the code for each image

[cloudbr34k (Apples)]

type: vertical-stack
cards:
  - camera_view: auto
    type: picture-glance
    title: Pool & Garden
    entities: []
    aspect_ratio: '4'
    theme: Mushroom
    camera_image: ''
    image: >-
      https://img.freepik.com/free-vector/house-swimming-pool-with-deck-chairs_107791-1868.jpg?w=1800&t=st=1658959684~exp=1658960284~hmac=8aa467512948cba314cf5ff8afbb3dd045a25077d24b7de7c74e2af127c3d55c
  - square: false
    columns: 6
    type: grid
    cards:
      - type: custom:mushroom-template-card
        secondary: '{{ states(''sensor.pool_average_temperature'') }}°C'
        primary: ''
        icon: mdi:pool-thermometer
        entity: sensor.pool_average_temperature
        icon_color: '#85C1E9'
        layout: vertical
        tap_action:
          action: call-service
          service: browser_mod.popup
          data:
            content:
              type: vertical-stack
              cards:
                - type: custom:mini-graph-card
                  entities:
                    - entity: sensor.pool_average_temperature
                      color: '#85C1E9 '
                  name: Daily Pool Temperature Max
                  show:
                    graph: line
                  hours_to_show: 24
                  points_per_hour: 1
                  animate: true
                - type: custom:mini-graph-card
                  entities:
                    - entity: sensor.pool_average_temperature
                      color: '#85C1E9 '
                  name: Weekly Pool Temperature Max
                  show:
                    graph: bar
                  group_by: date
                  aggregate_func: max
                  hours_to_show: 168
                  animate: true
                - type: custom:mini-graph-card
                  entities:
                    - entity: sensor.pool_average_temperature
                      color: '#85C1E9 '
                  name: Monthly Pool Temperature Max
                  show:
                    graph: bar
                  group_by: date
                  aggregate_func: max
                  hours_to_show: 720
                  animate: true
            title: Pool Temperature Graphs
          target: {}
        badge_color: ''
        badge_icon: ''
        multiline_secondary: false
        fill_container: false
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
              }
      - type: custom:mushroom-template-card
        secondary: '{{ states(''sensor.pool_multi_sensor_ph'')}} ppm'
        primary: ''
        icon: mdi:ph
        icon_color: '#009688'
        layout: vertical
        tap_action:
          action: call-service
          service: browser_mod.popup
          data:
            content:
              type: vertical-stack
              cards:
                - type: custom:mini-graph-card
                  entities:
                    - entity: sensor.pool_multi_sensor_ph
                      color: '#009688'
                  name: 24hr pH
                  show:
                    graph: line
                  hours_to_show: 24
                  points_per_hour: 1
                  animate: true
                - type: custom:mini-graph-card
                  entities:
                    - entity: sensor.pool_multi_sensor_ph
                      color: '#009688'
                  name: Weekly pH
                  show:
                    graph: bar
                  group_by: date
                  aggregate_func: max
                  hours_to_show: 168
                  animate: true
                - type: custom:mini-graph-card
                  entities:
                    - entity: sensor.pool_multi_sensor_ph
                      color: '#009688'
                  name: Monthly pH
                  show:
                    graph: bar
                  group_by: date
                  aggregate_func: max
                  hours_to_show: 720
                  animate: true
            title: Pool pH
          target: {}
        badge_color: ''
        badge_icon: ''
        multiline_secondary: false
        fill_container: false
        entity: sensor.pool_multi_sensor_ph
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
              }
      - type: custom:mushroom-template-card
        secondary: '{{ states(''sensor.pool_multi_sensor_salinity'')}} ppm'
        primary: ''
        icon: mdi:flask
        entity: sensor.pool_multi_sensor_salinity
        icon_color: '#F1948A'
        layout: vertical
        tap_action:
          action: call-service
          service: browser_mod.popup
          data:
            content:
              type: vertical-stack
              cards:
                - type: custom:mini-graph-card
                  entities:
                    - entity: sensor.pool_multi_sensor_salinity
                      color: red
                  name: 24hr Salinity
                  show:
                    graph: line
                  hours_to_show: 24
                  points_per_hour: 1
                  animate: true
                - type: custom:mini-graph-card
                  entities:
                    - entity: sensor.pool_multi_sensor_salinity
                      color: red
                  name: Weekly Salinity Max
                  show:
                    graph: bar
                  group_by: date
                  aggregate_func: max
                  hours_to_show: 168
                  animate: true
                - type: custom:mini-graph-card
                  entities:
                    - entity: sensor.pool_multi_sensor_salinity
                      color: '#F1948A'
                  name: Monthly Salinity Max
                  show:
                    graph: bar
                  group_by: date
                  aggregate_func: max
                  hours_to_show: 720
                  animate: true
            title: Pool Salinity Graphs
          target: {}
        badge_color: ''
        badge_icon: ''
        multiline_secondary: false
        fill_container: false
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
              }
      - type: custom:mushroom-template-card
        secondary: '{{ states(''sensor.pool_multi_sensor_tds'')}} ppm'
        primary: ''
        icon: mdi:molecule
        entity: sensor.pool_multi_sensor_tds
        icon_color: '#7DCEA0'
        layout: vertical
        tap_action:
          action: call-service
          service: browser_mod.popup
          data:
            content:
              type: vertical-stack
              cards:
                - type: custom:mini-graph-card
                  entities:
                    - entity: sensor.pool_multi_sensor_tds
                      color: '#7DCEA0 '
                  name: 24hr TDS
                  show:
                    graph: line
                  hours_to_show: 24
                  points_per_hour: 1
                  animate: true
                - type: custom:mini-graph-card
                  entities:
                    - entity: sensor.pool_multi_sensor_tds
                      color: '#7DCEA0'
                  name: Weekly TDS
                  show:
                    graph: bar
                  group_by: date
                  aggregate_func: max
                  hours_to_show: 168
                  animate: true
                - type: custom:mini-graph-card
                  entities:
                    - entity: sensor.pool_multi_sensor_tds
                      color: '#7DCEA0'
                  name: Monthly TDS
                  show:
                    graph: bar
                  group_by: date
                  aggregate_func: max
                  hours_to_show: 720
                  animate: true
            title: Pool Total Dissolvable Solutions
          target: {}
        badge_color: ''
        badge_icon: ''
        multiline_secondary: false
        fill_container: true
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
              }
      - type: custom:mushroom-template-card
        secondary: '{{ states(''sensor.pool_multi_sensor_ec'')}} ppm'
        primary: ''
        icon: mdi:lightning-bolt
        entity: sensor.pool_multi_sensor_ec
        icon_color: '#F8C471'
        layout: vertical
        tap_action:
          action: call-service
          service: browser_mod.popup
          data:
            content:
              type: vertical-stack
              cards:
                - type: custom:mini-graph-card
                  entities:
                    - entity: sensor.pool_multi_sensor_ec
                      color: '#F8C471 '
                  name: 24hr EC
                  show:
                    graph: line
                  hours_to_show: 24
                  points_per_hour: 1
                  animate: true
                - type: custom:mini-graph-card
                  entities:
                    - entity: sensor.pool_multi_sensor_ec
                      color: '#F8C471'
                  name: Weekly EC
                  show:
                    graph: bar
                  group_by: date
                  aggregate_func: max
                  hours_to_show: 168
                  animate: true
                - type: custom:mini-graph-card
                  entities:
                    - entity: sensor.pool_multi_sensor_ec
                      color: '#F8C471'
                  name: Monthly EC
                  show:
                    graph: bar
                  group_by: date
                  aggregate_func: max
                  hours_to_show: 720
                  animate: true
            title: Pool Electrical Conductivity Graphs
          target: {}
        badge_color: ''
        badge_icon: ''
        multiline_secondary: false
        fill_container: false
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
              }
      - type: custom:mushroom-template-card
        secondary: '{{ states(''sensor.zodiac_exo_chlorine_production_value'')}} %'
        primary: ''
        icon: mdi:chemical-weapon
        entity: sensor.zodiac_exo_chlorine_production_value
        icon_color: '#C39BD3'
        layout: vertical
        tap_action:
          action: more-info
        badge_color: ''
        badge_icon: ''
        multiline_secondary: false
        fill_container: false
        hold_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
              }

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: ''
    subtitle: Pool Equipment
  - type: vertical-stack
    cards:
      - type: custom:mushroom-climate-card
        entity: climate.pool_heater
        show_temperature_control: false
        hvac_modes:
          - heat
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
              }
  - square: false
    columns: 3
    type: grid
    cards:
      - type: custom:stack-in-card
        cards:
          - type: custom:mushroom-template-card
            secondary: null
            primary: Chlorinator
            icon: >-
              {{ state_attr('binary_sensor.zodiac_exo_chlorinator_status',
              'icon') }}
            entity: binary_sensor.zodiac_exo_chlorinator_status
            icon_color: >-
              {% set state=states('binary_sensor.zodiac_exo_chlorinator_status')
              %}

              {% if state=='off' %}

              disabled

              {% elif state=='on' %}

              green

              {% elif state=='unavailable' %}

              red

              {% endif %}
            layout: vertical
            tap_action:
              action: more-info
            badge_color: ''
            fill_container: false
            card_mod:
              style:
                mushroom-shape-icon$: |
                  .shape {
                    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
                  }
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                entity: binary_sensor.zodiac_exo_chlorine_production_status
                icon: >-
                  {% set
                  state=states('binary_sensor.zodiac_exo_chlorine_production_status')
                  %} {% if state=='on' %} mdi:flask-plus {% elif state=='off' %}
                  mdi:chemical-weapon {% elif state=='unavailable' %}
                  mdi:chemical-weapon {% endif %}
                icon_color: >-
                  {% set
                  state=states('binary_sensor.zodiac_exo_chlorine_production_status')
                  %} {% if state=='on' %} green {% elif state=='off' %} disabled
                  {% elif state=='unavailable' %} red {% endif %}
                tap_action:
                  action: more-info
                content: ''
                hold_action:
                  action: more-info
              - type: template
                entity: binary_sensor.zodiac_app_connnection_status
                icon: >-
                  {% set
                  state=states('binary_sensor.zodiac_app_connnection_status') %}

                  {% if state=='on' %}

                  mdi:api

                  {% elif state=='off' %}

                  mdi:api-off

                  {% endif %}
                icon_color: >-
                  {% set
                  state=states('binary_sensor.zodiac_app_connnection_status') %}

                  {% if state=='on' %}

                  green

                  {% elif state=='off' %}

                  red

                  {% endif %}
                tap_action:
                  action: more-info
                content: ''
                hold_action:
                  action: more-info
              - type: template
                entity: sensor.zodiac_exo_error_state
                icon: |-
                  {% set state=states('sensor.zodiac_exo_error_state') %}
                  {% if state=='0' %}
                  mdi:alert-circle
                  {% elif state=='1' %}
                  mdi:alert-circle
                  {% endif %}
                icon_color: |-
                  {% set state=states('sensor.zodiac_exo_error_state') %}
                  {% if state=='0' %}
                  disabled
                  {% elif state=='1' %}
                  red
                  {% endif %}
                tap_action:
                  action: more-info
                content: ''
                hold_action:
                  action: more-info
            alignment: center
            card_mod:
              style: |
                ha-card {
                  --chip-box-shadow: none;
                  --chip-background: none;
                  --chip-spacing: 0;            
      - type: custom:stack-in-card
        cards:
          - type: custom:mushroom-template-card
            primary: >-
              {{ state_attr('binary_sensor.zodiac_pool_filter_pump',
              'friendly_name') }}
            secondary: null
            icon: '{{ state_attr(''binary_sensor.zodiac_pool_filter_pump'', ''icon'') }}'
            tap_action:
              action: more-info
            layout: vertical
            icon_color: |-
              {% set state=states('binary_sensor.zodiac_pool_filter_pump') %}
              {% if state=='off' %}
              disabled
              {% elif state=='on' %}
              green
              {% elif state=='unavailable' %}
              red
              {% endif %}
            multiline_secondary: false
            fill_container: false
            entity: binary_sensor.zodiac_pool_filter_pump
            card_mod:
              style:
                mushroom-shape-icon$: |
                  .shape {
                    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
                  }
          - type: custom:mushroom-chips-card
            chips:
              - type: entity
                entity: sensor.zodiac_exo_chlorinator_schedule_start_time
              - type: entity
                entity: sensor.zodiac_exo_chlorinator_schedule_end_time
            alignment: center
            card_mod:
              style: |
                ha-card {
                  --chip-box-shadow: none;
                  --chip-background: none;
                  --chip-spacing: 0;
                }
      - type: custom:stack-in-card
        cards:
          - type: custom:mushroom-template-card
            primary: Pool Cleaner
            secondary: null
            icon: mdi:robot-mower
            entity: sensor.robot_pool_cleaner_power_status
            picture: ''
            badge_icon: ''
            icon_color: |-
              {% set state=states('sensor.robot_pool_cleaner_power_status') %}
              {% if state=='On' %}
              green
              {% elif state=='Off' %}
              disabled
              {% endif %}
            layout: vertical
            tap_action:
              action: more-info
            fill_container: false
            card_mod:
              style:
                mushroom-shape-icon$: |
                  .shape {
                    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
                  }
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                entity: sensor.robot_pool_cleaner_voltage_status
                icon: >-
                  {% set
                  state=states('sensor.robot_pool_cleaner_voltage_status') %}

                  {% if state=='On' %}

                  mdi:flash-triangle

                  {% elif state=='Off' %}

                  mdi:flash-triangle

                  {% endif %}
                icon_color: >-
                  {% set
                  state=states('sensor.robot_pool_cleaner_voltage_status') %}

                  {% if state=='On' %}

                  green

                  {% elif state=='Off' %}

                  red

                  {% endif %}
              - type: template
                entity: sensor.robot_pool_cleaner_power_status
                icon: >-
                  {% set state=states('sensor.robot_pool_cleaner_power_status')
                  %}

                  {% if state=='On' %}

                  mdi:flash

                  {% elif state=='Off' %}

                  mdi:flash

                  {% endif %}
                icon_color: >-
                  {% set state=states('sensor.robot_pool_cleaner_power_status')
                  %}

                  {% if state=='On' %}

                  green

                  {% elif state=='Off' %}

                  disabled

                  {% endif %}
            alignment: center
            card_mod:
              style: |
                ha-card {
                  --chip-box-shadow: none;
                  --chip-background: none;
                  --chip-spacing: 0;
                }
        card_mod:
          style: |
            ha-card { 
              {% if is_state('sensor.robot_pool_cleaner_plug_power', '{% if is_number(state) and state | float >= 1 %}') %}
              background: rgba(76, 175, 80, 0.1);
                  {% endif %}
            }

[codedmind]

Thanks.
Can you share also the code for the first to pics… the applicances and the popup card.

[Andrea_Ciullini]

Hi,
can I use “badge icon” settings in custom:mushroom-person-card ?
this is my code, but badge icon doesn’t change:

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-person-card
    entity: person.andrea
    use_entity_picture: true
    primary_info: name
    secondary_info: null
    layout: vertical
    badge_icon: >-
      {% if is_state('binary_sensor.cellulare_andrea_is_charging_2', 'on') -%}
        mdi:power-plug
      {%- elif is_state('binary_sensor.cellulare_andrea_is_charging_2', 'off')
      -%}
        mdi:power-plug-off
      {%- else -%}
        mdi:power-plug-off
      {%- endif %}
    badge_color: |-
      {% if is_state('binary_sensor.cellulare_andrea_is_charging_2', 'on') -%}
        red
      {%- endif %}
    card_mod:
      style: |
        mushroom-shape-avatar {    
          {{ 'filter: grayscale(100%);' if not is_state('person.andrea', 'home') }}
        }

thank you

[tvds (Tim)]

@wernazz

How do i manage to not put itin a conditional card so the cip is always displayed?
ive currently got something similar to your lights on yaml but without the nice layout which i would prefer.

I got it working based on your config … I have a light group: light.all_lights.

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: |
      {% if is_state('light.all_lights', 'off') %}
        mdi:lightbulb-multiple-off
      {% else %}
        mdi:lightbulb-multiple
      {% endif %}
    icon_color: |
      {% if is_state('light.all_lights', 'off') %}
        blue-grey
      {% else %}
        #FDD835
      {% endif %}
    entity: light.all_lights
    content: >-
      {{ expand(states.light.all_lights) | selectattr( 'state', 'eq','on')
      | list | count }}
    card_mod: null
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: Lichten aan
          content:
            type: custom:auto-entities
            filter:
              include:
                - group: light.all_lights
                  state: 'on'
                  options:
                    type: custom:mushroom-light-card
                    show_brightness_control: true
                    layout: horizontal
                    tap_action:
                      action: toggle
                    use_light_color: true
                    card_mod:
                      style: |
                        ha-card {
                          padding: 4px 12px !important;
                        }
              exclude:
                - domain: light
                  attributes:
                    types: browser_mod
            card:
              type: entities
              cards: []
              show_header_toggle: false
              sort:
                method: friendly_name
      target: {}

[nsf (Nuno)]

Thanks @brewston but I cant make it work.
Here’s the code I have. Icon color, secondary information, and badge icon work as expected based on the power usage of the fan.
But I cant get the fan rotation speed working based on the power usage. The way it is it’s the whole card that spins.
Can someone point me to the problem.
Thanks

type: custom:mushroom-template-card
primary: Ventilação
entity: sensor.ventilacao_power
icon: mdi:fan
secondary: |-
  {% set power = states('sensor.ventilacao_power') | int %}
  {% if power < 5 %} Standby
  {% elif power < 13 %} Mínimo
  {% elif power < 19 %} Médio
  {% elif power < 28 %} Máximo
  {% else %} Desligada
  {% endif %}
icon_color: |-
  {% set power = states('sensor.ventilacao_power') | int %}
  {% if power < 5 %} green
  {% elif power < 13 %} blue
  {% elif power < 19 %} amber
  {% elif power < 28 %} red
  {% else %} grey
  {% endif %}
badge_icon: |-
  {% set power = states('sensor.ventilacao_power') | int %}
  {% if power < 5 %} mdi:fan
  {% elif power < 13 %} mdi:numeric-1
  {% elif power < 19 %} mdi:numeric-2
  {% elif power < 28 %} mdi:numeric-3
  {% else %} mdi:fan-off
  {% endif %}
card_mod: null
style: |
    @keyframes rotation {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    ha-card {
      box-shadow: 0px 0px;
      animation: rotation linear infinite;
      {% if states('sensor.ventilacao_power') | float < 10 %}
        animation-duration: 5s;
      {% elif states('sensor.ventilacao_power') | float < 17 %}
        animation-duration: 3s;
      {% elif states('sensor.ventilacao_power') | float < 21 %}
        animation-duration: 1s;
      {%- else -%}
      animation-duration: ;
      {%- endif %}

[brewston (Tim Jones)]

You appear to applying the animation to ha-card whereas my example applies it to mushroom-shape-icon

[wernazz]

that worked perfectly thank you very much!