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

flv1980 · April 4, 2022, 12:14pm

Hello, congratulations for the interface, it is wonderful.
I use card-mod and I’m trying to make an icon animation in a mushroom-entity-card but I can’t access the icon part.
For the styles of the car, I have put the following and it works very well but to make an animation in the icon nothing at all. Does anyone know what I should put?

icon_color: yellow
style: |
ha-card {
{% if is_state(‘switch.luz_bano_papas_l2’,‘on’) %}
–card-mod-icon: mdi:fan;
{% else %}
–card-mod-icon: mdi:bathtub-outline;
{% endif %}
margin: 1px;
box-shadow: 1px 1px 3px 1px gray;
{% if is_state(‘switch.light_bathroom_papas_l2’,‘off’) %}
–color1: {{states(‘input_text.color’)}};
{% else %}
–color1: yellow;
{% endif %}
–color2: {{states(‘input_text.color’)}};
border-radius:5px;animation: animation 4s line inf2inite;
-webkit-animation-name: test;
-webkit-animation-duration: 2.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
}
@keyframes test {
00%, 09%{background: linear-gradient(to right, transparent 80%, var(–color1, var(–color2)) 130%);}
10%, 19%{background: linear-gradient(to right, transparent 81%, var(–color1, var(–color2)) 130%);}
20%, 29%{background: linear-gradient(to right, transparent 82%, var(–color1, var(–color2)) 130%);}
30%, 39%{background: linear-gradient(to right, transparent 83%, var(–color1, var(–color2)) 130%);}
40%, 49%{background: linear-gradient(to right, transparent 84%, var(–color1, var(–color2)) 130%);}
50%, 59%{background: linear-gradient(to right, transparent 85%, var(–color1, var(–color2)) 130%);}
60%, 69%{background: linear-gradient(to right, transparent 84%, var(–color1, var(–color2)) 130%);}
70%, 79%{background: linear-gradient(to right, transparent 83%, var(–color1, var(–color2)) 130%);}
80%, 89%{background: linear-gradient(to right, transparent 82%, var(–color1, var(–color2)) 130%);}
90%, 99%{background: linear-gradient(to right, transparent 81%, var(–color1, var(–color2)) 130%);}
100%{background: linear-gradient(to right, transparent 80%, var(–color1, var(–color2)) 130%);}

    }
    }

Thanks!!

spoolin · April 4, 2022, 2:25pm

How can I hide/remove the ? icon for unavailable devices? I can see it says “Unavailable” for the status so I don’t need the question mark icon as well (it really bothers me seeing it).

Peter_Mattisson · April 4, 2022, 3:02pm

Would love this as well.

piitaya · April 4, 2022, 4:11pm

Be careful with card mod. The structure of the card (name of the components, class, etc…) may change at any time. I can not guarantee you that your override will work with the future update.

You can customize some elements with Mushroom Themes but fell free to propose/discuss about new css variables for customization.

If you want better customization, you’re better to use Minimalist.

The unavailable icon option is somethings that some people reports. I will propose an option to hide it

Posreg · April 4, 2022, 8:44pm

For me, as I’m hiding the state, questionmark helps to determming if it is off or unavailable .
THerefore I would rather go with Hide option rather than remove it

exxoff · April 5, 2022, 6:31am

The yaml code above is for a chip but you need to add it to you chip collection. Complete card:

type: custom:mushroom-chips-card
chips:
  - type: template
    double_tap_action:
      action: none
    entity: cover
    icon: |
      {% set state=states('cover.garage_door') %}
      {% if state=='closed' %}
      mdi:garage
      {% elif state=='open' %}
      mdi:garage-open
      {% else %}
      mdi:garage-alert
      {% endif %}
    icon_color: |-
      {% set state=states('cover.garage_door') %}
      {% if state=='closed' %}
      green
      {% elif state=='open' %}
      red
      {% else %}
      yellow
      {% endif %}
    content: Garage
    tap_action:
      action: toggle
    hold_action:
      action: none

cloudbr34k · April 5, 2022, 6:40am

exxoff:

type: custom:mushroom-chips-card
chips:
  - type: template
    double_tap_action:
      action: none
    entity: cover
    icon: |
      {% set state=states('cover.garage_door') %}
      {% if state=='closed' %}
      mdi:garage
      {% elif state=='open' %}
      mdi:garage-open
      {% else %}
      mdi:garage-alert
      {% endif %}
    icon_color: |-
      {% set state=states('cover.garage_door') %}
      {% if state=='closed' %}
      green
      {% elif state=='open' %}
      red
      {% else %}
      yellow
      {% endif %}
    content: Garage
    tap_action:
      action: toggle
    hold_action:
      action: none

hey super sorry, but can you explain how i can use this??
Do i use this in the Chip Code editor??

exxoff · April 5, 2022, 6:57am

Exactly!

cloudbr34k · April 5, 2022, 7:03am

thanks man, i dont know code, but examples help big time

cloudbr34k · April 5, 2022, 7:07am

this is my code
my garage door has a switch and a contact sensor, and im using the contact sensor in the example you provided, with some colour changes, but its not changing the icon or colour?

Right now its closed, but its showing as Orange?

Any help would be great

type: template
double_tap_action:
  action: none
entity: binary_sensor
icon: |
  {% set state=states('binary_sensor.garage_door_status') %}
  {% if state=='closed' %}
  mdi:garage-variant-lock
  {% elif state=='open' %}
  mdi:garage-open-variant
  {% else %}
  mdi:garage-alert-variant
  {% endif %}
icon_color: |-
  {% set state=states('binary_sensor.garage_door_status') %}
  {% if state=='closed' %}
  green
  {% elif state=='open' %}
  red
  {% else %}
  orange
  {% endif %}
content: Garage Door
tap_action:
  action: toggle
hold_action:
  action: call-service
  service: switch.toggle
  service_data: {}
  target:
    entity_id: switch.garage_door_opener

exxoff · April 5, 2022, 7:17am

That’s probably because a binary sensor is either “on” or “off”. In this case, the orange color is to be expected since you binary sensor is neither “open” nor “closed”.

I would suggest doing some testing in the template editor in the developer tools. This is not a Mushroom card issue so I don’t think we should continue here but send a PM if you need further assistance.

wifispray · April 5, 2022, 2:58pm

These are amazing dashbaords! So I have a question, is it possible to stretch or centre when you have an odd number of devices? Like below

Nameless · April 5, 2022, 7:23pm

This got me what I was looking for. Thanks for posting your example!

Turbo4door · April 5, 2022, 7:34pm

I’m still rather new to this, but can you expand on the template card for setting colors for an inactive state? I am using some entity cards to call scripts and would like to have the icons colored instead of greyed out.

Thanks,

FreakLikeMe · April 5, 2022, 8:41pm

add the last card not part of the grid but right after and use this code.

type: custom:mod-card
style: |
  ha-card {
     padding-right: 25%;
     padding-left: 25%;
  }
card:
  type: custom:mushroom-light-card
  entity: light.example

JerryAC · April 5, 2022, 9:31pm

Using the Mushroom Chip card for entities, is there a way to have them change colors based on state? I tried adding state color: true, but did not yield any change.

What I’m trying to achieve is for the entity to show home and away status in some form. The entity is a iPhone device tracker via HA Companion app. I like that I can click the icon and see where that person is on the map. Would just like it to show home or away and color coding green vs red if possible.

mtrista · April 5, 2022, 10:22pm

Just use the template chip, you can put a template for its color field.

JerryAC · April 6, 2022, 12:46am

The color field doesn’t seem to work on the second entity

exxoff · April 6, 2022, 5:09am

Check out my Garage door example above. It chages color based on state.

Lunkobelix · April 6, 2022, 7:09am

Thanks a lot, it helped and it is working now!