Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

Anyone know how to change the size of the font when casting? My Google Hub seems to ignore any of the font stuff.

Hi,
I have problem with animated icon on mushroom chips card. I instaled car mod but I affraid it doesnā€™t work correctly. Every time when I put some animated code nothings happend. I havenā€™t expirience of CSS. Mny thanks for help. I enclose code. Please help.

Hi @MarcinGuc and welcome to the forum!

I encourage you to read this post:

1 Like

If anyone has been wondering how to create a template card for controlling a fan, including sliding speed control, hereā€™s an example.

type: custom:stack-in-card
cards:
#Template card with all its capabilities available
  - type: custom:mushroom-template-card
    primary: Cooling Fan
    icon: mdi:fan
    entity: fan.whisper_flex
    tap_action:
      action: toggle
#Fan card stripped of all unnecessary components through configuration
  - type: custom:mushroom-fan-card
    entity: fan.whisper_flex
    icon_type: none
    primary_info: none
    secondary_info: none
    show_percentage_control: true
    collapsible_controls: true
    show_oscillate_control: true
#Car mod to manage the spacing between the two cards
    card_mod:
      style: |
        ha-card {
          padding-top: 0px !important;
        {% if is_state('fan.whisper_flex', 'off') %}
          padding-bottom: 0px !important;
        {% endif %}
        }

If you set collapsible_controls: false then use this for card_mod instead

    card_mod:
      style: |
        ha-card {
          padding-top: 0px !important;
        }

Here is my idea for a vacuum control card.

It consists of two cards

  • Main vacuum controls

    • Presets for most frequent segments cleaning
    • Cogwheel to navigate to another view where I manage other vacuum settings
    • Play button to clean all house
    • List play for segments selected on the next card
  • Segment selector

    • Buttons to select segments for cleaning
    • A long tap on the button initiates individual segment cleaning

I also utilize the swipe card to navigate between the two cards on the dashboard.

RPReplay_Final1693513690

Code
type: custom:swipe-card
cards:
#Main control card
  - type: custom:stack-in-card
    cards:
#Card icon and name
      - type: custom:mushroom-template-card
        primary: Roborock
        secondary: '{{ states("sensor.roborock_s7_status") | title }}'
        icon: mdi:robot-vacuum
        icon_color: |-
          {% if not is_state('vacuum.roborock_s7_2', 'docked') %}
            amber      
          {% elif is_state('input_boolean.vacuum_auto_start', 'on') %}
            blue
          {% else %} 
            disabled
          {% endif %}
        entity: vacuum.roborock_s7_2
        badge_icon: |-
          {% if is_state('input_boolean.vacuum_auto_start', 'on') %}
            mdi:home-automation      
          {% elif is_state('input_boolean.vacuum_auto_start', 'off') %}

          {% endif %}
        badge_color: |-
          {% if is_state('input_boolean.vacuum_auto_start', 'on') %}
            blue      
          {% elif is_state('input_boolean.vacuum_auto_start', 'off') %}

          {% endif %}
        tap_action:
          action: navigate
          navigation_path: /dashboard-mushroom/vacuum
        double_tap_action:
          action: call-service
          service: input_boolean.toggle
          data: {}
          target:
            entity_id: input_boolean.vacuum_auto_start
        hold_action:
          action: navigate
          navigation_path: /dashboard-mushroom/vacuum
#Presets
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: scene.fan_20
            icon_color: white
            icon: mdi:hanger
            content_info: none
            tap_action:
              action: call-service
              service: vacuum.send_command
              data:
                command: app_segment_clean
                params:
                  - segments:
                      - 16
                    repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
              target:
                entity_id: vacuum.roborock_s7_2
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var({{ '--rgb-red' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
                  --icon-color: rgb(var(--rgb-disabled));
                } 
          - type: entity
            entity: scene.fan_20
            icon_color: white
            icon: mdi:chef-hat
            content_info: none
            tap_action:
              action: call-service
              service: vacuum.send_command
              data:
                command: app_segment_clean
                params:
                  - segments:
                      - 22
                    repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
              target:
                entity_id: vacuum.roborock_s7_2
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var({{ '--rgb-red' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
                  --icon-color: rgb(var(--rgb-disabled));
                } 
          - type: entity
            entity: scene.fan_20
            icon_color: blue
            icon: mdi:cog
            content_info: none
            tap_action:
              action: navigate
              navigation_path: /dashboard-mushroom/vacuum
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var({{ '--rgb-purple' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
                  --icon-color: rgb(var(--rgb-disabled));
                } 
        card_mod:
          style: |
            ha-card {
                --chip-box-shadow: none;
                top: 16px;
                width: -webkit-fill-available;
                right: 12px;
                position: absolute;
            } 
            .chip-container {
                right: 0px;
                position: absolute;
            }
#Control buttons
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: vacuum.roborock_s7_2
            tap_action:
              action: call-service
              service: vacuum.start
              target:
                entity_id: vacuum.roborock_s7_2
            icon: mdi:play
            content: null
            card_mod:
              style: |
                ha-card {justify-content: center;}
          - type: template
            entity: vacuum.roborock_s7_2
            tap_action:
              action: call-service
              service: script.vacuum_selected_rooms
            icon: mdi:playlist-check
            content: null
            card_mod:
              style: |
                ha-card {justify-content: center;}
          - type: template
            entity: vacuum.roborock_s7_2
            tap_action:
              action: call-service
              service: vacuum.pause
              target:
                entity_id: vacuum.roborock_s7_2
            icon: mdi:pause
            content: null
            card_mod:
              style: |
                ha-card {justify-content: center;}
          - type: template
            entity: vacuum.roborock_s7_2
            tap_action:
              action: call-service
              service: vacuum.return_to_base
              target:
                entity_id: vacuum.roborock_s7_2
            icon: mdi:home-map-marker
            content: null
            card_mod:
              style: |
                ha-card {justify-content: center;}
        alignment: Center
        card_mod:
          style: |
            mushroom-template-chip {
              width: 100%; 
            }
            div.chip-container {
              justify-content: space-evenly;
              flex-wrap: nowrap;
            }

            ha-card {
              margin: 0px 12px 12px;
              --chip-background: rgba(var(--rgb-disabled), 0.15);
              --chip-box-shadow: none;
              --chip-border-radius: 10px;
              --chip-height: 42px;
              --chip-padding:10px;
            }
#Segment selector card
  - type: custom:stack-in-card
    cards:
#First row of buttons
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                entity: input_boolean.vacuum_bathroom
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  target:
                    entity_id: input_boolean.vacuum_bathroom
                hold_action:
                  action: call-service
                  service: vacuum.send_command
                  data:
                    command: app_segment_clean
                    params:
                      - segments:
                          - 24
                        repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
                  target:
                    entity_id: vacuum.roborock_s7_2
                icon: null
                content: Bathroom
                card_mod:
                  style: |
                    ha-card {
                      justify-content: center;
                      {% if is_state('input_boolean.vacuum_bathroom', 'on') %}
                        --chip-background: rgba(var(--rgb-blue), 0.7);
                      {% else %}
                        --chip-background: inherit;  # set it to the default or whatever color you want
                      {% endif %}
                    }
              - type: template
                entity: input_boolean.vacuum_bedroom
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  target:
                    entity_id: input_boolean.vacuum_bedroom
                hold_action:
                  action: call-service
                  service: vacuum.send_command
                  data:
                    command: app_segment_clean
                    params:
                      - segments:
                          - 19
                        repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
                  target:
                    entity_id: vacuum.roborock_s7_2
                icon: null
                content: Bedroom
                card_mod:
                  style: |
                    ha-card {
                      justify-content: center;
                      {% if is_state('input_boolean.vacuum_bedroom', 'on') %}
                        --chip-background: rgba(var(--rgb-blue), 0.7);
                      {% else %}
                        --chip-background: inherit;  # set it to the default or whatever color you want
                      {% endif %}
                    }
              - type: template
                entity: input_boolean.vacuum_hallway
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  target:
                    entity_id: input_boolean.vacuum_hallway
                hold_action:
                  action: call-service
                  service: vacuum.send_command
                  data:
                    command: app_segment_clean
                    params:
                      - segments:
                          - 16
                        repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
                  target:
                    entity_id: vacuum.roborock_s7_2
                icon: null
                content: Hallway
                card_mod:
                  style: |
                    ha-card {
                      justify-content: center;
                      {% if is_state('input_boolean.vacuum_hallway', 'on') %}
                        --chip-background: rgba(var(--rgb-blue), 0.7);
                      {% else %}
                        --chip-background: inherit;  # set it to the default or whatever color you want
                      {% endif %}
                    }
              - type: template
                entity: input_boolean.vacuum_kitchen
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  target:
                    entity_id: input_boolean.vacuum_kitchen
                hold_action:
                  action: call-service
                  service: vacuum.send_command
                  data:
                    command: app_segment_clean
                    params:
                      - segments:
                          - 22
                        repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
                  target:
                    entity_id: vacuum.roborock_s7_2
                icon: null
                content: Kitchen
                card_mod:
                  style: |
                    ha-card {
                      justify-content: center;
                      {% if is_state('input_boolean.vacuum_kitchen', 'on') %}
                        --chip-background: rgba(var(--rgb-blue), 0.7);
                      {% else %}
                        --chip-background: inherit;  # set it to the default or whatever color you want
                      {% endif %}
                    }
            alignment: Center
            card_mod:
              style: |
                mushroom-template-chip {
                  width: 100%; 
                }
                div.chip-container {
                  justify-content: space-evenly;
                  flex-wrap: nowrap;
                }

                ha-card {
                  margin: 12px 12px 12px;
                  --chip-background: rgba(var(--rgb-disabled), 0.15);
                  --chip-box-shadow: none;
                  --chip-border-radius: 10px;
                  --chip-height: 42px;
                  --chip-padding:10px;
                }
#Second row of buttons
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                entity: input_boolean.vacuum_living_room
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  target:
                    entity_id: input_boolean.vacuum_living_room
                hold_action:
                  action: call-service
                  service: vacuum.send_command
                  data:
                    command: app_segment_clean
                    params:
                      - segments:
                          - 23
                        repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
                  target:
                    entity_id: vacuum.roborock_s7_2
                icon: null
                content: Living Room
                card_mod:
                  style: |
                    ha-card {
                      justify-content: center;
                      {% if is_state('input_boolean.vacuum_living_room', 'on') %}
                        --chip-background: rgba(var(--rgb-blue), 0.7);
                      {% else %}
                        --chip-background: inherit;  # set it to the default or whatever color you want
                      {% endif %}
                    }
              - type: template
                entity: input_boolean.vacuum_technical
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  target:
                    entity_id: input_boolean.vacuum_technical
                hold_action:
                  action: call-service
                  service: vacuum.send_command
                  data:
                    command: app_segment_clean
                    params:
                      - segments:
                          - 18
                        repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
                  target:
                    entity_id: vacuum.roborock_s7_2
                icon: null
                content: Technical
                card_mod:
                  style: |
                    ha-card {
                      justify-content: center;
                      {% if is_state('input_boolean.vacuum_technical', 'on') %}
                        --chip-background: rgba(var(--rgb-blue), 0.7);
                      {% else %}
                        --chip-background: inherit;  # set it to the default or whatever color you want
                      {% endif %}
                    }
              - type: template
                entity: input_boolean.vacuum_toilet
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  target:
                    entity_id: input_boolean.vacuum_toilet
                hold_action:
                  action: call-service
                  service: vacuum.send_command
                  data:
                    command: app_segment_clean
                    params:
                      - segments:
                          - 17
                        repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
                  target:
                    entity_id: vacuum.roborock_s7_2
                icon: null
                content: Toilet
                card_mod:
                  style: |
                    ha-card {
                      justify-content: center;
                      {% if is_state('input_boolean.vacuum_toilet', 'on') %}
                        --chip-background: rgba(var(--rgb-blue), 0.7);
                      {% else %}
                        --chip-background: inherit;  # set it to the default or whatever color you want
                      {% endif %}
                    }
              - type: template
                entity: input_boolean.vacuum_veronika_room
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  target:
                    entity_id: input_boolean.vacuum_veronika_room
                hold_action:
                  action: call-service
                  service: vacuum.send_command
                  data:
                    command: app_segment_clean
                    params:
                      - segments:
                          - 20
                        repeat: '{{ states(''input_number.vacuum_repeat_count'') | int }}'
                  target:
                    entity_id: vacuum.roborock_s7_2
                icon: null
                content: Veronika
                card_mod:
                  style: |
                    ha-card {
                      justify-content: center;
                      {% if is_state('input_boolean.vacuum_veronika_room', 'on') %}
                        --chip-background: rgba(var(--rgb-blue), 0.7);
                      {% else %}
                        --chip-background: inherit;  # set it to the default or whatever color you want
                      {% endif %}
                    }
            alignment: Center
            card_mod:
              style: |
                mushroom-template-chip {
                  width: 100%; 
                }
                div.chip-container {
                  justify-content: space-evenly;
                  flex-wrap: nowrap;
                }

                ha-card {
                  margin: 0px 12px 12px;
                  --chip-background: rgba(var(--rgb-disabled), 0.15);
                  --chip-box-shadow: none;
                  --chip-border-radius: 10px;
                  --chip-height: 42px;
                  --chip-padding:10px;
                }

18 Likes

Looks good!
Post your finished cards here btw :slight_smile:

2 Likes

Hey there! Can anyone help with combining all the smart outlets of a particular selected room into one card, with the ability to disable all outlets by pressing just one card? Thanks!!!

Has anyone successfully managed to make a sticky bottom navbar like this from minimalist? Iā€™ve seen a few posts in this massive thread but theyā€™re often not in a finished state and have a few bugs related. Iā€™d love to see some inspiration, and the code!

5 Likes

Hi guys,

I hope you can help me or guide me in the right direction. I created the following dashboard mainly using mushroom cards. My main idea is that I get only shown the minimum information to have an overview what is going on currently in my house. By clicking on the entity card I get more detailed information for each floor.

On the left side you see how the dashboard currently looks like. Every floor is created with an entity card and several chip cards that are only shown if they have a certain status. Otherwise they remain hidden not to overblow the view.

On the right side you find the dashboard how I would like it to look like. Basically every chip card gets a ā€œheaderā€ or ā€œtitleā€. I tried to realize it by stacking a markdown card and a chip card together. But then I can not use it as a chip card anymore. So how do I horizontally stack them aligned at the end.

Thanks for your help.

I was planning to have a look at that too:) Did you try this Mushroom Cards - Build a beautiful dashboard easily šŸ„ - #7023 by Guizmos

I have dropped a random card to my dashboard, applied the card mod and it worksā€¦but I have an issue with the position of the card. It seems like the further down you place the card (order-wise) the further on top it is placed but some of the cards are still further on top.

RPReplay_Final1693569913

i think it is likely to do with your z-index: in card-mod. you can try and set your other cards to z-index: 0; and then having your sticky card by z-index: 1? that might work.

My HA mobile version
7bwSNJKjoJ
9mv1OuoYnp

1 Like

I was hoping someone would have just had a nice block of code I could steal ha. Iā€™ve not tried much myself yet, I could never get the positioning right. I donā€™t like in that example that thereā€™s still a visible space under the bottom bar.

You are right, that fixes the issue! ā€¦no matter what I wrote in my previous post (that I am going to delete)

type: history-graph
entities:
  - sun.sun
card_mod:
  style: |
    ha-card {
      max-height: calc(100vh - var(--header-height)) !important;
      overflow-y: auto !important;
      max-width: var(--masonry-column-width, 490px) !important;
    }
    :host {
      position: fixed !important;
      z-index: 1 !important;
      bottom: 10px !important;
      width: 100% !important;

    }

Glad to hear it!

i havent played around with a nav bar the the bottom so if you get a good design working let me know! :slight_smile:

Iā€™m really looking for someone who can optimize mine ahaha

1 Like

Nice card! how do you set up your swipe card? if i use swipe card, when i try to swipe in mobile device it always register accidental pressā€¦do you get that too?

Nope, it doesnā€™t happen to me. You can check the code I shared in my post to see what I did.

Frankly, most of the time I have no clue what am I doing but by changing some settings and checking what it does I got it to a reasonable shape. At that point I give up otherwise I would spent entire weekend on that:)

I have tested it on my (iP mini) and my wifeā€™s (iP Max) phones and both had it shaped as you can see so hopefully it will look the same on other devices too.

type: custom:stack-in-card
cards:
  - type: custom:swipe-card
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: null
            icon: mdi:sofa
            layout: horizontal
            icon_color: yellow
          - type: custom:mushroom-template-card
            primary: null
            icon: mdi:bed-king-outline
            layout: horizontal
            icon_color: red
          - type: custom:mushroom-template-card
            primary: null
            icon: mdi:chef-hat
            layout: horizontal
            icon_color: green
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: null
            icon: mdi:teddy-bear
            layout: horizontal
            icon_color: blue
          - type: custom:mushroom-template-card
            primary: null
            icon: mdi:flower
            layout: horizontal
            icon_color: green
          - type: custom:mushroom-template-card
            primary: null
            icon: mdi:shower
            layout: horizontal
            icon_color: blue
card_mod:
  style: |

    ha-card {
      padding: 12px 12px 30px 12px !important;
      margin: -12px -6px -20px !important;
      --chip-background: rgba(var(--rgb-disabled), 0.15);
      --chip-box-shadow: none;
      --chip-border-radius: 10px;
      --chip-height: 42px;
      --chip-padding: 10px;
      max-height: calc(100vh - var(--header-height)) !important;
      overflow-y: auto !important;
      max-width: var(--masonry-column-width, 490px) !important;
      background-color: #002f7a;
    }
    :host {
      position: fixed !important;
      z-index: 1 !important;
      bottom: 0px !important;
      width: 96% !important;

    }

I recommend adding this to the last card on the dashboard to allow scrolling down to this last card. otherwise, it will stay hidden behind the nav bar.

card_mod:
  style: |
    ha-card {
        margin: 0px 0px 100px 0px !important;
    }

Also please note that the z-index: 1 will place this card over the editing dialog overlaying the Save button. You can scroll through other buttons on the dialog with Tab and then hit Enter to save the changes.

Can you explain me please how you added the icons on the right side of the living room light panel? Do they work like buttons?