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

Any way to create a „edit dashboard“ button with mushroom chips?

Or how do you edit the dashboard if you hide the header bar?

is there another way to remove padding around mushroom cards besides using the card_mod? After updating to mushroom v 4.x the padding variable in the card_mod is no longer respected when opening dashboards from my android phone (it does still work fine when opening directly in browser on laptop).

Create a Action button with Tap action set as ‘URL’, and enter your dashboard url as the path, with the following string on the end:

?edit=1

Keep in mind, this will reload the page.

Thats what I did, butIt wont reload the page. And then, there is no option (button) to Finish editing. So yeah, maybe I should let it stay until there are no other options.

I’m assuming you’re using kiosk-mode? Maybe, you could just temporarily disable km using the strings here in your Chip card, or create an input_boolean, then toggle it when required.

Personally, I find it pointless editing on mobile, hence why I enabled it for desktop only.

Hi, I found an old post with a template for a collapsible card with hourly weather forecast (Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1) - #3086 by davidnestico), unfortunately I am getting some borders displayed so it doesn’t look so nice. Tried to hunt them down to mod the CSS but no luck, did anyone perhaps had the same problem and fixed it?

Thanks for the discussion, this got me started on a new dashboard :slight_smile:

hi guys, I hope you can help me. After updating Mushroom cards, my dashboard seems that zoom in. here I attach the screenshot of my dashboard and the relative code.
BEFORE:


AFTER:

Here the code of the first left card “Esterno”


                  - type: custom:mushroom-template-card
                    primary: null
                    secondary: Piano Terra
                    icon: null
                    layout: horizontal
                    tap_action: none
                    hold_action:
                      action: none
                    double_tap_action:
                      action: none
                    multiline_secondary: false
                    card_mod:
                      style: |
                        ha-card {
                          --card-primary-font-weight: normal;
                          --card-secondary-font-weight: normal;
                          --card-primary-font-size: 0px;
                          --card-secondary-font-size: 15px;
                          background-color: rgba(0,0,0,0);
                          --ha-card-border-width: 0;
                          }
                        :host {
                                margin-top: -15px !important;
                                margin-bottom: 15px !important;
                                                          }
                  - type: horizontal-stack
                    cards:
                      - type: custom:stack-in-card
                        cards:
                          - type: custom:mushroom-template-card
                            primary: Esterno
                            secondary: >-
                              {{ states('sensor.salone_outside_temperature') |
                              round(0) }} °C
                            icon: mdi:flower
                            entity: light.gruppo_luci_esterno
                            tap_action:
                              action: navigate
                              navigation_path: luci-esterne
                            hold_action:
                              action: toggle
                            icon_color: yellow
                            fill_container: true
                            layout: horizontal
                            multiline_secondary: false
                            card_mod:
                              style: |
                                :host([dark-mode]) {
                                  background: rgba(var(--rgb-primary-background-color), 0.2);
                                } 
                                :host {
                                  background: rgba(var(--rgb-primary-text-color), 0.025);
                                  --mush-icon-size: 90px;
                                  height: 70px;
                                  margin-left: -22px !important;
                                }
                          - type: custom:mushroom-chips-card
                            chips:
                              - type: conditional
                                conditions:
                                  - entity: binary_sensor.motion_portico_occupancy
                                    state: 'on'
                                chip:
                                  type: template
                                  entity: binary_sensor.motion_portico_occupancy
                                  tap_action:
                                    action: none
                                  icon_color: null
                                  icon: mdi:motion-sensor
                              - type: conditional
                                conditions:
                                  - entity: light.gruppo_luci_esterno
                                    state: 'on'
                                chip:
                                  type: template
                                  entity: light.gruppo_luci_esterno
                                  tap_action:
                                    action: toggle
                                  icon_color: amber
                                  icon: mdi:lightbulb
                              - type: template
                                entity: input_boolean.non_servo_a_nulla
                                double_tap_action:
                                  action: none
                                tap_action:
                                  action: navigate
                                  navigation_path: macchina
                                hold_action:
                                  action: none
                                icon: mdi:car-electric
                            alignment: end
                            card_mod:
                              style: |
                                ha-card {
                                  --ha-card-border-width: 0;;
                                  --chip-background: none;
                                  --chip-spacing: 0;
                                  top: -10px;
                                }
                        card_mod:
                          style: |
                            ha-card {
                              height: 102px;
                              {% if is_state('light.gruppo_luci_esterno', 'on') %}
                                 background: rgba(255, 255, 0, 0.1);
                              {% endif %}
                            }
                            :host {
                                    margin-top: -15px !important;
                                  }

thank you in advance :slight_smile:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.helper_test
    card_mod:
      style: |
        ha-card:after {
            content: "1";
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            background: red;
            font-weight: bolder;
            border-radius: 50%;
            top: -5px;
            right: -5px;
            width: 16px;
            height: 16px;
            font-size: 11px; 
          }
1 Like

image

Hi @rhysb ! Could you please help me with this issue? I copied your code posted a few years ago and really love it! I haven’t used my HA for a new months and recently when i logged back in i found there is a little gap between the above two cards. I can’t get it removed. Could you please take a look at it and help me out? Much appreciate!!

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-template-card
        primary: Master Bedroom
        secondary: '{{ states(''sensor.upstairs_ac_temperature'')}}°C'
        icon: mdi:bed-double
        entity: light.master_bedroom_lights
        tap_action:
          action: navigate
          navigation_path: master-bedroom
        hold_action:
          action: more-info
        icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }}'
        fill_container: true
        layout: horizontal
        multiline_secondary: false
        card_mod:
          style: |
            :host([dark-mode]) {
              background: rgba(var(--rgb-primary-background-color), 0.2);
            } 
            :host {
              background: rgba(var(--rgb-primary-text-color), 0.05);
              --mush-icon-size: 76px;
              height: 66px;
              margin-left: -18px !important;
            }
            ha-card {
              width: 240px;
            }
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                entity: binary_sensor.bedroom_motions
                icon_color: gray
                icon: mdi:motion-sensor
                tap_action:
                  action: fire-dom-event
                  browser_mod:
                    service: browser_mod.popup
                    data:
                      title: Motion Detected
                      content:
                        type: custom:auto-entities
                        show_empty: false
                        card:
                          type: entities
                          show_header_toggle: false
                          state_color: true
                        filter:
                          include:
                            - domain: binary_sensor
                              attributes:
                                device_class: motion
                              area: Master Bedroom
                              state: 'on'
                              options:
                                type: custom:mushroom-entity-card
                                layout: horizontal
                                secondary_info: last-changed
                                tap_action:
                                  action: more-info
                                hold_action:
                                  action: none
                                card_mod:
                                  style: |
                                    ha-card {
                                      padding: 4px 12px !important;                                    
                                    }  
                          exclude:
                            - entity_id: binary_sensor.garage_1_motion_reolink
                            - attributes:
                                device_class: motion
                              device_manufacturer: Browser Mod
                        sort:
                          method: last_changed
                          ignore_case: false
              - type: template
                entity: cover.bedroomshutters
                icon: |-
                  {% if is_state(entity, 'open') %}
                    mdi:blinds-open
                  {% elif is_state(entity, 'opening') %}
                    mdi:blinds-open
                  {% else %}
                    mdi:roller-shade-closed
                  {% endif %} 
                content: '{{ (states(''cover.bedroomshutters''))  | capitalize}}'
                icon_color: |-
                  {% if is_state(entity, 'closing') %}
                    gray 
                  {% elif is_state(entity, 'open') %}
                    blue
                  {% elif is_state(entity, 'opening') %}
                    gray
                  {% else %}
                    #254c6f
                  {% endif %} 
                tap_action:
                  action: fire-dom-event
                  browser_mod:
                    service: browser_mod.popup
                    data:
                      title: Bathroom Shutters
                      card_mod:
                        style: |
                          .mdc-dialog .mdc-dialog__container {
                            width: 100%;
                            justify-content: flex-end;
                          }
                          .content {
                            height: auto !important;
                          }
                          .: |
                            :host {
                              --mdc-theme-surface: rgba(0,0,0,0);
                              --secondary-background-color: rgba(0,0,0,0);
                              --ha-card-background: rgba(0,0,0,0);
                              --mdc-dialog-scrim-color: rgba(0,0,0,1);
                              --mdc-dialog-min-height: 0%;
                              --mdc-dialog-max-height: 80%;
                              --mdc-dialog-min-width: 80%;
                              --mdc-dialog-max-width: 100%;
                            }
                      content:
                        type: custom:stack-in-card
                        cards:
                          - type: custom:mushroom-chips-card
                            chips:
                              - type: entity
                                entity: scene.powerview_hub_bedroom_open
                                content_info: name
                                name: Open
                                tap_action:
                                  action: call-service
                                  service: scene.turn_on
                                  service_data:
                                    entity_id: scene.powerview_hub_bedroom_open
                                hold_action:
                                  action: none
                                double_tap_action:
                                  action: none
                                icon: mdi:window-open
                                card_mod:
                                  style: |
                                    ha-card {
                                      height: 22px !important; }
                              - type: entity
                                entity: scene.powerview_hub_bedroom_close
                                content_info: name
                                name: Close
                                tap_action:
                                  action: call-service
                                  service: scene.turn_on
                                  service_data:
                                    entity_id: scene.powerview_hub_bedroom_close
                                hold_action:
                                  action: none
                                double_tap_action:
                                  action: none
                                icon: mdi:blinds-horizontal-closed
                                card_mod:
                                  style: |
                                    ha-card {
                                      height: 22px !important; }
                              - type: entity
                                entity: scene.powerview_hub_bedroom_both_75
                                content_info: name
                                name: Both 75%
                                tap_action:
                                  action: call-service
                                  service: scene.turn_on
                                  service_data:
                                    entity_id: scene.powerview_hub_bedroom_both_75
                                hold_action:
                                  action: none
                                double_tap_action:
                                  action: none
                                icon: mdi:blinds-horizontal
                                card_mod:
                                  style: |
                                    ha-card {
                                      height: 22px !important; }    
                              - type: entity
                                entity: scene.powerview_hub_bedroom_r_75
                                content_info: name
                                name: R 75%
                                tap_action:
                                  action: call-service
                                  service: scene.turn_on
                                  service_data:
                                    entity_id: scene.powerview_hub_bedroom_r_75
                                hold_action:
                                  action: none
                                double_tap_action:
                                  action: none
                                icon: mdi:blinds-horizontal
                                card_mod:
                                  style: |
                                    ha-card {
                                      height: 22px !important; }  
                            alignment: center
                            card_mod:
                              style: |
                                ha-card {
                                  margin-top: 0px; }
                          - type: horizontal-stack
                            cards:
                              - type: custom:mushroom-cover-card
                                entity: cover.bedroom_left
                                icon: mdi:roller-shade
                                layout: vertical
                                show_position_control: false
                                tap_action:
                                  action: more-info
                                hold_action:
                                  action: none
                                double_tap_action:
                                  action: none
                                show_tilt_position_control: true
                              - type: custom:mushroom-cover-card
                                entity: cover.bedroom_right
                                icon: mdi:roller-shade
                                layout: vertical
                                show_position_control: false
                                tap_action:
                                  action: more-info
                                hold_action:
                                  action: none
                                double_tap_action:
                                  action: none
                                show_tilt_position_control: true
                        card_mod:
                          style: |
                            ha-card {
                              margin-top: -10px !important;}
            card_mod:
              style:
                mushroom-template-chip:nth-child(1)$: |
                  ha-state-icon {
                    --chip-icon-size: 22px;
                    margin-top: 0px;
                    margin-right: -0px;

                    animation: blink 2s linear infinite;
                    }
                  @keyframes blink {
                      40% {opacity: 0;}
                   }  
                mushroom-template-chip:nth-child(2)$: |
                  ha-state-icon {
                    margin-right: 5px;
                    {% if states('cover.bedroomshutters') == 'closed' %}
                      margin-top: 0px;
                      --chip-icon-size: 18px;
                    {% else %}
                      margin-top: 6px;
                      --chip-icon-size: 19px;
                    {% endif %}
                  }

                   
                .: |
                  mushroom-template-chip:nth-child(1) {
                    {% if states('binary_sensor.bedroom_motions') == 'off' %}
                      margin-right: 0px !important;
                      display: none !important;
                    {% else %}
                    {% endif %}
                  }
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-spacing: -10px;
                    --chip-font-size: 11px;
                     margin-top: 5px;

                  } 
            alignment: end
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                entity: media_player.master_bedroom_display_2
                icon: mdi:speaker
                icon_color: |
                  {% if is_state(entity, 'playing') %}
                    #266aa7
                  {% else %}  
                    #999999
                  {% endif %}
                tap_action:
                  action: more-info
              - type: template
                entity: media_player.bedroom_chromecast
                icon: mdi:monitor
                icon_color: |
                  {% if is_state(entity, 'on') %}
                    #266aa7
                  {% else %}  
                    #999999
                  {% endif %}
                tap_action:
                  action: fire-dom-event
                  browser_mod:
                    service: browser_mod.popup
                    data:
                      title: Bedroom TV
                      content:
                        type: glance
                        entities:
                          - entity: media_player.bedroom_tv
                          - entity: media_player.bedroom_chromecast
            card_mod:
              style:
                mushroom-template-chip:nth-child(1)$: >
                  ha-state-icon {  {% if
                  states('media_player.master_bedroom_display_2') == 'playing'
                  %}
                    --card-mod-icon: mdi:music;
                    --chip-icon-size: 22px;
                    margin-right: 9px;
                    animation: beat 1.3s ease-out infinite both;
                    transform-origin: 50% 80%;
                  {% elif states('media_player.master_bedroom_display_2') ==
                  'idle' %}
                    margin-right: 6px;
                    --chip-icon-size: 22px;

                  {% elif states('media_player.master_bedroom_display_2') ==
                  'paused' %}
                    margin-right: 6px;
                    --chip-icon-size: 22px;

                  {% elif states('media_player.master_bedroom_display_2') ==
                  'off' %}
                    margin-right: 5px;
                    --chip-icon-size: 21px;
                    --card-mod-icon: mdi:speaker;
                  {% endif %} }

                  @keyframes beat {
                    0% { transform: scale(1); }
                    10% { transform: scale(1.1); }
                    17% { transform: scale(1.05); }
                    33% { transform: scale(1.25); }
                    60% { transform: scale(1); }

                  }
                mushroom-template-chip:nth-child(2)$: |
                  ha-state-icon:before {
                    content: "";
                    position: absolute;
                    width: 40%;
                    height: 30%;
                    margin: 6%;
                    {% if states('media_player.bedroom_tv') ==
                    'on' %}
                    animation: refresh 300ms linear infinite;
                    {% else %}
                    {% endif %}
                  } 
                  @keyframes refresh { 
                    0% { background: linear-gradient(180deg, rgba(var(--rgb-blue), 0.3) 0%, transparent 50%, transparent 100%); }
                    25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-blue), 0.2) 25%, transparent 100%); }
                    50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-blue), 0.2) 50%, transparent 100%); }
                    75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-blue), 0.1) 75%, transparent 100%); }
                    100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-blue), 0.3) 100%); }
                  }
                .: |
                  ha-card {
                     --chip-background: transparent !important;
                     --chip-font-size: 2px;
                     --chip-height: 46px;
                     --chip-spacing: -17px;
                     
                     margin-top: -22px;
                     bottom: -10px;
                  }
            alignment: end
        card_mod:
          style:
            .: |

              ha-card {
                 --chip-background: transparent !important;
                 --chip-font-size: 11px;
                 --chip-height: 38px;
                 --chip-spacing: -8px;
                                  
              }
              :host {
                background: rgba(var(--rgb-primary-text-color), 0.05);
              }
    card_mod:
      style: |
        ha-card {
          height: 100px;
          
          {% if is_state('light.master_bedroom_lights', 'on') %}
              background: rgba(44, 165, 235, 0.05);
          {% endif %}
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: light.master_bedroom_light
        tap_action:
          action: toggle
        hold_action:
          action: more-info
        double_tap_action:
          action: toggle
        icon: mdi:light-recessed
        icon_color: |-
          {% if is_state('light.master_bedroom_light', 'on') %}
            blue     
          {% elif is_state('light.master_bedroom_light', 'off') %}
            
          {% endif %}
        content: Bedroom
        card_mod:
          style: |
            ha-card {
              background-color: rgba(249, 249, 249, 0.02) !important;

              width: 50%;
              height: 40px !important
            }
      - type: template
        entity: light.master_bedroom_master_bath_light
        tap_action:
          action: toggle
        hold_action:
          action: more-info
        double_tap_action:
          action: toggle
        icon: mdi:light-recessed
        icon_color: |-
          {% if is_state('light.master_bedroom_master_bath_light', 'on') %}
            blue     
          {% elif is_state('light.master_bedroom_master_bath_light', 'off') %}
            
          {% endif %}
        content: Bath
        card_mod:
          style: |
            ha-card {
              background-color: rgba(249, 249, 249, 0.02) !important;
              width: 85%;
              height: 40px !important
            }
      - type: template
        entity: light.master_bedroom_other_lights
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Bedroom Other Lights
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-chips-card
                    chips:
                      - type: light
                        entity: light.master_bedroom_other_lights
                        tap_action:
                          action: toggle
                        hold_action:
                          action: more-info
                        double_tap_action:
                          action: none
                        use_light_color: true
                    alignment: end
                    card_mod:
                      style: |
                        ha-card {
                          margin: -20px 8px 0px;
                        }
                  - type: horizontal-stack
                    cards:
                      - type: custom:mushroom-light-card
                        entity: light.master_bedroom_ceiling_light
                        name: Ceiling
                        icon: mdi:chandelier
                        layout: vertical
                        use_light_color: true
                        tap_action:
                          action: toggle
                        hold_action:
                          action: more-info
                        double_tap_action:
                          action: none
                      - type: custom:mushroom-light-card
                        entity: light.bath_mirror_light
                        name: Bath Mirror
                        icon: mdi:mirror-rectangle
                        layout: vertical
                        use_light_color: true
                        tap_action:
                          action: toggle
                        hold_action:
                          action: more-info
                        double_tap_action:
                          action: none
                      - type: custom:mushroom-light-card
                        entity: light.master_closet_light
                        name: Closet
                        icon: mdi:light-recessed
                        layout: vertical
                        use_light_color: true
                        tap_action:
                          action: toggle
                        hold_action:
                          action: more-info
                        double_tap_action:
                          action: none
        hold_action:
          action: more-info
        double_tap_action:
          action: toggle
        icon_color: |-
          {% if is_state(entity, 'on') %}
          blue     
          {% else %}
          none
          {% endif %}
        content: Others
        icon: mdi:lightbulb-group
        card_mod:
          style: |
            ha-card {
              background-color: rgba(249, 249, 249, 0.02) !important;

              width: 85%;
              height: 40px !important;

            }
      - type: template
        entity: switch.master_bedroom_switches
        icon_color: |-
          {% if is_state('switch.master_bedroom_switches', 'on') %}
            blue     
          {% elif is_state('switch.master_bedroom_switches', 'off') %}
            
          {% endif %}
        icon: mdi:power-socket-uk
        content: Outlets
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Bedroom Outlets
              content:
                type: custom:stack-in-card
                mode: vertical
                cards:
                  - type: horizontal-stack
                    cards:
                      - type: custom:mushroom-chips-card
                        chips:
                          - type: entity
                            entity: switch.master_bedroom_switches
                            icon: mdi:power-socket-au
                            icon_color: >-
                              {% if is_state('switch.master_bedroom_switches',
                              'on') %} blue      {% else %} none

                              {% endif %}
                            content: '{{states(''switch.master_bedroom_switches'')}}'
                            tap_action:
                              action: toggle
                            card_mod:
                              style: |
                                ha-card { 
                                  margin-top: 10px;
                                  margin-right: 20px;
                                  height: 28px !important;
                                  background-color: transparent !important;
                                  }
                        alignment: end
                  - type: custom:stack-in-card
                    mode: vertical
                    cards:
                      - type: custom:stack-in-card
                        mode: horizontal
                        cards:
                          - type: custom:mushroom-entity-card
                            entity: switch.vics_cellphone_socket_1
                            icon: mdi:power-socket-au
                            primary_info: name
                            name: Victoria Cellphone
                            tap_action:
                              action: toggle
                          - type: custom:mushroom-entity-card
                            entity: switch.jamess_cellphone_socket_1
                            icon: mdi:power-socket-au
                            primary_info: name
                            name: James Cellphone
                            tap_action:
                              action: toggle
                        card_mod:
                          style: |
                            ha-card {
                              background-color: transparent !important;
                              }
                      - type: custom:stack-in-card
                        mode: horizontal
                        cards:
                          - type: custom:mushroom-entity-card
                            entity: switch.tp_link_smart_plug_00fc_prep_kitchen_1
                            icon: mdi:power-socket-au
                            primary_info: name
                            name: Prep Outlet 1
                            tap_action:
                              action: toggle
                          - type: custom:mushroom-entity-card
                            entity: switch.tp_link_smart_plug_00fc_prep_kitchen_2
                            icon: mdi:power-socket-au
                            primary_info: name
                            name: Prep Outlet 2
                            tap_action:
                              action: toggle
                        card_mod:
                          style: |
                            ha-card {
                              background-color: transparent !important;
                              }
                    card_mod:
                      style: |
                        ha-card {
                          background-color: transparent !important;
                          margin-top: -10px;
                          }
                card_mod:
                  style: |
                    ha-card {
                      /* Set padding of card */
                      margin-top: -22px;


                      transition: all 0s;
                      box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
                    }
        card_mod:
          style: |
            ha-card {
              background-color: rgba(249, 249, 249, 0.02) !important;

              width: 85%;
              height: 40px !important
            }
    alignment: center
    card_mod:
      style: |
        ha-card {
          margin-top: -40px;
          margin-bottom: auto;          
          --chip-spacing: 2px;
        }
card_mod:
  style: |
    ha-card {
      height: 100px;
      {% if is_state('light.master_bedroom_lights', 'on') %}
          background: rgba44, 165, 235, 0.05);
      {% endif %}
      
      /* Styling of card background */
      background: color-mix(in srgb, var(--card-background-color) 60%, var(--primary-background-color)) !important;
      border-radius: var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);

      transition: all 0s;
      box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
      }

Hi lads, can anyone confirm (if this is at all possible)
I’d like the icon to be behind the text and larger / a bit opaque?
I’ve tried this yaml:
but my icon just keeps being above the text not in the background…

type: custom:mushroom-template-card
primary: PAKTIJK
secondary: ''
icon: mdi:home
entity: light.lichten_praktijk
layout_options:
  grid_columns: 2
  grid_rows: 3
layout: vertical
fill_container: true
card_mod:
  style: |
    :host {
      --ha-card-background: {% if is_state('light.lichten_praktijk', 'on') %} var(--blue-grey-color) {% else %} var(--card-background-color) {% endif %};
    }
    .mushroom-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 100px; /* Adjust the size as needed */
      z-index: 1;
      opacity: 0.2; /* Adjust the transparency as needed */
    }
    .mushroom-primary, .mushroom-secondary {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      text-align: center;
    }

like this ?

type: custom:mushroom-template-card
primary: ' '
icon: mdi:home
entity: light.lichten_praktijk
layout_options:
  grid_columns: 2
  grid_rows: 3
layout: vertical
fill_container: true
card_mod:
  style:
    mushroom-state-info$: |
      .primary:before {
        content: 'PAKTIJK';
        position: absolute;
        display: flex;
        left: 44%;
        top: 30%;
        font-size: 15px;
      }

Is there a way to force the text in the center both horizontally and vertically

This might be incredibly obvious, but why isn’t there a “Icon tap behavior” option? I’m used to toggling a device by tapping the icon and getting more info by tapping the text next to the icon. I’m trying work around this by using the hold behavior, but this does not work so well for me on my ipad.

Hello all! I have this component on my dashboard:

I tried to add a border to my blinds with percentage and it worked, but the problem is that the icon dimention is smaller than the others; I tried to modify the height and width of percentage, but it’s impossible to center the icon.

How can I resolve that?

Thank you all!

This is my code:

type: custom:button-card
name: Soggiorno
icon: mdi:sofa
show_state: true
tap_action:
  action: navigate
  navigation_path: '#soggiorno'
custom_fields:
  temp: >
    [[[ return "T: " + states['sensor.temphum_soggiorno_temperature'].state + '
    °C' ]]]
  hum: >
    [[[ return "H: " + states['sensor.temphum_soggiorno_humidity'].state + ' %'
    ]]]
  mold: >
    [[[ return "M: " + states['sensor.indicatore_muffa_soggiorno'].state + ' %'
    ]]]
  btn1:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.navigate
              data:
                path: /lovelace/telecomandosony
          icon: mdi:television
          entity: media_player.sony_kd_55x80k
          card_mod:
            style: |
              ha-card {
                --chip-background: {{ 'rgba(79, 117, 255, 1)' if is_state('media_player.sony_kd_55x80k', 'on') else 'rgba(79, 117, 255, 0.5)' }};
                padding: 5px !important;
                border-radius: 100px !important;
        - type: template
          tap_action:
            action: toggle
            hold: detail
          icon: mdi:globe-light
          entity: light.luce_soggiorno
          card_mod:
            style: |
              ha-card {
                --chip-background: {{ 'rgba(34, 151, 153, 1)' if is_state('light.luce_soggiorno', 'on') else 'rgba(34, 151, 153, 0.5)' }};
                padding: 5px !important;
                border-radius: 100px !important;
              }
        - type: template
          tap_action:
            action: toggle
          icon: mdi:lamp
          entity: light.lampada_soggiorno
          card_mod:
            style: |
              ha-card {
                --chip-background: {{ 'rgba(255, 200, 100, 1)' if is_state('light.lampada_soggiorno', 'on') else 'rgba(255, 200, 100, 0.5)' }};
                padding: 5px !important;
                border-radius: 100px !important;
              }
  btn2:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          tap_action:
            action: toggle
          icon: mdi:table-furniture
          entity: light.luce_tavolo
          card_mod:
            style: |
              ha-card {
                --chip-background: {{ 'rgba(199, 37, 62, 1)' if is_state('light.luce_tavolo', 'on') else 'rgba(199, 37, 62, 0.5)' }};
                padding: 5px !important;
                border-radius: 100px !important;
              }
        - type: template
          tap_action:
            action: toggle
          icon: mdi:light-recessed
          entity: light.luce_cucina
          card_mod:
            style: |
              ha-card {
                --chip-background: {{ 'rgba(232, 92, 13, 1)' if is_state('light.luce_cucina', 'on') else 'rgba(232, 92, 13, 0.5)' }};
                padding: 5px !important;
                border-radius: 100px !important;
              }
        - type: template
          tap_action:
            action: toggle
          icon: mdi:wall-sconce-flat
          entity: light.luce_penisola
          card_mod:
            style: |
              ha-card {
                --chip-background: {{ 'rgba(130, 17, 49, 1)' if is_state('light.luce_penisola', 'on') else 'rgba(130, 17, 49, 0.5)' }};
                padding: 5px !important;
                border-radius: 100px !important;
              }
  btn3:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          entity: cover.finestra_soggiorno
          tap_action:
            action: toggle
          icon: mdi:door-sliding
          card_mod:
            style: |
              ha-card: {
                padding: 5px !important;
              }
              ha-card:before {
                content: "";
                position: absolute;
                height: var(--chip-height);
                width: var(--chip-height);
                border-radius: 50%;
                background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-white)) {{ (state_attr('cover.finestra_cucina','current_position')) | round(0) }}% 0%, var(--card-background-color) 0% 100%);
                transform: rotateY(180deg);
              }
              ::slotted(ha-icon) {
                margin-right: 0.45em !important;
                z-index: 1;
              }
        - type: template
          entity: cover.finestra_soggiorno
          tap_action:
            action: toggle
          icon: mdi:blinds-horizontal
          card_mod:
            style: |
              ha-card: {
                padding: 5px !important;
              }
              ha-card:before {
                content: "";
                position: absolute;
                height: var(--chip-height);
                width: var(--chip-height);
                border-radius: 50%;
                background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-white)) {{ (state_attr('cover.finestra_cucina','current_position')) | round(0) }}% 0%, var(--card-background-color) 0% 100%);
                transform: rotateY(180deg);
              }
              ::slotted(ha-icon) {
                margin-right: 0.45em !important;
                z-index: 1;
              }
        - type: template
          entity: climate.midea_ac_145135534890527
          tap_action:
            action: toggle
          icon: |-
            {% if is_state('climate.midea_ac_145135534890527', 'cool') %}
              mdi:snowflake
            {% elif is_state('climate.midea_ac_145135534890527', 'heat') %}
              mdi:fire
            {% elif is_state('climate.midea_ac_145135534890527', 'dry') %}
              mdi:water-percent
            {% else %}
              mdi:air-conditioner
            {% endif %}
          card_mod:
            style: |
              ha-card {
                {% if is_state('climate.midea_ac_145135534890527', 'cool') %}
                  --chip-background: {{ 'rgb(79, 117, 255)' }};
                {% elif is_state('climate.midea_ac_145135534890527', 'heat') %}
                  --chip-background: {{ 'rgb(255, 136, 91)' }};
                {% elif is_state('climate.midea_ac_145135534890527', 'dry') %}
                  --chip-background: {{ 'rgb(250, 188, 63)' }};
                {% else %}
                  --chip-background: {{ 'rgb(30, 32, 30)' }};
                {% endif %}
                padding: 5px !important;
                border-radius: 100px !important;
              }
styles:
  grid:
    - grid-template-areas: >-
        "n btn1 btn2 btn3" "temp btn1 btn2 btn3" "hum btn1 btn2 btn3" "mold btn1
        btn2 btn3" "i btn1 btn2 btn3" 
    - grid-template-columns: 1fr min-content min-content min-content
    - grid-template-rows: min-content min-content min-content min-content 1fr
  img_cell:
    - justify-content: start
    - position: absolute
    - width: 100px
    - height: 100px
    - left: 0
    - bottom: 0
    - margin: 0 0 -30px -30px
    - background: rgb(120, 183, 208)
    - border-radius: 500px
  icon:
    - position: relative
    - width: 60px
    - color: black
    - opacity: '0.6'
  card:
    - padding: 15px
    - height: 190px
  custom_fields:
    temp:
      - padding-top: 10px
      - justify-self: start
      - font-size: 13px
      - opacity: 0.7
    hum:
      - justify-self: start
      - font-size: 13px
      - opacity: 0.7
    mold:
      - justify-self: start
      - font-size: 13px
      - opacity: 0.7
    btn1:
      - justify-content: end
      - align-self: start
    btn2:
      - justify-content: end
      - align-self: start
      - padding-left: 10px
    btn3:
      - justify-content: end
      - align-self: start
      - padding-left: 10px
  name:
    - justify-self: start
    - align-self: start
    - font-size: 18px
    - font-weight: 500

1 Like

good morning I’ve been going crazy for days, I have this code for my air conditioner everything works but I don’t see the ventilation function.
How come???

I use broadlink and smartIR could there be any problem in configuring these two???

type: custom:mushroom-climate-card
entity: climate.cameretta_ac
hvac_modes:
  - heat_cool
  - heat
  - cool
  - fan_only
  - dry
show_temperature_control: true
collapsible_controls: false
name: Air Conditioner
card_mod:
  style: |
    mushroom-shape-icon {
      {% if is_state(config.entity, 'heat_cool') %}
        --card-mod-icon: mdi:autorenew;
        animation: spin 3s ease-in-out infinite;
      {% elif is_state(config.entity, 'heat') %}
        --card-mod-icon: mdi:fire;
        animation: heat 2s infinite;
      {% elif is_state(config.entity, 'cool') %}
        --card-mod-icon: mdi:snowflake;
        animation: cool 6s ease-in-out infinite;
      {% elif is_state(config.entity, 'dry') %}
        --card-mod-icon: mdi:water-percent;
        animation: dry 1.5s linear infinite;
      {% elif is_state(config.entity, 'fan_only') %}
        --card-mod-icon: mdi:fan;
        animation: spin 1s linear infinite;
      {% else %}
        --card-mod-icon: mdi:air-conditioner;
      {% endif %}
      display: flex;
    }
    @keyframes cool {
      0%, 100% { transform: rotate(25deg); }
      25% { transform: rotate(-25deg); }
      50% { transform: rotate(50deg); }
      75% { transform: rotate(-50deg); }
    }
    @keyframes heat {
      0%, 100% { --icon-color: rgba(var(--rgb-red), 1); }
      10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); }
      20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); }
      30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); }
      40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); }
      50% { --icon-color: rgba(var(--rgb-red), 0); }
    }
    @keyframes dry {
      0%, 100% { --icon-symbol-size: 21px; }
      10%, 90% { --icon-symbol-size: 22px; }
      20%, 80% { --icon-symbol-size: 23px; }
      30%, 70% { --icon-symbol-size: 24px; }
      40%, 60% { --icon-symbol-size: 25px; }
      50% { --icon-symbol-size: 26px; }
    }
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

ventilazine

Hi lads,
Small question if anyone knows if this has been done by someone before:

I have a mushroom “play / pause” button made from template card.

The icon color and icon itself change when the media player starts playing.

When pressing the button it can take up to 3 seconds for the music to start playing.
Since the button is ‘in limbo’ at that point people have the tendency to tap the button again.

Is there a way to ad a ‘loading’ icon as intermediate? For x amount of seconds or from the tap until the new state…

Hi to all,

Could you please help me? I would like to change the icon color based on other helper status. It is an automation for vacuum and I would like to see the actually state of helper.

Change the icon-color is working on the template-card but not on the entity. I tried the style: … version also but that also not work.

type: custom:mushroom-entity-card
entity: input_datetime.gizike_idore
icon_color: |-
  {% if is_state('input_boolean.gizike_automata_porszivozas','on') %}
    green
  {% else %}
    red
  {% endif %}
hold_action:
  action: perform-action
  perform_action: input_boolean.toggle
  target:
    entity_id: input_boolean.gizike_automata_porszivozas

at now:
2024-09-19 16_15_21-Mobil – Home Assistant

and I would like to see:
2024_09_19_16_18_24_Mobil_Home_Assistant

Many Thanks.

can’t use templates in an entity card, would have to use a mushroom template card or card_mod

1 Like

Is there no way to add a name to the Chips? Home Assistant copied the Mushroom chips in the last few updates as Badges, and they added names, which seem to be missing from the Mushroom chips.

I also miss this function and opened an issue on Github a few weeks ago. But still no response from the developers. It’s unfortunately only possible for mushroom template chips card in the badge area.

1 Like