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

[sheddc75 (Shedd)]

I’ve been following this thread to get my chips animated and making good progress. I do have one issue, when the “monitor” chip animation is used it is moving the chip lower on the card. Any ideas what could be causing this?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Master Bedroom
    secondary: >-
      {{ states("sensor.master_bedroom_temperature_2") | round(0) }} °F / {{
      states("sensor.master_bedroom_humidity") | round (0) }} %
    entity: group.master_bedroom_lights
    icon: >-
      {% if is_state('group.master_bedroom_lights', 'on') or
      is_state('input_boolean.probably_sleeping', 'on') %}
      mdi:bed
      {% else %}
      mdi:bed-empty
      {% endif %}
    icon_color: >-
      {% if is_state('group.master_bedroom_lights', 'on') or
      is_state('input_boolean.probably_sleeping', 'on') %}
      green
      {% else %}
      blue
      {% endif %}
    tap_action:
      action: navigate
      navigation_path: master_bedroom
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        :host([dard-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        }
        :host {
          background: rgba(var(--rgb-primary-text-color), 0.025);
          --mush-icon-size: 76px;
          height: 66px;
          margin-left: -18px !important;
          --ha-card-border-width: 0;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: >-
          {% if is_state('media_player.master_bedroom_display', 'playing') %}
          mdi:speaker {% else %} mdi:speaker-off {% endif %}
        icon_color: >-
          {% if is_state('media_player.master_bedroom_display', 'playing') %}
          blue {% endif %}
        entity: media_player.master_bedroom_display
        tap_action:
          action: more-info
      - type: conditional
        conditions:
          - entity: media_player.master_bedroom
            state_not: playing
        chip:
          type: template
          icon: mdi:monitor-off
          entity: media_player.master_bedroom
          tap_action:
            action: more-info
      - type: conditional
        conditions:
          - entity: media_player.master_bedroom
            state: playing
        chip:
          type: template
          icon: mdi:monitor
          entity: media_player.master_bedroom
          tap_action:
            action: more-info
      - type: template
        icon: mdi:fan
        icon_color: >-
          {% if is_state('fan.master_bedroom_ceiling_fan', 'on') %} green {%
          endif %}
        entity: fan.master_bedroom_ceiling_fan
        tap_action:
          action: toggle
        hold_action:
          action: more-info
      - type: template
        icon: mdi:ceiling-light
        icon_color: >-
          {% if is_state('switch.master_bedroom_ceiling_light', 'on') %} yellow
          {% endif %}
        entity: switch.master_bedroom_ceiling_light
        tap_action:
          action: toggle
      - type: template
        icon: mdi:lamp
        icon_color: >-
          {% if
          is_state('light.in_wall_smart_toggle_dimmer_master_bedroom_lamp','on') %}
          yellow
          {% endif %}
        entity: light.in_wall_smart_toggle_dimmer_master_bedroom_lamp
        tap_action:
          action: toggle
    alignment: end
    card_mod:
      style:
        mushroom-template-chip:nth-child(1)$: |
          ha-icon {
            {{ 'animation: beat 1.3s ease-out infinite both;' if is_state('media_player.ally_bedroom_speaker', 'playing') }}
            transform-origin: 50% 60%;
          }
          @keyframes beat {
            0% { transform: scale(1); }
            10% { transform: scale(1.1); }
            17% { transform: scale(1.05); }
            33% { transform: scale(1.25); }
            60% { transform: scale(1); }
          }
        mushroom-conditional-chip:nth-child(3):
          mushroom-template-chip$: |
            ha-icon:before {
              content: "";
              position: absolute;
              width: 40%;
              height: 30%;
              margin: 6%;
              animation: refresh 300ms linear infinite;
            }
            @keyframes refresh { 
              0% { background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%, transparent 100%); }
              25% { background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.3) 25%, transparent 100%); }
              50% { background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%); }
              75% { background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.3) 75%, transparent 100%); }
              100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(255, 255, 255, 0.3) 100%); }
            }     
        mushroom-template-chip:nth-child(4)$: |
          ha-icon {
            {{ 'animation: rotation 1.5s linear infinite;' if is_state('fan.master_bedroom_ceiling_fan', 'on') }}
          }
          @keyframes rotation {
            0% {transform: rotate(0deg);
            }
            100% {transform: rotate(360deg);
            }
          }

[alsFC (Alex)]

Hi,
I’m using the Lock card for my SwitchBot Lock. How can I get the door state into the card like it is shown in the reference screens:

I can’t find a configuration setting for that. The SwitchBot Lock has a binary sensor for indicating the open- or closed-state of the door.

[Mariusthvdb (Marius)]

mushroom/ui newbie here…

trying to use some Hue scenes on a chip, are we supposed to mention the scene twice? Once in the entity (also to have it show its entity_picture), and once under the action?

  - type: custom:mushroom-chips-card
    chips:
      - entity: scene.marte_gedimd
        <<: &chip_scene
          type: entity
          use_entity_picture: true
          content_info: none
          tap_action:
            action: call-service
            service: scene.turn_on
            target:
              entity_id: scene.marte_gedimd

      - entity: scene.marte_nachtlampje
        <<: *chip_scene
      - entity: scene.marte_helder
        <<: *chip_scene
      - entity: scene.marte_herfstgoud
        <<: *chip_scene

with the latter under target, I get an error in the config when clicking … unfortunately this would also mean I can not use the yaml anchor, but thats a minor issue

they are displayed alright (still need to fix the ugly border margin), and the scene is activated.

Seems odd we need to use the entity twice though, please help me out?

[piitaya (Paul)]

Hello !

A new Mushroom version is released.
It adds a new card for select and input_select entity and actions for title card to easily navigate between your views.

Happy update and thank you to contributors and supporters

Release v2.5.1 · piitaya/lovelace-mushroom

[Tsuna]

I have tried several css intigrations to change the colour of the whole button when the light is active but so far no succes. Is there a way to change the colour of the compleet light button when the light is on?

[Holdestmade]

I’ve installed 2.5.1 but can’t use the select card in yaml. I’ve done a refresh, cache clear and restart.

Am I missing something ?

Custom element doesn’t exist: mushroom-select-card

type: custom:mushroom-select-card
entity: select.workshop_uplights_preset
name: Preset

[dexstar]

@davidnestico

Dumb question but I am using Music Assistant to import radio stations in via TuneIn Radio, but idk how to find the name or URI of the radio stations to select them as a source to be played. Please help, thanks.

Not sure if this is what you are looking for ?

Better to post there ?

[ArenaCloser]

Change card background is what you mean?

card_mod:
  style: |
    ha-card {
      background: rgba(var(--mush-rgb-amber), 0.2);
    }

[Tsuna]

@ArenaCloser

card_mod:
  style: |
    ha-card {
      background: rgba(var(--mush-rgb-amber), 0.2);
    }

I want the whole card to change colour when the light is on and back to default when its off

[Boostin4HP]

FYI there’s more iOS issues with this one haha.

[Boostin4HP]

You could use my lock card.

https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/2412?u=boostin4hp

[rhysb (Rhys)]

One of my first posts . Have a look here:

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

This tweak adds color to the card background. The color light version will adjust with the light color. It looks great in dark mode, but not so much in light mode. Does anyone know how to detect the dark/light mode of lovelace? [Lights - Dark] Normal light version: - type: custom:mushroom-light-card entity: light.elijahs_light name: Light fill_container: false hide_state: false use_light_color: false show_brightness_control: true …

[Sylwester (Sylwester Olik)]

What door looks are you using? Can you recommend some?

[Roelofk85 (Roelof Kooijman)]

Very very nice card! But i don’t use node red.
The card stay’s grey and don’t show a picture of what’s playing.
I can see with text what is playing but that’s all.

How do i fix this?

[rhysb (Rhys)]

Do you have card_mod installed?

[Roelofk85 (Roelof Kooijman)]

Yes, installed and it’s working with other cards.

This is what i see:

[rhysb (Rhys)]

What does the entity state show in Dev Tools?

[georgefokianos (George LD)]

Hi all, I need to make a small change in the mushroom thermostat card. My thermostat can change the set temperature in steps of 0.5 but the thermostat card changes the temp in steps of 0.1. Is it possible to change that?

[Roelofk85 (Roelof Kooijman)]

State: Playing

Maybe it’s my crappy Xiaomi Mi-Tvbox…
This is what is shows now:

[berkans (Berkan Sezer)]

So I am now upgrading my room card. First version seems to be a little boring so I decided to give it a dynamic look.

When the lights are “on” the card displays a centered background picture of my living room. The buttons above also controls the the extra information field and the lightbar. When they are off the card stays a simple as it should be.

When spotify starts playing in the room, the background of the card will change to the album cover playing on spotify. This way you can keep track of what music is playing in which room

As you can see animated icons are also present in the card. Room motion states, door and window sensors and scenes are all can be controlled and viewed within this simple card.

And when everything are off the card will fade away.

There is another very nice feature about this card. In a room where all the lights are off but the air conditioner is on, the card’s entire color will fade, but the main icon color will still remain colored. This indicates that a device such as an air conditioner is still operating in the room. Also, animated animation icons rotate at the bottom of the card.

In addition, an animated snow sign continues to rotate at the bottom of the page.

The card will be ready in a few days and all code will be posted on my github page. The card is available in both horizontal and vertical style. There will also be option in the chip section where you switch between vertical and horizontal cards.