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

[scooby]

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.

[dimitri.landerloos]

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

[RobertoCravallo]

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… 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

[dimitri.landerloos]

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…

[RobertoCravallo]

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

[RobertoCravallo]

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…

[scooby]

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

[dimitri.landerloos]

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

[scooby]

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

[dimitri.landerloos]

Sure but you will need to post your code.

It works for me what i posted.

[scooby]

Hi, it is same as before

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$: |
      .shape {
        {% if is_state(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(entity, 'on') %}
          animation: clip 2s linear infinite;
        {% else %}

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

[dimitri.landerloos]

Hi, you seem to have replaced config.entity with just entity?

What i sent:

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

What you have in your if statements:

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

Just using entity works in the mushroom card itself. But that doesnt work for card-mod. You have to use config.entity

Just to show that it definitely works.

[berkans (Berkan Sezer)]

Thanks for the update…

[berkans (Berkan Sezer)]

So final preperations for the Live Tiles Dashboard before its release. If anyone has recommendations I would love to hear.

[McAllstar (Brett)]

Damn that looks good.
what about adding names in the fancy way you did it to some of the icons?

[galaxy]

@dimitri.landerloos
I have encountered a challenge which is definitely a bit above my understanding so far.

square: true
type: grid
cards:
  - square: false
    type: grid
    columns: 2
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:lightbulb-fluorescent-tube
        icon_color: |-
          {% set state=states('light.livingroom_lights') %}
          {% if state=='on' %}
          deep-purple
          {% elif state=='off' %}
          grey
          {% else %}
          grey
          {% endif %}
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --shape-color: none !important;
              }
            .: |
              :host {
                --mush-icon-size: 80px;
                height: 66px;
                margin-left: -15px !important;
                margin-top: 5px !important;
                background: none !important;
              }
        tap_action:
          action: none
        alignment: start
      - type: custom:mushroom-chips-card
        chips:
          - type: light
            entity: light.outside_lights
            use_light_color: true
        alignment: end
      - type: button
        name: Cabinet
        show_name: true
        icon: mdi:lightbulb-fluorescent-tube
        show_icon: false
    card_mod:
      style: |-
        ha-card {
          height: 130px;
          width: 130px;
          background: none !important;
          {% if states('light.outside_lights') == 'on' %}
          box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
          {% else %}
          box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
          {% endif %}      
          {% if is_state('light.outside_lights', 'on') %}
            background: rgba(255, 152, 0, 0.1) !important;
          {% endif %}
          }
  - square: false
    type: grid
    columns: 2
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:lightbulb-fluorescent-tube
        icon_color: |-
          {% set state=states('light.livingroom_lights') %}
          {% if state=='on' %}
          deep-purple
          {% elif state=='off' %}
          grey
          {% else %}
          grey
          {% endif %}
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --shape-color: none !important;
              }
            .: |
              :host {
                --mush-icon-size: 80px;
                height: 66px;
                margin-left: -15px !important;
                margin-top: 5px !important;
                background: none !important;
              }
        tap_action:
          action: none
        alignment: start
      - type: custom:mushroom-chips-card
        chips:
          - type: light
            entity: light.outside_lights
            use_light_color: true
        alignment: end
      - type: button
        name: Cabinet
        show_name: true
        icon: mdi:lightbulb-fluorescent-tube
        show_icon: false
    card_mod:
      style: |-
        ha-card {
          height: 130px;
          width: 130px;
          background: none !important;
          {% if states('light.outside_lights') == 'on' %}
          box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
          {% else %}
          box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
          {% endif %}      
          {% if is_state('light.outside_lights', 'on') %}
            background: rgba(255, 152, 0, 0.1) !important;
          {% endif %}
          }
  - square: false
    type: grid
    columns: 2
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:lightbulb-fluorescent-tube
        icon_color: |-
          {% set state=states('light.livingroom_lights') %}
          {% if state=='on' %}
          deep-purple
          {% elif state=='off' %}
          grey
          {% else %}
          grey
          {% endif %}
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --shape-color: none !important;
              }
            .: |
              :host {
                --mush-icon-size: 80px;
                height: 66px;
                margin-left: -15px !important;
                margin-top: 5px !important;
                background: none !important;
              }
        tap_action:
          action: none
        alignment: start
      - type: custom:mushroom-chips-card
        chips:
          - type: light
            entity: light.outside_lights
            use_light_color: true
        alignment: end
      - type: button
        name: Cabinet
        show_name: true
        icon: mdi:lightbulb-fluorescent-tube
        show_icon: false
    card_mod:
      style: |-
        ha-card {
          height: 130px;
          width: 130px;
          background: none !important;
          {% if states('light.outside_lights') == 'on' %}
          box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
          {% else %}
          box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
          {% endif %}      
          {% if is_state('light.outside_lights', 'on') %}
            background: rgba(255, 152, 0, 0.1) !important;
          {% endif %}
          }
columns: 3

This is working wonderfully well for one individual card.
When I am putting these in a grid, this is how it is coming out. I tried my best to format the YAML but I couldn’t do better than this. I have also lost the glow around the grid cards when lights are on.

Single card looks like this:

Please help.

[scooby]

Hi Dimitri
Thank you. I started with config.entity as you said but that did not work, so I changed it to entity

I have change it back to config.entity, It is changing colour but no animation. Do I need to install some other add-on?

[dimitri.landerloos]

Well you will need card-mod if you dont have it already.

[scooby]

Thank you. I just checked my HACS to see if I have that, and I didn’t. It is all working now. Thank you

[Mattia2399]

Hello everyone, someone who can take this project of mine and update it. Unfortunately I had little time available