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;
         }
2 Likes

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)?