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

[Datwood2009 (Daniel)]

Did you find a solution? I’m in the same boat. I don’t see it in Lovelace. I can see other custom cards installed by HACS but not the mushroom card.

[BrianHanifin (Brian)]

@jmadden91

Has anyone found a way to create a shortcut to the Raw Config Editor?

Similar to the way the menu chip works, I would like to click the chip to bring me to edit mode or even better straight to the raw config editor.

Hoping to use something like this:

- type: custom:mushroom-chips-card
  alignment: center
  chips:
    - type: action
      icon: mdi:dots-vertical
      tap_action:
        action: navigate
        navigation_path: /lovelace-mobile/0?edit=1
 

Your code will work. However it requires you to immediately reload the that page to actually apply the edit mode.

[Lunkobelix]

No, unfortunately not. I also have other custom cards working but can’t get Mushroom cards to show up.

[mtrista]

I’m sorry for being late, but here’s my config for the conditional chip:

type: conditional
conditions:
  - state: 'on'
    entity: group.indoor_lights
chip:
  type: entity
  entity: group.indoor_lights
  icon_color: amber
  icon: mdi:lightbulb-on
  tap_action:
    action: more-info
  hold_action:
    action: call-service
    service: light.turn_off
    service_data: {}
    target:
      entity_id: group.indoor_lights
  double_tap_action:
    action: more-info

Here’s a template chip where you can put a template for the icon_color (but I just picked “light-blue” without a template):

type: template
content: '{{ states(entity) }} °F'
icon: '{{ state_attr(''sensor.outside_temperature_trend_text'', ''icon'') }}'
tap_action:
  action: fire-dom-event
  browser_mod:
    command: more_info
    entity_id: sensor.outside_temperature
    large: true
icon_color: light-blue
entity: sensor.outside_temperature

[mtrista]

By the way, an idea for improving the visuals: I would go ahead and put a mandated spacing between separate columns in the UI. When there’s no space, everything looks too confusing on a screen wider than a cellphone’s. I managed this in custom CSS (and nicer headers that match the UI Lovelace Minimalist by making them bold) by doing this, though I don’t think any of it can be done using themes, but as an integration developer, you may have a way around that:

.columns {
  flex-wrap: wrap; # (or flex-flow: row wrap;)
  column-gap: 50px;
}

.column {
  min-width: 360px;
}

.card-header {
  font-weight: bold;
}

[mtrista]

@Lunkobelix @Datwood2009 When I installed Mushroom a couple weeks ago, it wouldn’t work. I found out eventually that if I went to Settings → Dashboards → Resources, instead of saying /hacsfiles/lovelace-mushroom/mushroom.js?hacstag=xxxxxxxxxxx, it said /hacsfiles/lovelace-mushroom/null?hacstag=xxxxxxxxxxx (notice the null there).

I had to manually replace it with mushroom.js (and then clear my browser cache) for it to work. Maybe you guys have the same problem.

[Lunkobelix]

Thank you for your help! Was a bit surprised that I don’t have any reference at all to Mushroom under Resources. Shouldn’t that be added there automatically? I just today got an update notification for a new version to Mushroom so it is installed (and I have reinstalled it and rebooted).

[IamDan]

Any way to fix the text “Master Bedroom”? I would like it center it and have it on one line.
EDIT: Using a title card

[mtrista]

Hmm it should, but it’s flaky apparently. Try adding the one I showed in there, restart HA, clear browser cache, and see what happens.

[flv1980]

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]

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 (Pete)]

Would love this as well.

[piitaya (Paul)]

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 (Daros)]

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 (Per Rosen)]

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 (Apples)]

@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 (Per Rosen)]

Exactly!

[cloudbr34k (Apples)]

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

[cloudbr34k (Apples)]

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 (Per Rosen)]

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.