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

This has got to be one of the best threads on this forum. I came from a Micasaverde Vera 2 earlier this year and could not be happier with Home Assistant and Mushrooms Cards with some customization. Thanks to Paul for making it and all of you in this thread who’ve posted tweaks to customize it! Here’s a look at my current dashboard.

22 Likes

Yes, that can be done like this:

type: custom:mushroom-light-card
entity: light.office_light
show_brightness_control: true
card_mod:
  style: |
    mushroom-shape-icon {
      {{ '--card-mod-icon: mdi:lightbulb;' if is_state(config.entity, 'on') else '--card-mod-icon: mdi:lightbulb-off;' }}
      --icon-color-disabled: rgb(var(--rgb-green));
      --shape-color-disabled: rgba(var(--rgb-green), 0.2);
    }
2 Likes

Yes, you can like this:

type: custom:mushroom-template-card
primary: It's hot
icon: mdi:fire
icon_color: red
entity: sensor.lounge_sensor_temperature
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        {{ '--shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;' if states(config.entity) > '29' }}
      }
      @keyframes ping {
        0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
        100% { box-shadow: 0 0 5px 15px transparent; }
      }
      @keyframes blink {
        100% {opacity: 0;}
      }

thanks for this.
this is what i mean.

The waste will be collected in 2 days.
when I choose this:

if states(config.entity) > ‘2’ }}

it just stops blinking.
that means if I choose 0 (today), it will also stop blinking.

can i make it blink when the sensor reaches 0 days?

Thank you! Had a problem with Browser Mod, seems to be working now.

1 Like

Would it be possible to share your config for the browser_mod.popup?

I have a problem with the edges when there is a light with brightness slide.

Works like a charm! Thanks man!

Just amazing…

mind sharing the code ?

If you wanted it to blink at zero the condition would be states(config.entity) == '0'.

Wow that looks Nice. Would you be able to share some code? :slight_smile:

1 Like

Hey,

I’m trying on a chip to see if I can get these rings pulsing when a motion sensor within my group is active. Currently it only change color, but it would be nice if is possible to do the same as for an entity card:

image

Here is the code for the chip and a picture of the changing icon.

image

          - type: template
            entity: binary_sensor.motion_sensors
            card_mod:
              style:
                mushroom-shape-icon$: |
                  .shape {
                    {% if is_state('binary_sensor.motion_sensors', 'on') %}
                        --shape-animation: ping 1s infinite
                    {% endif %}

                  }
                  @keyframes ping {
                    0% {
                      box-shadow: 0 0 5px 1px rgba(var(--rgb-pink), 0.7);
                    }
                        
                    100% {
                      box-shadow: 0 0 5px 15px transparent;
                    }
                  }
            icon: >-
              {{ 'mdi:motion-sensor-off' if
              is_state('binary_sensor.motion_sensors', 'off') else
              'mdi:motion-sensor' }}
            icon_color: >-
              {{ 'green' if is_state('binary_sensor.motion_sensors', 'off') else
              'red' }}
            content: null
            tap_action:
              action: more-info

EDIT: I think I got it:

          - type: template
            entity: binary_sensor.motion_sensors
            card_mod:
              style: |
                ha-card {
                  {% if is_state('binary_sensor.motion_sensors', 'on') %}
                      animation: ping 1s infinite
                  {% endif %}

                }
                @keyframes ping {
                  0% {
                    box-shadow: 0 0 5px 1px rgba(var(--rgb-pink), 0.7);
                  }
                        
                  100% {
                    box-shadow: 0 0 5px 15px transparent;
                  }
                }

image

5 Likes

Hi,
I was curious how you get all your batteries when you click on the chip?
I just copied/pasted your code to try it out, but I only get batteries with “0%” ?
What do I have to change?

I saw this piece of code, but that is for the chip itself, right
{% if battery_level < 10 %}

image

1 Like

thanks for your help.
now when i set it to 0 it starts blinking.

the waste will be collected in 1 day.
If I set it to 1, it just stops blinking.

I would just like it to blink when the garbage is collected (at 0 days).

EDIT:

fixed with this:

       card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
               {{ '--shape-animation: ping 2s infinite;' if is_state('sensor.afvalwijzer_next_in_days', '0') }}
              }
               @keyframes ping {
               0% { box-shadow: 0 0 0 0 rgba(var(--rgb-black), 0.7); }
               100% { box-shadow: 0 0 5px 15px transparent; }
              }
               @keyframes blink {
               100% {opacity: 0;}
              }
1 Like

thank you man you are awesome!

1 Like

Nice man & can you share config ?

this is now only for the office version is it also possible for the on version?

Is it possible to acheive this in the UI?

Nope but I provided the yaml code in that post.

Thank you for responding :slight_smile:
Ok so I need to create a template, what folder do I put the yaml in? :slight_smile:

Yeah iOS has some weird issues that don’t seem to happen on anything else. Try this code.


      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: light.all_lights
                state: 'on'
            chip:
              type: entity
              icon: mdi:lightbulb
              entity: sensor.count_lights_on
              icon_color: amber
              tap_action:
                action: fire-dom-event
                browser_mod:
                  service: browser_mod.popup
                  data:
                    title: Lights On
                    content:
                      type: custom:auto-entities
                      filter:
                        include:
                          - domain: light
                            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: 12px 12px !important;
                                    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16);
                                    background: rgba(255, 152, 0, 0.1);
                                  }
                          - entity_id: sensor.count_lights_on
                            state: 'on'
                            options:
                              type: custom:mushroom-light-card
                              layout: horizontal
                              secondary_info: none
                              tap_action:
                                action: toggle
                              card_mod:
                                style: |
                                  ha-card {
                                    background: rgba(var(--rgb-state-light), 0.1);
                                  }
                        exclude:
                          - domain: light
                            attributes:
                              type: browser_mod
                          - entity_id: light.all_lights
                          - entity_id: light.indoor_lights
                          - entity_id: light.outdoor_lights
                          - entity_id: light.kitchen_lights
                          - entity_id: light.family_room_lights
                          - entity_id: light.foyer_lights
                          - entity_id: light.master_bedroom_lights
                          - entity_id: light.ceiling_fan
                          - entity_id: light.ceiling_fan_2
                          - entity_id: light.front_door_ring_light
                          - entity_id: light.master_bathroom_lights
                      card:
                        type: custom:layout-card
                        layout:
                          margin: '-26px 10px -11px 10px'
                        cards: []
                        layout_type: masonry
                      sort:
                        method: friendly_name

4 Likes