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

Sure, on mobile all cards are 100% width, all rooms look like this:

Music like this (just the Squeezebox server):

The other views (weather, security etc) are still from my old setup and need to be redone

14 Likes

For consistency, the info zone and controls zone are 50%-50% to match most of usage (light controls, fan controls, alarm controls, etc…).
The problem is that we have 1 slider + 2 buttons in the control zone. We need to find a solution to improve switching experience between mode for light (brightness/rgb/temp color).

I seems that line break is not supported by HA templates.

I’d love to see your config for the sidebar card. I’m using it too but mine looks awful compared to yours. For example, how’d you get the clock and date centered? And the weather panel at the bottom… I need that too.

Awsome sidebar. Do you mind sharing your sidebar config?

Sure, it’s a bit messy:

sidebar:
  title: null
  clock: false
  digitalClock: true
  digitalClockWithSeconds: true
  twelveHourVersion: false
  period: false
  date: true
  hideTopMenu: true
  hideHassSidebar: false
  showTopMenuOnMobile: true
  dateformat: dddd, DD MMMM YYYY
  width:
    desktop: 15
    mobile: 0
    tablet: 25
  breakpoints:
    mobile: 768
    tablet: 1930
  style: |
    :host {
        --sidebar-background: #000;
        --sidebar-text-color: #FFF;
        --face-color: #FFF;
        --face-border-color: #FFF;
        --clock-hands-color: #000;
        --clock-seconds-hand-color: #FF4B3E;
        --clock-middle-background: #FFF;
        --clock-middle-border: #000;
    }
    #customSidebar {
       z-index: 9999!important;
     }
    .sidebarMenu li {
        line-height: 20px!important;
     }
    .sidebarMenu li ha-icon {
        color: #FFF!important;
     }
    .sidebarMenu li.active {
        background-color: #2C2E30!important;
        border-radius: 40px!important;
        font-weight: bold!important;
     }
    .sidebarMenu li.active ha-icon {

     }
    .digitalClock {
        padding-bottom: 5px;
        padding-top: 15px
    }
    .digitalClock {
        font-size: 50px !important;
        font-weight: 500!important;
        text-align: center;
    }
    .date {
        padding-bottom: 10px;
        font-size: 25px;
        font-weight: 300;
        text-align: center;
    }
  sidebarMenu:
    - action: navigate
      active: true
      name: Home
      icon: mdi:home
      navigation_path: /dashboard-desktop2022/home
    - action: navigate
      active: true
      name: Muziek
      icon: mdi:music
      navigation_path: /dashboard-desktop2022/muziek
    - action: navigate
      active: true
      name: Beveiliging
      icon: mdi:cctv
      navigation_path: /dashboard-desktop2022/beveiliging
    - action: navigate
      active: true
      name: Huishouden
      icon: mdi:store-check
      navigation_path: /dashboard-desktop2022/huishouden
    - action: navigate
      active: true
      name: Diversen
      icon: hass:cog
      navigation_path: /dashboard-desktop2022/diversen
  bottomCard:
    type: vertical-stack
    cardOptions:
      cards:
        - type: weather-forecast
          style: |
            ha-card {
              background: transparent !important;
              color: #fff !important;
              overflow: hidden !important;
              box-shadow: none !important;
            }
          entity: weather.huis
          show_current: true
          tap_action:
            action: navigate
            navigation_path: /dashboard-desktop2022/weerbericht
        - type: horizontal-stack
          cards:
            - type: custom:mushroom-entity-card
              style: |
                ha-card {
                  background: transparent !important;
                  overflow: hidden !important;
                  box-shadow: none !important;
                }
              entity: sun.sun
              vertical: true
              primary_info: none
              secondary_info: none
              icon: mdi:calendar-month
              icon_color: grey
              hold_action:
                action: none
              tap_action:
                action: navigate
                navigation_path: /dashboard-desktop2022/agenda
            - type: custom:mushroom-entity-card
              style: |
                ha-card {
                  background: transparent !important;
                  overflow: hidden !important;
                  box-shadow: none !important;
                }
              entity: sun.sun
              vertical: true
              primary_info: none
              secondary_info: none
              icon: mdi:cart
              icon_color: light-blue
              hold_action:
                action: none
              tap_action:
                action: url
                url_path: app://com.icemobile.albertheijn
            - type: custom:mushroom-entity-card
              style: |
                ha-card {
                  background: transparent !important;
                  overflow: hidden !important;
                  box-shadow: none !important;
                }
              entity: sun.sun
              vertical: true
              primary_info: none
              secondary_info: none
              icon: mdi:lightbulb-auto
              icon_color: amber
              hold_action:
                action: none
              tap_action:
                action: call-service
                service: scene.turn_on
                service_data:
                  transition: 5
                target:
                  entity_id: scene.ochtend
            - type: custom:mushroom-entity-card
              style: |
                ha-card {
                  background: transparent !important;
                  overflow: hidden !important;
                  box-shadow: none !important;
                }
              entity: sun.sun
              vertical: true
              primary_info: none
              secondary_info: none
              icon: mdi:lightbulb-auto-outline
              icon_color: brown
              hold_action:
                action: none
              tap_action:
                action: call-service
                service: scene.turn_on
                service_data:
                  transition: 5
                target:
                  entity_id: scene.idle
            - type: custom:mushroom-entity-card
              style: |
                ha-card {
                  background: transparent !important;
                  overflow: hidden !important;
                  box-shadow: none !important;
                }
              entity: sun.sun
              vertical: true
              primary_info: none
              secondary_info: none
              icon: mdi:power-standby
              icon_color: deep-orange
              hold_action:
                action: none
              tap_action:
                confirmation:
                  text: Alles uitzetten?
                action: call-service
                service: script.alle_lampen_uit
                service_data: {}
                target: {}
    cardStyle: |
      :host {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
      }
      .state {
        font-size: 8px;
      }
28 Likes

Maybe one button to switch between the sliders, instead of button for every slider.

Any possibility of adding support for custom cards from Ui Lovelace Minimalist?

Hi,

Using the mushroom template card and i want to change the icon color based on entity state.

type: custom:mushroom-template-card
icon: mdi:audio-video
layout: vertical
tap_action:
  action: call-service
  service: browser_mod.more_info
  service_data:
    entity_id: media_player.home_theater
  target: {}
hold_action:
  action: call-service
  service: media_player.toggle
  service_data: {}
  target:
    entity_id: media_player.home_theater
double_tap_action:
  action: none
multiline_secondary: true
secondary: '{{  states[''media_player.home_theater''].attributes.volume_level }} Volume
primary: denon
icon_color: |2-
    "{{ 'green' if is_state('media_player.home_theater',
    'on') else 'red' }}" 

I don’t know how to write the icon color template…:frowning:

Thanks

That is not a custom:button-card, so your secondary info has to be Jinja (same syntax as in Dev Tools → Template):

## one line format: quotes mandatory
secondary: '{{  state_attr(''media_player.home_theater'', ''volume_level'') }}'

or


## multi-line format: no quotes

secondary: |
  {{  state_attr(''media_player.home_theater'', ''volume_level'') }}

Same with icon-color:


## one line format

 icon_color: "{{ 'green' if is_state('media_player.home_theater','on') else 'red' }}"


## multi-line format

icon_color: |
  {{ 'green' if is_state('media_player.home_theater','on') else 'red' }}

In visual mode you always use one line format.

6 Likes

great! thank you very much :slight_smile:

Thanks for this awesome addition. Just switched over a whole bunch of stuff. The fan card has been particularly useful for displaying all available features of a Dyson fan much better than anything else I’d tried so far.

How to get a button to call the top bar from the menu ?

image

type: custom:mushroom-chips-card
chips:
- type: menu
- type: ???????
1 Like

What do you mean with that?

For some reason, I can’t figure out the right expression to manipulate the card’s icon color by using card_mod.


card_mod:
  style: |
    $: |
      .badge ha-icon { color: … }

or


card_mod:
  style: |
    .: |
       :host .badge ha-icon { color: … }

won’t do the trick. Can anybody point me in the right direction?

1 Like

i use sidebar card, and i have possibility to hide top bar like kiosk mode.

Ah, ok. At this point I’m out. :man_shrugging:

title: Home
views:
  - path: default_view
    background: var(--background-image)
    title: Home
    icon: mdi:home
    theme: ios-dark-mode-blue-red-alternative
    badges: []
    cards:
      - type: grid
        square: false
        columns: 1
        cards:
          - type: weather-forecast
            entity: weather.home
          - type: thermostat
            entity: climate.living_room
          - type: entities
            entities:
              - entity: sensor.ir_remote_humidity
                name: Living Humidity
              - entity: sensor.ir_remote_temperature
                name: Living Temp
              - entity: sensor.pure_cool_formaldehyde_humidity
                name: Master Humidity
              - entity: sensor.pure_cool_formaldehyde_temperature
                name: Master Temp
              - entity: sensor.upstair_s_office_temperature
                name: Office Temp
            state_color: false
      - type: grid
        cards:
          - type: custom:mushroom-entity-card
            icon: mdi:power
            entity: remote.ir_remote_remote
            secondary_info: none
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                device: livingroomtv
                command: power
              target:
                entity_id: remote.ir_remote_remote
            icon_color: white
            name: Living Room TV
          - type: grid
            cards:
              - type: button
                show_icon: true
                show_name: false
                icon: mdi:home
                tap_action:
                  action: call-service
                  service: androidtv.adb_command
                  service_data:
                    command: HOME
                    entity_id: media_player.ccgtv_living_room
              - type: button
                tap_action:
                  action: call-service
                  service: remote.send_command
                  service_data:
                    device: livingroomtv
                    command: up
                  target:
                    entity_id: remote.ir_remote_remote
                icon: mdi:arrow-up-bold
                show_name: false
                show_icon: true
                show_state: false
              - type: custom:mushroom-light-card
                entity: light.bookshelf
                show_brightness_control: true
                icon: mdi:bookshelf
              - type: button
                tap_action:
                  action: call-service
                  service: remote.send_command
                  service_data:
                    device: livingroomtv
                    command: left
                  target:
                    entity_id: remote.ir_remote_remote
                icon: mdi:arrow-left-bold
                show_name: false
              - type: button
                icon: mdi:checkbox-blank-circle
                show_name: false
                tap_action:
                  action: call-service
                  service: remote.send_command
                  service_data:
                    device: livingroomtv
                    command: select
                  target:
                    entity_id: remote.ir_remote_remote
                hold_action:
                  action: more-info
                entity: camera.tv_ambilight
              - type: button
                tap_action:
                  action: call-service
                  service: remote.send_command
                  service_data:
                    device: livingroomtv
                    command: right
                  target:
                    entity_id: remote.ir_remote_remote
                icon: mdi:arrow-right-bold
                show_name: false
              - type: button
                show_name: false
                show_icon: true
                icon: mdi:undo-variant
                tap_action:
                  action: call-service
                  service: androidtv.adb_command
                  service_data:
                    command: BACK
                  target:
                    entity_id: media_player.living_room_ccwgtv
              - type: button
                tap_action:
                  action: call-service
                  service: remote.send_command
                  service_data:
                    device: livingroomtv
                    command: down
                  target:
                    entity_id: remote.ir_remote_remote
                icon: mdi:arrow-down-bold
                show_name: false
              - type: custom:mushroom-light-card
                entity: light.tv_ambilight
                show_brightness_control: true
                use_light_color: true
                name: Ambient
              - type: button
                tap_action:
                  action: call-service
                  service: remote.send_command
                  service_data:
                    device: livingroomtv
                    command: volumedown
                  target:
                    entity_id: remote.ir_remote_remote
                icon: mdi:volume-minus
              - type: button
                tap_action:
                  action: call-service
                  service: remote.send_command
                  service_data:
                    device: livingroomtv
                    command: mute
                  target:
                    entity_id: remote.ir_remote_remote
                icon: mdi:volume-off
              - type: button
                tap_action:
                  action: call-service
                  service: remote.send_command
                  service_data:
                    device: livingroomtv
                    command: volumeup
                  target:
                    entity_id: remote.ir_remote_remote
                icon: mdi:volume-plus
            square: true
          - type: custom:mini-media-player
            name: Living Room
            shortcuts:
              columns: 2
              buttons:
                - name: Prime Video
                  type: service
                  id: androidtv.adb_command
                  service: androidtv.adb_command
                  data:
                    entity_id: media_player.living_room_ccwgtv
                    command: >-
                      am start -a android.intent.action.VIEW -n
                      com.amazon.amazonvideo.livingroom/com.amazon.ignition.IgnitionActivity
                - name: Disney+
                  type: service
                  id: androidtv.adb_command
                  service: androidtv.adb_command
                  data:
                    entity_id: media_player.living_room_ccwgtv
                    command: >-
                      am start -a android.intent.action.VIEW -d 
                      https://www.disneyplus.com/
                - name: CNN
                  type: service
                  id: androidtv.adb_command
                  service: androidtv.adb_command
                  data:
                    entity_id: media_player.living_room_ccwgtv
                    command: >-
                      am start -a android.intent.action.VIEW -d
                      https://tv.youtube.com/watch/PyRp1_3Ql70
                - name: Big Bang Theory
                  type: service
                  id: androidtv.adb_command
                  service: androidtv.adb_command
                  data:
                    entity_id: media_player.living_room_ccwgtv
                    command: >-
                      am start -a android.intent.action.VIEW -d
                      https://play.hbomax.com/page/urn:hbo:page:GXdRsewUPO5uAuwEAABEI:type:series
                - name: Fraiser
                  type: service
                  id: androidtv.adb_command
                  service: androidtv.adb_command
                  data:
                    entity_id: media_player.living_room_ccwgtv
                    command: >-
                      am start -a android.intent.action.VIEW -d
                      https://www.hulu.com/series/frasier-0cb9b63b-de82-4751-99c9-1cb12118ab9d
                - name: Simpsons
                  type: service
                  id: androidtv.adb_command
                  service: androidtv.adb_command
                  data:
                    entity_id: media_player.living_room_ccwgtv
                    command: >-
                      am start -a android.intent.action.VIEW -d
                      https://www.disneyplus.com/series/the-simpsons/3ZoBZ52QHb4x
            entity: media_player.living_room_tv
            hide:
              name: true
              icon: true
              info: false
              power: false
              source: false
              sound_mode: false
              controls: false
              prev: false
              next: false
              play_pause: false
              play_stop: false
              jump: false
              volume: true
              volume_level: false
              mute: false
              progress: false
              runtime: false
              runtime_remaining: false
              artwork_border: false
              power_state: false
              icon_state: false
              shuffle: false
              repeat: false
              state_label: null
            toggle_power: true
            source: full
            artwork: material
            info: scroll
        columns: 1
        square: false
      - type: grid
        cards:
          - type: custom:mushroom-light-card
            entity: light.main_floor
            name: First Floor
            icon: mdi:floor-plan
            layout: horizontal
            show_brightness_control: true
          - type: grid
            cards:
              - type: custom:mushroom-light-card
                entity: light.living_room_main_lights
                name: Living
                show_brightness_control: true
              - type: custom:mushroom-light-card
                entity: light.kitchen_main_lights
                name: Kitchen
                show_brightness_control: true
              - type: custom:mushroom-light-card
                entity: light.breakfast_room_main_lights
                name: Breakfast
                show_brightness_control: true
              - type: custom:mushroom-light-card
                entity: light.kitchen_under_cabinet
                name: Cabinet
                show_brightness_control: true
              - type: custom:mushroom-light-card
                entity: light.kitchen_sink_light
                name: Sink
                show_brightness_control: true
              - type: custom:mushroom-light-card
                entity: light.butler_pantry_main_lights
                show_brightness_control: true
                name: Butler
              - type: custom:mushroom-light-card
                entity: light.dining_room_main_lights
                name: Dining
                show_brightness_control: true
              - type: custom:mushroom-light-card
                entity: light.dining_room_chandelier
                name: Chandelier
                icon: mdi:chandelier
                show_brightness_control: true
              - type: custom:mushroom-light-card
                entity: light.stairs_main_lights
                name: Stairs
                show_brightness_control: true
              - type: custom:mushroom-light-card
                entity: light.front_foyer_main_lights
                show_brightness_control: true
                name: Foyer
              - type: custom:mushroom-alarm-control-panel-card
                entity: >-
                  alarm_control_panel.home_alarm_control_panel_alarm_control_panel
                states: []
                name: Alarm
                layout: horizontal
              - type: custom:mushroom-cover-card
                entity: cover.living_room_shades
                name: Shades
                layout: horizontal
              - type: custom:mushroom-light-card
                entity: light.front_porch_overhead_light
                name: Porch
              - type: custom:mushroom-entity-card
                entity: lock.front_door
            columns: 2
            square: false
        columns: 1
        square: false
      - type: grid
        cards:
          - type: custom:mushroom-light-card
            entity: light.master_bedroom
            name: Master
            icon: mdi:bed
            layout: horizontal
            show_brightness_control: true
          - type: grid
            columns: 2
            square: false
            cards:
              - type: custom:mushroom-light-card
                entity: light.master_bedroom_main_lights
                show_brightness_control: true
                name: Bedroom
                icon: mdi:bed
              - type: custom:mushroom-light-card
                entity: light.master_bedroom_accent_lights
                show_brightness_control: true
                name: Entry
              - type: custom:mushroom-light-card
                entity: light.master_bedroom_nightstands
                show_brightness_control: true
                name: Nightstands
                icon: mdi:floor-lamp
              - type: custom:mushroom-fan-card
                entity: fan.pure_cool_formaldehyde
                icon_animation: true
                show_percentage_control: true
                name: Fan
                show_oscillate_control: true
              - type: custom:mushroom-entity-card
                entity: switch.in_wall_smart_switch
                name: Bath Switch
                icon: mdi:light-switch
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
                vertical: true
              - type: custom:mushroom-light-card
                entity: light.master_bathroom
                icon: mdi:shower
                show_brightness_control: true
                name: Bath
                show_color_control: true
          - type: custom:mushroom-light-card
            entity: light.upstairs
            name: Upstairs
            icon: mdi:floor-plan
            layout: horizontal
            show_brightness_control: true
          - type: grid
            cards:
              - type: custom:mushroom-light-card
                entity: light.upstair_s_office
                show_brightness_control: true
                use_light_color: true
                name: Office
                show_color_temp_control: true
              - type: custom:mushroom-light-card
                entity: light.upstair_s_office_lamp
                name: Office Lamp
                show_brightness_control: true
                show_color_temp_control: true
              - type: custom:mushroom-light-card
                entity: light.gym
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
              - type: custom:mushroom-light-card
                entity: light.hallway
                show_brightness_control: true
            columns: 2
            square: false
        columns: 1
        square: false

5 Likes

Thanks for this awesome addition! Someone could point me to the right direction on how to change the text for the state section(secondary info) in lights and entity mushroom cards. Instead of the text ON or OFF i need to insert some custom text.

thanks a lot!

1 Like

Use the mushroom template card. I don’t think that entity card or light card is individually customizable.

How do you get the Template Card to toggle an entity?