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

Share your Projects!
,
848

You can use a stack-in card to build what you want. Here’s a quick mock-up using mushroom media card, mushroom template cards, stack-in card, and card mod to remove the borders between the cards. You could use chips in place of the template cards if you wanted to slim it down some. Disregard the playlist icons, i copied some code from my welcome card :rofl:

Capture1

I do this a lot in my mobile dashboard. I’ve built a custom welcome card, custom person cards, and some others that all keep the look/feel of the original mushroom cards but combine them to make them into one card. I think it works well.

2 Likes
849

image

Made my own based on the actual containers :slight_smile:

2 Likes
850

What are you all using to reuse code like this over and over again? I want to use the chip below for each room and don’t want to copy and paste this large block of code. Are you using decluttering card or something like it?

- type: custom:mushroom-chips-card
  chips:
    - type: template
      double_tap_action:
        action: none
      icon_color: >-
        {{ 'disabled' if
        is_state("sensor.master_bedroom_lights_on", "0") else
        'amber' }}
      icon: >-
        {{ 'mdi:lightbulb-off' if
        is_state("sensor.master_bedroom_lights_on", "0") else
        'mdi:lightbulb-on' }}
      content: |-
        {% if is_state("sensor.master_bedroom_lights_on", "0") %}
          {0}
        {%- else -%}
          {{ states("sensor.master_bedroom_lights_on") }}
        {%- endif %}
      tap_action:
        action: none
      hold_action:
        action: none
  alignment: justify
2 Likes
851

wow a new Home assistant user and blown away by this! thx @piitaya !

so I have a few silly newer question :slight_smile:

I have used chips to look at state of door locks and door open. im trying to get the door unlock and door open state to color the entity in red when unlocked and open. problem is they both seem to act the opposite way :slight_smile:

ie for the locks I have this

type: entity
entity: lock.patio_door
icon_color: green
name: Patio
use_entity_picture: false

CleanShot 2022-05-18 at 18.21.36

now I can’t figure out how to make the lock green when locked but red when unlocked?

on the flip side for the contact sensor, its colorless when closed and would be great to also have it in green when closed.

finally is there a way to keep the state of the device (ie shutter open) yet also name the actual entity so I can tell the difference between my many devices (ie shutters, locks etc)

thx so much

Z

852

How can I remove the background and padding of a individual chip? ex. Like in the post above, how can I remove the grey oval card background?

853

Card-mod and this code at the end:

      card_mod: null
      style: |
        ha-card {
          background: none;
          box-shadow: none;
        }
854

Question- Does a browse media button exist for the Media Card? Just wondering if I have somehow missed it in the configuration for the card. Thanks for all these wonderful Mushroom Cards!

855

For state based coloring or naming you have to use the template chip as stated several times in this thread.

The code for your lock should be something like this:

{% if is_state('lock.patio_door', 'locked') %}
  green
{% elif is_state('lock.patio_door', 'unlocked') %}
  red
{% endif %}

AFAIK chip cards do not have a secondary info and in the template chip you only have content to fill and I don’t think you could put a line break in other cards than markdown.
But when you accomplished the coloring you could just put the name of the lock in the content field of the card.

Something like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    double_tap_action:
      action: none
    icon: mdi:door
    icon_color: |-
      {% if is_state('lock.patio_door', 'locked') %}
        green
      {% elif is_state('lock.patio_door', 'unlocked') %}
        red
      {% endif %}
    tap_action:
      action: none
    hold_action:
      action: none
    entity: lock.patio.door
    content: Patio
1 Like
856

Guess you only have it at more-info:

image

857

Thanks! Not ideal- but at least it is there.

858

I recently build my first dashboard (using HA before mainly for automations) using Mushroom cards and in love with what you can make with them. Amazing work by the author of them. Just wanted to add that positive message to this topic as support for the author.

859

thanks. using template card, I have this but how can I get rid of the colored background circle and space before the text (or ideally have the icon and numbers fit inside the colored circle)?
Screen Shot 2022-05-18 at 6.05.42 PM

860

Wow!!! so epic

thx so much for the time and detailed response, learned so much from it!!

best

Z

861

Add this input instead of ‘none’ in there:

              box-shadow: 0px 0px;

The Number is not part of the icon so you can’t put it both in the glowing circle.

862

hi @RodgerDodger

I tried to leverage the same approach to a contact sensor I have but that didn’t work, does that use a different approach?

entity: binary_sensor.frontdoor_contact
        icon_color: |-
          {% if is_state('binary_sensor.frontdoor_contact', 'closed') %}
            green
          {% elif is_state('binary_sensor.frontdoor_contact', 'open') %}
            red
          {% endif %}
        icon: |-
          {% if is_state('binary_sensor.frontdoor_contact', 'open') %}
            mdi:door-sliding
          {% elif is_state('binary_sensor.frontdoor_contact', 'closed') %}
            mdi:door-sliding-lock
          {% endif %}
        tap_action:
          action: toggle
        hold_action:
          action: more-info

thx alot

Z

863

Binary sensors have on / off states (except you are using a template binary sensor). Compare it in Developer Tools.

864

Try this. State of your binary_sensor is probably ‘on’ OR ‘off’. You can check this in Developer Tools.

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: |-
      {% if is_state('binary_sensor.frontdoor_contact', 'on') %}
        mdi:door-sliding-lock
      {% elif is_state('binary_sensor.frontdoor_contact', 'off') %}
        mdi:door-sliding      
      {% endif %}
    icon_color: |-
      {% if is_state('binary_sensor.frontdoor_contact', 'on') %}
        green
      {% elif is_state('binary_sensor.frontdoor_contact', 'off') %}
        red     
      {% endif %}
    tap_action:
      action: toggle
    entity: binary_sensor.frontdoor_contact
    content: ''
    hold_action:
      action: more-info

@pedolsky: Next time rock, paper, scissors! :grin:

1 Like
865

amazing guys thx so much!!

so fun to keep learning new things (I basically started with zero coding skills :slight_smile: )

best

Z

1 Like
866

I got this configuration in my chips card.

    card_mod:
      style: |
        ha-card {
          box-shadow:{{ '0px 0px 5px 4px rgb(0, 100, 0)' if is_state('switch.uvlazhnitel_l', 'on') else 'solid 2px rgba(250,0,0,1)'}};
          transition: 500ms ease-in-out;
          border: {{'solid 1px rgba(250,250,250,.6)' if is_state('switch.uvlazhnitel_l', 'off') else 'solid 1px rgba(0,180,200,1)'}};
        }

After update to core-2022.5.5 and mushroom from 1.8.0 to 1.8.7 i get this error and cards won’t change color anymore…

At path: chips.6.card_mod -- Expected a value of type `never`, but received: `[object Object]`
1 Like
867

May be due to this change : feat(chip): improve stack in card support by piitaya · Pull Request #502 · piitaya/lovelace-mushroom · GitHub.
May be you can use minimalist-card for custom things like this. I can’t guarantee card_mod support.

3 Likes