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

Works!

And it made all the difference. Thank you!

How are you so quick in responding? Much much appreciated

I get a notification when someone replies to me directly :wink:

Of course, but what I mean to say is that you spot the correction pretty quick and reply right away. haha

Anyway, any tips on the easiest way to change the background image of my dashboard?

I have uploaded an image in www under a newly created folder called pictures.
I think I am supposed to refer to it as /local/pictures/wallpaper_2.png
Does this go into Raw Configuration under views:?

Best way is probably to edit your theme. Great documentation on themes here:

And here:

When you have written a guide on how to style almost any element in the mushroom cards you tend to get quite familiar with the syntax so i can pretty quickly just see what is going wrong :slight_smile:

Guide i am talking about is here:

Hi Folks,
I’ve been wrangling with code for days, basically I’d like when a certain electrical outlet is turned on the washing machine icon to use shake animation, I report the code, does anyone have any idea why nothing happens?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Bagno
    secondary: |-
      {{ states('sensor.meter_plus_9197') }}°C |
      {{ states('sensor.meter_plus_9197_umidita') }} %
    icon: mdi:bathtub
    entity: light.bedroom_lights
    icon_color: |-
      {% if is_state('light', 'on') %} 
        orange 
      {% elif is_state('light', 'on') %}
        orange
      {% elif is_state('light.', 'on') %}
        orange
      {% endif %}
    tap_action:
      action: navigate
      navigation_path: /lovelace/bagno
    hold_action:
      action: none
    multiline_secondary: false
    layout: horizontal
    fill_container: true
    double_tap_action:
      action: none
    card_mod:
      style: |
        ha-card
          {background: transparent;
           border-style: none;
            --icon-size: 95px;
          }
        :host {
          --mush-icon-size: 77px;
          height: 66px;
          margin-left: -35px !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: Entity
        entity: switch.smart_plug_1801166035215925131634298f110baf_outlet
        double_tap_action:
          action: none
        content_info: none
        icon: mdi:washing-machine
        tap_action:
          action: more-info
        hold_action:
          action: none
        card_mod: null
        style: |
            ha-state-icon
            {
              {% if is_state('switch.smart_plug_1801166035215925131634298f110baf_outlet','on') %}
              animation: shake 400ms ease-in-out infinite;
              transform-origin: 50% 58%;
              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);
            }
            @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); } 
            }
    alignment: end

Try like this. you cant access the icon of a chip through the chip itself. you have to dig from the main chip card to the correct chip.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Bagno
    secondary: |-
      {{ states('sensor.meter_plus_9197') }}°C |
      {{ states('sensor.meter_plus_9197_umidita') }} %
    icon: mdi:bathtub
    entity: light.bedroom_lights
    icon_color: |-
      {% if is_state('light', 'on') %} 
        orange 
      {% elif is_state('light', 'on') %}
        orange
      {% elif is_state('light.', 'on') %}
        orange
      {% endif %}
    tap_action:
      action: navigate
      navigation_path: /lovelace/bagno
    hold_action:
      action: none
    multiline_secondary: false
    layout: horizontal
    fill_container: true
    double_tap_action:
      action: none
    card_mod:
      style: |
        ha-card
          {background: transparent;
           border-style: none;
            --icon-size: 95px;
          }
        :host {
          --mush-icon-size: 77px;
          height: 66px;
          margin-left: -35px !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: Entity
        entity: switch.smart_plug_1801166035215925131634298f110baf_outlet
        double_tap_action:
          action: none
        content_info: none
        icon: mdi:washing-machine
        tap_action:
          action: more-info
        hold_action:
          action: none
    alignment: end
    card_mod:
      style:
        mushroom-entity-chip:nth-child(1)$: |
          ha-state-icon {
            {% if is_state('switch.smart_plug_1801166035215925131634298f110baf_outlet','on') %}
              animation: shake 400ms ease-in-out infinite,  wash 1s ease-in-out infinite;
              transform-origin: 50% 58%;
            {% else %}

            {% endif %}
          }
          @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 wash {
            50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
          }

check out my mushroom card mod guide here:

Hi!,
Works!, brilliant thanks for the code, now i have understand my errors, thank you very much.
I will study the documentation you provided me also

Have nice day

They’re 5:4 here’s the code.


          - show_state: false
            show_name: false
            camera_view: auto
            type: picture-entity
            entity: camera.blue_iris_front_right
            name: Front Door
            aspect_ratio: '5:4'
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  card_mod:
                    style:
                      ha-dialog$: |
                        div.mdc-dialog__scrim {
                          -webkit-backdrop-filter: blur(10px) !important;
                        }
                  content:
                    type: vertical-stack
                    cards:
                      - type: custom:mushroom-template-card
                        primary: Front Right
                        secondary: Foscam
                        icon: mdi:cctv
                        icon_color: blue
                        card_mod:
                          style:
                            mushroom-shape-icon$: |
                              ha-state-icon {
                                animation: scan 5s ease-in-out infinite;
                                transform-origin: 90% 80%
                              }
                              @keyframes scan {
                                0%, 100% { transform: rotate(20deg); }
                                50% { transform: rotate(-15deg); }
                              }
                            .: |
                              ha-card {
                                margin-left: 2px;
                      - show_state: false
                        show_name: false
                        camera_view: live
                        type: picture-entity
                        entity: camera.blue_iris_front_right
                        card_mod:
                          style: |
                            ha-card {
                              margin-right: 14px;
                              margin-left: 14px;
                              margin-top: -4px;

Dont know if this has been discussed before. but i have consistently wondered whether you could apply a box-shadow to the icon itself. and it is apparently possible which also means that you can animate it like this:
Untitled video - Made with Clipchamp (90)Untitled video - Made with Clipchamp (91)
it is not technically a box-shadow. but it is a filter with the drop-shadow attribute.

type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
card_mod:
  style: |
    ha-state-icon {
      animation: ping 2s ease-in-out infinite;
    }
    @keyframes ping {
      0% {filter: drop-shadow(0px 0px 0px rgba(var(--rgb-green), 1));}
      80% {filter: drop-shadow(0px 0px 35px transparent);}
      100% {filter: drop-shadow(0px 0px 0px transparent);}
    }

If you wanted to just add a shadow thats similar to the minimalist theme default (probably also close to mushroom theme) then the below should do it :slight_smile:
SmartSelect_20230822_182846_Home Assistant

card_mod:
  style: |
    ha-state-icon {
      filter: drop-shadow(2px 2px 3px rgba(var(--rgb-black), 0.4));
    }

Just thought it was cool, so figured i would post about it here :slight_smile:

6 Likes

Hello, something similar could be done for the color of the icon, which would be set to the color of the configured entity Using card type, template

Thank you!

Sorry is this a question or a statement? if it is a question, then yes. something like this should work:

  card-mod-card-yaml: |
    .: |
      ha-card.type-custom-mushroom-light-card ha-state-icon{
        {% if config.entity is defined %}
          {% if states(config.entity) == 'on' and state_attr(config.entity, 'rgb_color') != none %}
            color: rgba({{ state_attr(config.entity,'rgb_color') | join(', ')}}, 1) !important;
          {% endif %}
        {% endif %}
      }

or if you just want to set it to whatever color based on the state of an entity you can do it like this:

  card-mod-card-yaml: |
    .: |
      ha-card.type-custom-mushroom-light-card ha-state-icon{
        {% if config.entity is defined %}
          {% if states(config.entity) == 'on' %}
            color: green !important;
          {% else %}
            color: red !important;
          {% endif %}
        {% endif %}
      }

the first if defined check is just to ensure that the card wont be affected at all if no entity with that name exists. otherwise the icon would be colored with nothing which will look strange :slight_smile:

1 Like

Hi All,

I need some help fixing this code. I want to animate motion sensor but it is not working.

type: custom:mushroom-template-card
primary: Open Plan
secondary: |-
  {% if is_state(entity, "on") %} 
    Detected 
  {% else %} 
    Clear 
  {% endif%}
icon: |-
  {% if is_state(entity, "on") %} 
    mdi:motion-sensor 
  {% else %}
    mdi:motion-sensor-off 
  {% endif %}
entity: binary_sensor.62_ms_dining_room_motion
icon_color: |-
  {% if is_state(entity, "on") %} 
    red 
  {% else %} 
    grey 
  {% endif %}
layout: vertical
fill_container: true
multiline_secondary: true
tap_action:
  action: none
hold_action:
  action: none
double_tap_action:
  action: none
card_mod:
  style:
    mushroom-shape-icon$: |
      {% if is_state(config.entity, 'on') %}
      .shape {
        --shape-animation: motion 2s linear infinite;
      }
      @keyframes motion {
        0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); }
        50% { --shape-color: rgba(var(--rgb-blue), 0.2); }
      }
    .: |
      ha-state-icon {
        animation: clip 2s linear infinite;
      }
      @keyframes clip {
        50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
      }
      {% endif %}

Thank you.

Try like this.

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        {% if is_state(config.entity, 'on') %}
          --shape-animation: motion 2s linear infinite;
        {% else %}
  
        {% endif %}
      }
      @keyframes motion {
        0%, 100% { background: rgba(var(--rgb-blue), 0.3); }
        50% { background: rgba(var(--rgb-blue), 0.2); }
      }
    .: |
      ha-state-icon {
        {% if is_state(config.entity, 'on') %}
          animation: clip 2s linear infinite;
        {% else %}

        {% endif %}
      }
      @keyframes clip {
        50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
      }

not recommended to put your if statements so far outside of your targeted objects.

put your if statement inside the object you want to style, and then the only variable should be the specific thing you are changing in the object. in this case the color of the background of the shape. and then the clip path change in the icon.

2 objects being targeted, so better to have 2 if statements in this case. i also threw in an {% else %} for good measure. but it is not required :slight_smile:

This is such a nice theme, really like the square icons. What I don’t like, is that the map is dark and very hard to read. I tried to figure out how to change this, but can’t… :frowning: Would prefer a light colored map, even though the theme is dark.

Any ideas, can I change this in mushroom-square.yaml? Any help is greatly appreciated.

Greetings from Mannheim, Germany

My solution strays a bit from the mushroom cards discussion because it doesnt edit the mushroom theme, or a mushroom card. but you can do this in the specific map card if you had it in a card.

type: map
entities:
  - entity: person.dimitri_landerloos
dark_mode: false
card_mod:
  style:
    ha-map$: |
      #map.dark {
        --map-filter: none !important;
      }
      #map {
        --map-filter: none !important;
      }

Now since you dont have it in a card, i can understand why you would want to change it in a theme. but i have unfortunately not been able to find a way to do that.

So for now the only real solution i can offer you is to make a browser mod popup card that opens the map that you want and apply the above card_mod to it, instead of having the popup be more-info.

sorry but that is all could figure out for now…

2 Likes

Hi Dimitri,

wow, you put a lot of thought into this. I am pretty new to this stuff, I will look into your suggestion in the next few days…

Thank you

1 Like

I had to try right away. Got your code implemented, works like a charm. I installed browser mod and now I am stuck!! I don’t have the hint of an idea how to implement a button for the pop-up… :cry:

Thank you. I will try this out and let you know

So lets say you have a mushroom template card, that when you click on it like a normal card, instead of the “more info” dialog popping up you want a different card to pop up.

you can do it like this:

type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
entity: light.office_main_light
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      content:
        type: map
        entities:
          - entity: person.dimitri_landerloos
        dark_mode: true
        card_mod:
          style:
            ha-map$: |
              #map.dark {
                --map-filter: none !important;
              }
              #map {
                --map-filter: none !important;
              }

The tap_action and below will remain the same no matter what mushroom card you use :slight_smile:

1 Like

Hi Dimitri

I applied this code but it is still not working, no animation, do you mind having a look when you have a few minutes?

Thank you