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

Thanks for sharing! I love your design!! to @rhysb Do you think it is possible to animate the opening of the conditional cards to make it less brutal? Thanks in advance!

Please share the code

Wow, you did a great job :grin: Thanks alot!
This is how I did it for my self.

The Code for Nest Cam Card.

  1. You need - Stack in Card (Hacs)
  2. You need - Layout Card (Hacs)
  3. If you need to change the size of the images or border size, just change the bold text :grinning:
  • type: custom:layout-card
    layout_type: masonry
    layout:
    width: 106
    max_cols: 1
    height: auto
    padding: 0px
    card_margin: var(–masonry-view-card-margin, 0px 8px 14px)
type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Nest Cam
    secondary: Driveway
    icon: mdi:camera
    icon_color: blue
  - type: custom:layout-card
    layout_type: masonry
    layout:
      width: 106
      max_cols: 1
      height: auto
      padding: 0px
      card_margin: var(--masonry-view-card-margin, 0px 8px 14px)
    cards:
      - show_state: false
        show_name: false
        camera_view: auto
        type: picture-entity
        entity: camera.uppfart
        camera_image: camera.uppfart
        theme: Mushroom
        card_mod:
          style: |
            ha-card {
              background: none;
              box-shadow: none;
            }

Best regards
Thekholm

19 Likes

Thank you very much. You’ve been a great help… both examples are informative and should be helpful down the road.
Rami

1 Like

That removed both borders, the mushroom cards and horizontal stack card column borders.

I would prefer just the mushroom horizontal column card borders be removed. The way the mushroom card borders were before was fine. Essentially removing the border of the stack-in-card only.

Hm for some reason I am unable to get that to work. I tried doing it at the mushroom card level and at the stack in card level.

I tried this piece

card_mod:
  style:
    mushroom-state-info$: |
      * {
           text-align: center;
          }
type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:auto-entities
    card:
      type: entities
    filter:
      include:
        - area: Temperature Sensors
          entity_id: /[te]mperature/
          options:
            type: custom:mushroom-template-card
            primary: '{{ states[entity].name }}'
            secondary: '{{ states(entity) | title }}'
            picture: null
            hold_action:
              action: toggle
            double_tap_action:
              action: more-info
            layout: null
            tap_action:
              action: none
            card_mod:
              style: |
                mushroom-shape-icon {
                  --shape-color: none !important;
                  --shape-color-disabled: none !important;
                }
                ha-card { 
                  background: transparent;
                  border-radius: 20px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                  --icon-border-radius: 0;
                }
                mushroom-state-info$: |
                  .primary {
                     text-align: center;
                }
      exclude: []
  - type: custom:auto-entities
    card:
      type: entities
    filter:
      include:
        - area: Temperature Sensors
          entity_id: /[hu]midity/
          options:
            type: custom:mushroom-template-card
            primary: '{{ states[entity].name }}'
            secondary: '{{ states(entity) | title }}'
            picture: null
            hold_action:
              action: toggle
            double_tap_action:
              action: more-info
            layout: null
            tap_action:
              action: none
            card_mod:
              style: |
                mushroom-shape-icon {
                  --shape-color: none !important;
                  --shape-color-disabled: none !important;
                }
                ha-card { 
                  background: transparent;
                  border-radius: 30px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 2px;
                  --icon-border-radius: 0;
                }
      exclude: []
card_mod:
  style: |
    ha-card { 
      background: transparent;
      --ha-card-box-shadow: none;
    }

I want to recreate what you are doing. Can you show us also the code of you’re automation.plug_2_uit . I don’t how I could do this.

Wonder why the official mushroom card project has slowed down on development recently. I can’t remember the last time I saw an update in HACs and there’s some really good suggestions in here with animated icons and new cards that would be great to see included. Perhaps since the original creator joined nabu there’s no time, or … it’s being built in to replace the pants out the box theming!

2 Likes

When I use this it doesn’t work.

secondary: >-
Currently :
‘{{states(’‘sensor.lr_hvac_setpoint’’) | round(1)}} C’

When I remove the “Currently :”, it all works.

How do I combine text and state?
Thanks

Try this…

‘Currently:’

Thanks, Not working

image

image

Please use Ctrl+E

when sharing code

Does it work if you move the apostrophe?

secondary: >-
'Currently: 
{{states("sensor.lr_hvac_setpoint") | round(1)}} C'

Sure. All it does is turn off a switch at the time set by the input_datetime variable that is used in the alarm card.

alias: 'Thuis modus: ''s nachts Plug 2 uit'
description: ''
trigger:
  - platform: time
    at: input_datetime.plug_2_s_avonds_uit
condition: []
action:
  - service: switch.turn_off
    data: {}
    target:
      entity_id: switch.local_tuya_plug_2
mode: single

Thank you all!

secondary: >-
SetPoint: {{states(‘sensor.lr_hvac_setpoint_’) | round(1)}}°c
Current: {{(states(‘sensor.lr_hvac_target_setpointa’)) |
float/10 | round(1)}}°c

Worked.

nice how have you person cards making can you share code ?

type: custom:stack-in-card
mode: vertical
cards:

  • type: custom:mushroom-media-player-card
    entity: media_player.alle_hojtalere_gruppe
    media_controls:
    • play_pause_stop
    • next
      volume_controls:
    • volume_mute
      layout: horizontal
      use_media_info: true
  • type: custom:mushroom-media-player-card
    entity: media_player.alle_hojtalere_gruppe
    fill_container: false
    show_volume_level: true
    use_media_info: false
    media_controls: []
    volume_controls:
    • volume_set
    • volume_mute
      collapsible_controls: false
      primary_info: none
      layout: horizontal
      secondary_info: none
      icon_type: none
      style: |
      ha-card {
      –control-height: 30px;
      }
  • type: custom:mushroom-media-player-card
    entity: media_player.nest_audio
    icon_type: none
    volume_controls:
    • volume_set
    • volume_mute
      layout: horizontal
      media_controls: []
      show_volume_level: false
      name: Køkken Ø’en
      style: |
      ha-card {
      –control-height: 30px;
      }
      mushroom-state-item {
      max-width: 100px !important;
      }
  • type: custom:mushroom-media-player-card
    entity: media_player.lyd_alrum
    icon_type: none
    volume_controls:
    • volume_set
    • volume_mute
      layout: horizontal
      media_controls: []
      show_volume_level: false
      name: Cerwin Vega
      style: |
      ha-card {
      –control-height: 30px;
      }
      mushroom-state-item {
      max-width: 100px !important;
      }
  • type: custom:mushroom-media-player-card
    entity: media_player.badevaerelse
    icon_type: none
    volume_controls:
    • volume_set
    • volume_mute
      layout: horizontal
      media_controls: []
      show_volume_level: false
      name: BadevĂŚrelset
      style: |
      ha-card {
      –control-height: 30px;
      }
      mushroom-state-item {
      max-width: 100px !important;
      }
  • type: custom:mushroom-media-player-card
    entity: media_player.alrum
    icon_type: none
    volume_controls:
    • volume_set
    • volume_mute
      layout: horizontal
      media_controls: []
      show_volume_level: false
      name: Baggangen
      style: |
      ha-card {
      –control-height: 30px;
      }
      mushroom-state-item {
      max-width: 100px !important;
      }
  • type: custom:mushroom-media-player-card
    entity: media_player.garage
    icon_type: none
    volume_controls:
    • volume_set
    • volume_mute
      layout: horizontal
      media_controls: []
      show_volume_level: false
      name: Garagen
      style: |
      ha-card {
      –control-height: 30px;
      }
      mushroom-state-item {
      max-width: 100px !important;
      }
      card_mod:
      style: |
      ha-card {
      –mush-spacing: 7px;
      }
      mushroom-state-item {
      max-width: 90px !important;
      }

I know it’s probably in this thread somewhere though the 3400+ posts, but would someone mind sharing their mushroom created dashboard on tablets? Seems that most I’ve seen were for mobile devices and when I try to build this on my 10" fire tablet, I can’t see to get this to fill the screen using horizontal stack cards (not lining up correctly). Could I also be using the wrong card?

I have finished my “What to wear page”

Everything you need from stracth is on my github wiki page.

I have explained the setup step by step with a language anyone can understand.

With this little project:

  • Home Assistant will show you what to wear depending on the temperature inside the house.
  • Photos are dynamic. They change depending on the temperature values of the house.
  • You can see all the room temperatures individually within the page.
  • Fully customizable. You can even use your own photos
  • Telegram automation is also included.
  • You can also receive what to wear pictures from telegram as soon you arrive home.
  • Telegram also tells you the rooms with the lowest and highest temperatures in the house, along with their names.
  • There is also a button to expand the picture quantity whether to show 2 or 3 pictures in the page.


There will be more editions to this page. The fireplace picture shown at the top is a still photo. It will be dynamic in the next update to show the picture of the hottest room within the house and the room picture will also constatntly change depending on the temperature. And the final addition will be a second button next to “More” which will deactivate telegram automation.

Edit: Next update will also bring thermostat or climate controls to the page. When the page finalize anything regarding the heat control can be accessed from a single page.

4 Likes