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

Of course you can do this by using custom:stack-in-card and mode: horizontal so you would have the chips to the right and not at the bottom.

Maybe have a placeholder in a vertical stack to have the wanted chip in the lower right corner

You could steal some code here: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #996 by RodgerDodger

Can you share your roborock card ?

Here you go!

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-template-card
    entity_id: vacuum.xiaomi_vacuum_cleaner
    primary: Roborock S4
    secondary: '{{ states(entity) }}'
    icon: mdi:vacuum
    entity: vacuum.xiaomi_vacuum_cleaner
    icon_color: white
    tap_action:
      action: call-service
      service: vacuum.pause
      data: {}
      target:
        entity_id: vacuum.xiaomi_vacuum_cleaner
    card_mod: null
    style: |
      ha-card {
         --chip-box-shadow: 0px 0px;
         background: #3d5afe
      }
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:stack-in-card
        mode: horizontal
        cards:
          - type: custom:mushroom-template-card
            icon: mdi:play
            entity: script.1590800934038
            icon_color: white
            layout: vertical
            tap_action:
              action: call-service
              service: script.turn_on
              service_data: {}
              target:
                entity_id: script.1590800934038
            secondary: Start
          - type: custom:mushroom-template-card
            icon: mdi:delete
            icon_color: white
            entity_id: script.empty_vacuum
            tap_action:
              action: call-service
              service: script.turn_on
              service_data: {}
              target:
                entity_id: script.empty_vacuum
            hold_action:
              action: none
            double_tap_action:
              action: none
            layout: vertical
            secondary: Empty
          - type: custom:mushroom-template-card
            layout: vertical
            entity: vacuum.xiaomi_vacuum_cleaner
            icon: mdi:home-alert
            icon_color: white
            tap_action:
              action: call-service
              service: vacuum.return_to_base
              service_data: {}
              target:
                entity_id: vacuum.xiaomi_vacuum_cleaner
            double_tap_action:
              action: none
            hold_action:
              action: none
            secondary: Dock
        card_mod:
          style: |
            ha-card {
               --chip-box-shadow: 0px 0px;
              background: #3d5afe
             }
    card_mod: null
    style: |
      ha-card {
        box-shadow: 0px 0px;
       }    
card_mod: null
style: |
  ha-card {
    background: #3d5afe
   }
2 Likes

Brilliant! I was able to finally get the fan to spin in the chip and still have content with this code, thank you! :cookie::cookie::cookie:


type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: fan.fans
        state: 'on'
    chip:
      type: template
      entity: sensor.count_fans_on
      icon: mdi:fan
      icon_color: green
      tap_action:
        action: call-service
        service: fan.turn_off
        data: {}
        target:
          entity_id: fan.fans
      content: '{{ states(entity) }}'
style:
  div:
    mushroom-template-chip:
      $:
        mushroom-chip: |
          ha-icon {
            animation: rotation 1s linear infinite;
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }

Can you share your code for your dashboard? I think you’ve done a really nice job and would like to build something similar. Thanks!

Sure, it starts with the scripts - pasting one example:

  start_radio1:
    alias: 'Start Radio1'
    sequence:
      - service: media_player.volume_mute
        data:
          entity_id: media_player.gh_mini
          is_volume_muted: true
      - service: spotcast.start
        data:
          device_name: 'Salon'
          uri: 'spotify:track:5V3b2UB9tCAHuqXj2b2EP7'  # track with 1 second of silence 
      - service: media_player.volume_mute
        data:
          entity_id: media_player.gh_mini
          is_volume_muted: false
      - service: media_player.volume_set  #setting the volume is optional ofcourse
        data:
          entity_id: media_player.gh_mini
          volume_level: 0.1
      - service: media_player.play_media
        target:
          entity_id: media_player.gh_mini
        data:
          media_content_type: music
          media_content_id: "http://217.74.72.11/rmf_fm"

RMF maxx url: RMF MAXXX Kraków - RMF MAXXX Kraków - słuchaj w RMF ON
eska:http://www.pldm.ml/radio.php?id=-1&url=http://www.eskago.pl/radio/eska-malopolska-zakopane"
zet:
https://zt.cdn.eurozet.pl/zet-tun.mp3"

then here is the whole lovelace card:

type: vertical-stack
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: back
  - type: custom:layout-card
    layout_type: grid
    layout:
      width: 100%
      grid-template-columns: 51% 49%
      grid-template-rows: auto
    cards:
      - type: custom:mushroom-media-player-card
        entity: media_player.gh_mini
        layout: horizontal
        tap_action:
          action: toggle
        hold_action:
          action: more-info
        use_media_artwork: true
        style: |
          ha-card {
            box-shadow: 0px 0px;
      - type: conditional
        conditions:
          - entity: media_player.gh_mini
            state_not: 'off'
        card:
          type: vertical-stack
          cards:
            - type: horizontal-stack
              cards:
                - type: custom:mushroom-chips-card
                  chips:
                    - type: template
                      icon: mdi:play
                      show_icon: false
                      name: test
                      tap_action:
                        action: call-service
                        service: media_player.media_play
                        service_data:
                          entity_id: media_player.gh_mini
                      card_mod: null
                      style: |
                        ha-card {
                            box-shadow: 0px 0px;
                        }
                    - type: template
                      icon: mdi:pause
                      tap_action:
                        action: call-service
                        service: media_player.media_pause
                        service_data:
                          entity_id: media_player.gh_mini
                      card_mod: null
                      style: |
                        ha-card {
                            box-shadow: 0px 0px;
                        }
                    - type: template
                      icon: mdi:stop
                      tap_action:
                        action: call-service
                        service: media_player.media_stop
                        service_data:
                          entity_id: media_player.gh_mini
                      card_mod: null
                      style: |
                        ha-card {
                            box-shadow: 0px 0px;
                        }
                    - type: template
                      icon: mdi:skip-forward
                      tap_action:
                        action: call-service
                        service: media_player.media_next_track
                        service_data:
                          entity_id: media_player.gh_mini
                      card_mod: null
                      style: |
                        ha-card {
                            box-shadow: 0px 0px;
                        }
                  alignment: center
            - type: horizontal-stack
              cards:
                - type: custom:mushroom-chips-card
                  chips:
                    - type: template
                      icon: mdi:plus
                      tap_action:
                        action: call-service
                        service: script.volumeup
                        service_data:
                          entity_id: media_player.gh_mini
                      style: |
                        ha-card {
                            box-shadow: 0px 0px;
                        }
                    - type: template
                      card_mod: null
                      content: >-
                        {{ state_attr('media_player.gh_mini', 'volume_level') |
                        round(2,default="0") *10 }}
                      style: |
                        ha-card {
                            box-shadow: 0px 0px;
                        }
                    - type: template
                      icon: mdi:minus
                      tap_action:
                        action: call-service
                        service: script.volumedown
                        service_data:
                          entity_id: media_player.gh_mini
                      card_mod: null
                      style: |
                        ha-card {
                            box-shadow: 0px 0px;
                        }
                  alignment: center
  - type: horizontal-stack
    cards:
      - type: custom:text-divider-row
        text: Spotify
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        fill_container: false
        multiline_secondary: false
        primary: Daily Mix 1
        layout: vertical
        tap_action:
          action: call-service
          service: script.start_radio1
      - type: custom:mushroom-template-card
        fill_container: false
        multiline_secondary: false
        primary: Daily Mix 2
        layout: vertical
        tap_action:
          action: call-service
          service: script.start_radio1
      - type: custom:mushroom-template-card
        fill_container: false
        multiline_secondary: false
        primary: Weekly
        layout: vertical
        tap_action:
          action: call-service
          service: script.start_radio1
  - type: custom:text-divider-row
    text: Radio
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        icon: mdi
        fill_container: false
        multiline_secondary: false
        layout: vertical
        style: |
          mushroom-card {
            background: var(--card-background-color) url( '/local/images/radia/rmf_v3.png' ) no-repeat center 0px;
            background-size: 60px 35px;
          }
        tap_action:
          action: call-service
          service: script.start_radio1
      - type: custom:mushroom-template-card
        icon: mdi
        fill_container: false
        multiline_secondary: false
        layout: vertical
        style: |
          mushroom-card {
            background: var(--card-background-color) url( '/local/images/radia/rmf_maxxx_v2.png' ) no-repeat center 0px;
            background-size: 60px 40px;
          }
        tap_action:
          action: call-service
          service: script.start_radio2
      - type: custom:mushroom-template-card
        icon: mdi
        fill_container: false
        multiline_secondary: false
        layout: vertical
        style: |
          mushroom-card {
            background: var(--card-background-color) url( '/local/images/radia/eska_v2.png' ) no-repeat center 0px;
            background-size: 50px 45px;
          }
        tap_action:
          action: call-service
          service: script.start_radio3
      - type: custom:mushroom-template-card
        icon: mdi
        fill_container: false
        multiline_secondary: false
        layout: vertical
        style: |
          mushroom-card {
            background: var(--card-background-color) url( '/local/images/radia/zet_v2.png' ) no-repeat center 0px;
            background-size: 60px 40px;
          }
        tap_action:
          action: call-service
          service: script.start_radio4
2 Likes

posted here :slight_smile:

sure:

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:frigate-card
    cameras:
      - live_provider: auto
        webrtc_card:
          entity: camera.voordeur_3
        camera_entity: camera.voordeur_2
    view:
      default: live
      update_force: true
    menu:
      buttons:
        image: true
    live:
      preload: true
      lazy_unload: true
      auto_unmute: false
      controls:
        thumbnails:
          mode: none
          media: snapshots
        next_previous:
          style: none
      transition_effect: none
    event_gallery: {}
    event_viewer:
      controls:
        next_previous:
          style: thumbnails
        title:
          mode: none
  - type: custom:vertical-stack-in-card
    horizontal: true
    cards:
      - type: custom:mushroom-chips-card
        alignment: center
        chips:
          - type: template
            icon_color: |2-
                        {% set state=states('switch.voordeur_spotlight') %}
                        {% if state=='on' %}
                        white
                        {% elif state=='off' %}
                        #6f6f6f
                       {% endif %}
            entity: switch.voordeur_spotlight
            icon: |
              {% set state=states('switch.voordeur_spotlight') %}
              {% if state=='on' %}
              mdi:lightbulb-spot
              {% else %}
              mdi:lightbulb-spot-off
              {% endif %}
            tap_action:
              action: toggle
      - type: custom:mushroom-chips-card
        alignment: center
        chips:
          - type: template
            icon_color: |2-
                        {% set state=states('binary_sensor.voordeur_vehicle_detected') %}
                        {% if state=='on' %}
                        orange
                        {% elif state=='off' %}
                        #6f6f6f
                       {% endif %}
            entity: binary_sensor.voordeur_vehicle_detected
            icon: |
              {% set state=states('binary_sensor.voordeur_vehicle_detected') %}
              {% if state=='on' %}
              mdi:car
              {% else %}
              mdi:car-off
              {% endif %}
            tap_action:
              action: more-info
      - type: custom:mushroom-chips-card
        alignment: center
        chips:
          - type: template
            icon_color: |2-
                        {% set state=states('binary_sensor.voordeur_person_motion') %}
                        {% if state=='on' %}
                        orange
                        {% elif state=='off' %}
                        #6f6f6f
                       {% endif %}
            entity: binary_sensor.voordeur_person_motion
            icon: |
              {% set state=states('binary_sensor.voordeur_person_motion') %}
              {% if state=='on' %}
              mdi:motion-sensor
              {% else %}
              mdi:motion-sensor-off
              {% endif %}
            tap_action:
              action: more-info
      - type: custom:mushroom-chips-card
        alignment: center
        chips:
          - type: template
            icon_color: |2-
                        {% set state=states('light.buitenlamp') %}
                        {% if state=='on' %}
                        yellow
                        {% elif state=='off' %}
                        #6f6f6f
                       {% endif %}
            entity: light.buitenlamp
            icon: |
              {% set state=states('light.buitenlamp') %}
              {% if state=='on' %}
              mdi:coach-lamp
              {% else %}
              mdi:coach-lamp
              {% endif %}
            tap_action:
              action: toggle
      - type: custom:mushroom-chips-card
        alignment: center
        chips:
          - type: template
            icon_color: |2-
                        {% set state=states('switch.voordeur_ir_lights') %}
                        {% if state=='on' %}
                        red
                        {% elif state=='off' %}
                        #6f6f6f
                       {% endif %}
            entity: switch.voordeur_ir_lights
            icon: |
              {% set state=states('switch.voordeur_ir_lights') %}
              {% if state=='on' %}
              mdi:flashlight
              {% else %}
              mdi:flashlight-off
              {% endif %}
            tap_action:
              action: toggle
  - type: custom:vertical-stack-in-card
    horizontal: true
    cards:
      - type: custom:mushroom-chips-card
        alignment: center
        chips:
          - type: entity
            entity: camera.voordeur_profile001_substream
            icon: mdi:arrow-left-drop-circle-outline
            use_entity_picture: false
            content_info: none
            tap_action:
              action: call-service
              service: onvif.ptz
              data:
                pan: LEFT
                move_mode: ContinuousMove
              target:
                entity_id: camera.voordeur_profile001_substream
            hold_action:
              action: none
            double_tap_action:
              action: none
      - type: custom:mushroom-chips-card
        alignment: center
        chips:
          - type: entity
            entity: camera.voordeur_profile001_substream
            icon: mdi:minus-circle-outline
            use_entity_picture: false
            content_info: none
            tap_action:
              action: call-service
              service: onvif.ptz
              data:
                move_mode: ContinuousMove
                zoom: ZOOM_OUT
                distance: 1
                speed: 1
                continuous_duration: 1
              target:
                entity_id: camera.voordeur_profile001_substream
            hold_action:
              action: none
            double_tap_action:
              action: none
      - type: custom:mushroom-chips-card
        alignment: center
        chips:
          - type: entity
            entity: camera.voordeur_profile001_substream
            icon: mdi:arrow-up-drop-circle-outline
            use_entity_picture: false
            content_info: none
            tap_action:
              action: call-service
              service: onvif.ptz
              data:
                tilt: UP
                move_mode: ContinuousMove
              target:
                entity_id: camera.voordeur_profile001_substream
            hold_action:
              action: none
            double_tap_action:
              action: none
      - type: custom:mushroom-chips-card
        alignment: center
        chips:
          - type: entity
            entity: camera.voordeur_profile001_substream
            icon: mdi:arrow-down-drop-circle-outline
            use_entity_picture: false
            content_info: none
            tap_action:
              action: call-service
              service: onvif.ptz
              data:
                tilt: DOWN
                move_mode: ContinuousMove
              target:
                entity_id: camera.voordeur_profile001_substream
            hold_action:
              action: none
            double_tap_action:
              action: none
      - type: custom:mushroom-chips-card
        alignment: center
        chips:
          - type: entity
            entity: camera.voordeur_profile001_substream
            icon: mdi:plus-circle-outline
            use_entity_picture: false
            content_info: none
            tap_action:
              action: call-service
              service: onvif.ptz
              data:
                move_mode: ContinuousMove
                zoom: ZOOM_IN
                distance: 1
                speed: 1
                continuous_duration: 1
              target:
                entity_id: camera.voordeur_profile001_substream
            hold_action:
              action: none
            double_tap_action:
              action: none
      - type: custom:mushroom-chips-card
        alignment: center
        chips:
          - type: entity
            entity: camera.voordeur_profile001_substream
            icon: mdi:arrow-right-drop-circle-outline
            use_entity_picture: false
            content_info: none
            tap_action:
              action: call-service
              service: onvif.ptz
              data:
                pan: RIGHT
                move_mode: ContinuousMove
              target:
                entity_id: camera.voordeur_profile001_substream
            hold_action:
              action: none
            double_tap_action:
              action: none
2 Likes

Hi All -

Trying to get my feet under me with zero Yaml and very little HA experience so no judging! :slight_smile: Below is a piece of my first Mushroom-based dashboard.

It’s a vertical stack with 9 horizontal stacks (two for the “area” titles).

I have two issues:

  1. That bottom “Outside” area is on its own. How can I either center it or make the box the same size as the ones above so it doesn’t span the entire stack?
  2. How can I round each of my temps so they all have just one decimal place. I’m sure it’s a pipe to the round function but wondering what the syntax is as I can’t find it.

Thanks!

  1. Try a placeholder card as the second card on the horizontal stack next to your Outside card with no data. Maybe a mushroom template card so you can easily delete every data.Or put Garage, Patio and Outside in one horizontal stack.

  2. You’ll need a template in there.
    {{ states('sensor.YOURTEMP') | round(1) }}
    should work.

1 Like

Is it possible to target only one template chip? Now my battery template is rotating too lol.

3 Likes

I’m using card_mod to change the font size on all of the mushroom chip cards in a vertical stack. I can apply it successfully as shown in each chip card, but I’m trying to determine if there’s a way to apply it more globally (higher up in the hierarchy kind of like the commented out syntax at the top):

  cards:
      # Home Assistant, Weather, and Mail and Packages
    - type: vertical-stack
      card_mod: 
        style: |
          ha-card {--chip-box-shadow: none;
          # --chip-font-size: 0.6em;
          }
      cards:
          # Weather
        - type: custom:stack-in-card
          mode: horizontal
          cards:
            - type: custom:mushroom-chips-card
              card_mod: 
                style: |
                  ha-card {--chip-font-size: 0.6em;}
              alignment: center
              chips:

Anyone had any luck with something like this?

can you share your code ?

Just the first one.

Cookies

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:cookie
    icon_color: brown
    content: 1 Cookie
  - type: template
    icon: mdi:cookie
    icon_color: brown
    content: 2 Cookies
card_mod:
   style:
     mushroom-template-chip$: |
       ha-icon {
         animation: rotation 1s linear infinite;
       }
       @keyframes rotation {
         100% {
           transform: rotate(360deg);
         }
       }
3 Likes

Is this what you wanted?

Burgers

type: vertical-stack
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon: mdi:hamburger
            content: Burger
        alignment: center
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon: mdi:french-fries
            content: Fries
        alignment: center
    card_mod:
     style:
       hui-vertical-stack-card$: |
         mushroom-chips-card {
           --chip-box-shadow: none;
           --chip-background: none;
           --chip-font-size: 0.6em;
         }

Or this?

Chips

type: vertical-stack
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon: mdi:fish
            content: Fish
        alignment: center
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon: mdi:french-fries
            content: Chips
        alignment: center
    card_mod:
     style:
       hui-horizontal-stack-card$: |
         mushroom-chips-card {
           --chip-box-shadow: none;
           --chip-background: none;
           --chip-font-size: 0.6em;
         }
1 Like

Try using a Grid with two columns.

1 Like

I don’t get it but that worked perfectly! Thank You Cookie Monster! :cookie::cookie::cookie:

1 Like

Either one works if that’s affecting the font size of both chip cards. Thank you.

I’ve tried to research how to do things like this myself, but keep coming up empty handed. W3 schools explains the concepts with syntax for direct CSS, but often doesn’t translate for use in these Jinja-based dashboards. Do you recommend a resource for understanding things like the use of div, $, ., etc?

Also, why doesn’t your syntax require card_mod:?

Thanks again!

I should be using card_mod:. It is not required but is recommended and apparently provides better performance.

@rhysb Gotcha. Any recommendations for learning Jinja-style CSS?

I tried the syntax you provided. It works for the chip card in the first stack-in-card, but not the rest in the vertical stack. What changes should I make to get that to apply to the entire vertical stack with 4 stack-in-cards containing a mix of mushroom-chips-card, markdown cards, and mushroom-template-card ?

EDIT: I’ve inspected the elements (CTRL-SHIFT-I) to extract this hierarchy:

div #all columns
  div #first column
    hui-vertical-stack-card #THIS IS THE STACK IN THE SCREENSHOT ABOVE
      shadow-root
        div #root
          stack-in-card
            shadow-root
              ha-card #custom-stack-in-card
                shadow-root
                div
                  hui-vertical-stack-card
                    shadow-root
                      div #root
                        mushroom-chips-card
                          shadow-root
                            ha-card #custom-mushroom-chips-card
                              shadow-root
                              div
                                mushroom-weather-chip
                                  shadow-root
                                    mushroom-chip

Using that, I’m trying to reverse your syntax to understand it a little more. From this, it looks like the $ is used any place there’s a shadow-root. If I basically used that same approach, would I be able to start at the lowest div in the hierarchy that contains all of the elements I would want to effect (e.g. all the way up to the column or columns level div)?