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

Many thanks that works!! The problem was indeed on ios devices.
Thanks for sharing!

1 Like

Could you share the welcome card? With the dropdown. :slight_smile:

did anybody try to merge the schedule card (or something similar for schedullling) with Mushroom cards ?
I know I could probably Template card, but I would like to keep scheduler card functionalliities

use case ?
Lookking for a nice way to schedule / automate turning off: TV, Decoder, Soundbar, and XBOX

2 Likes

Please, your yaml for the First floor cards (eg. Foyer) and the Jeff/Scenes card?

Thanks a lot in advance. Still not satisfied with room cards, even though I’m using Minimalistic UI Room Cards just for that and they are great…

That is done in the template. This line, select('le', 30) | select('ge', 0), returns all sensors that have a battery level of less than or equal to (le) 30 and greater than or equal to (ge) 0.

Do you want to change the whole card color, icon and slider, or just the icon?

1 Like

It’s kind of some nasty code that could probably be cleaned up but it works lol. You may have to adjust margins.


type: custom:stack-in-card
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-template-card
        primary: null
        secondary: null
        icon: mdi:door
        fill_container: true
        layout: horizontal
        multiline_secondary: false
        badge_icon: |-
          {% set bl = states('sensor.door_lock_battery_level_2') | int %}
          {% if bl < 10 %} mdi:battery-outline
          {% elif bl < 20 %} mdi:battery-10
          {% elif bl < 30 %} mdi:battery-20
          {% elif bl < 40 %} mdi:battery-30
          {% elif bl < 50 %} mdi:battery-40
          {% elif bl < 60 %} mdi:battery-50
          {% elif bl < 70 %} mdi:battery-60
          {% elif bl < 80 %} mdi:battery-70
          {% elif bl < 90 %} mdi:battery-80
          {% elif bl < 100 %} mdi:battery-90
          {% elif bl == 100 %} mdi:battery
          {% else %} mdi:battery-unknown
          {% endif %}
        badge_color: |-
          {% set bl = states('sensor.door_lock_battery_level_2') | int %}
          {% if bl < 10 %} red
          {% elif bl < 20 %} red
          {% elif bl < 30 %} red
          {% elif bl < 40 %} orange
          {% elif bl < 50 %} orange
          {% elif bl < 60 %} green
          {% elif bl < 70 %} green
          {% elif bl < 80 %} green
          {% elif bl < 90 %} green
          {% elif bl < 100 %} green
          {% elif bl == 100 %} green
          {% else %} disabled
          {% endif %}
        tap_action:
          action: navigate
          navigation_path: foyer
        icon_color: deep-purple
        hold_action:
          action: none
        double_tap_action:
          action: none
        card_mod:
          style: |
            :host {
              background: #1f1f1f;
              --mush-icon-size: 74px;
              height: 66px;
              margin-left: -26px !important;
            }
            mushroom-badge-icon {
              left: 178px;
              top: 17px;
            }
      - type: vertical-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Foyer
            secondary: null
            icon: null
            fill_container: true
            layout: horizontal
            multiline_secondary: false
            tap_action:
              action: navigate
              navigation_path: foyer
            icon_color: deep-purple
            hold_action:
              action: none
            double_tap_action:
              action: none
            card_mod:
              style: |
                :host {
                  background: #1f1f1f;
                  margin-top: 0px !important;
                  margin-left: -20px !important;
                  margin-bottom: -18px !important;
                }
          - type: custom:mushroom-light-card
            entity: light.foyer_lights
            fill_container: true
            show_brightness_control: true
            icon_type: none
            primary_info: none
            secondary_info: none
            use_light_color: true
            layout: horizontal
            card_mod:
              style: |
                :host {
                  background: #1f1f1f;
                  margin-left: -22px !important;
                  margin-bottom: -18px !important;
                }
                ha-card {
                  --icon-size: 0px;
                  --control-height: 16px;
                  --control-top: 16px;
                  --control-border-radius: 5px;
                }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: light.foyer_lights
            state: 'on'
        chip:
          type: entity
          entity: light.foyer_lights
          icon_color: amber
          tap_action:
            action: call-service
            service: light.turn_off
            service_data: {}
            target:
              entity_id: light.foyer_lights
          content_info: none
          icon: mdi:lightbulb
      - type: template
        entity: lock.door_lock_2
        icon: |-
          {% set state=states(entity) %}
          {% if state=='locked' %}
          mdi:lock
          {% elif state=='unlocked' %}
          mdi:lock-open-variant
          {% else %}
          grey
          {% endif %}
        tap_action:
          action: more-info
        icon_color: |-
          {% set state=states(entity) %}
          {% if state=='locked' %}
          disabled
          {% elif state=='unlocked' %}
          red
          {% else %}
          amber
          {% endif %}
      - type: template
        entity: binary_sensor.front_door_sensor_access_control_window_door_is_open
        icon: |-
          {% set state=states(entity) %}
          {% if state=='on' %}
          mdi:door-open
          {% elif state=='off' %}
          mdi:door-closed
          {% else %}
          mdi:door
          {% endif %}
        tap_action:
          action: more-info
        icon_color: |-
          {% set state=states(entity) %}
          {% if state=='on' %}
          red
          {% elif state=='off' %}
          disabled
          {% else %}
          amber
          {% endif %}
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          margin-right: 6px;
          margin-top: -5px
        }
card_mod:
  style: |
    ha-card {
      height: 100px;
      background: #1a1a1a;
      {% if is_state('light.foyer_lights', 'on') %}
         background: rgba(255, 152, 0, 0.1);
      {% endif %}
    }

14 Likes

so i would like as now the color of the icon goes to red and i would like when it is on that it goes to blue only the icon ?

It’s build using the css grid layout:

Thank you! I did not know this add-on. I’m going to try and see if I can get it all together.

ıts over 32000. Communıty doesn’t allow me to post the code. I will add it to my github page later and will share the link

So I have finally finished my RSS page and the mobile interface has been completed. I will share the video and code details in my github page later. I have added more then 15 sources to one single page. I can swipe through between different sources with a single click to the chips. It has also been categorized and every category has its own chips which leads to news sources. As far as I know this kind of a project has never been implemented before.

Before starting the mobile interface my goal was to implement smart life instead of smart home. For now I think I have accomplished this.






1 Like

It’s ok, i was able to replicate it, but it might be helpful for other though :slight_smile:

One question, the home/away chips, how did you manage to get them line up? Mine are lined up when away, but all messed up when home lol :stuck_out_tongue:

I used css I can share the code from the begining until the end of that part.

type: custom:stack-in-card
square: false
columns: 1
cards:
  - type: conditional
    conditions:
      - entity: input_boolean.ana_menu_chip
        state: 'on'
    card:
      type: custom:swipe-card
      parameters: null
      spaceBetween: 8
      scrollbar: null
      hide: false
      draggable: true
      snapOnRelease: true
      cards:
        - type: custom:mushroom-chips-card
          chips:
            - type: template
              icon_color: ''
              icon: mdi:menu
              tap_action:
                action: call-service
                service: input_boolean.turn_on
                data: {}
                target:
                  entity_id: input_boolean.kiosk_mode
              double_tap_action:
                action: call-service
                service: input_boolean.turn_off
                data: {}
                target:
                  entity_id: input_boolean.kiosk_mode
            - type: template
              entity: binary_sensor.ewelink_ds01_19b22025_ias_zone
              icon: |-
                {% set state=states(entity) %}
                {% if state=='off' %}
                mdi:lock
                {% elif state=='on' %}
                mdi:lock-open-variant
                {% else %}
                grey
                {% endif %}
              tap_action:
                action: more-info
              icon_color: |-
                {% set state=states(entity) %}
                {% if state=='off %}
                green
                {% elif state=='on' %}
                red
                {% else %}
                grey
                {% endif %}
            - type: template
              entity: group.allhouse
              content: |
                {{ states('sensor.open_light_total') }}
              icon: |-
                {% set state=states(entity) %}
                {% if state=='off' %}
                mdi:lightbulb
                {% elif state=='on' %}
                mdi:lightbulb
                {% else %}
                mdi:door
                {% endif %}
              icon_color: |-
                {% set state=states(entity) %}
                {% if state=='off' %}
                grey
                {% elif state=='on' %}
                amber
                {% else %}
                grey
                {% endif %}
              tap_action:
                action: navigate
                navigation_path: devices
              double_tap_action:
                action: call-service
                service: light.turn_off
                data: {}
                target:
                  entity_id: light.all_house_lights
            - type: template
              entity: switch.all_house_switches
              content: |
                {{ states('sensor.open_switch_total') }}
              icon: |-
                {% set state=states(entity) %}
                {% if state=='off' %}
                mdi:light-switch-off
                {% elif state=='on' %}
                mdi:light-switch
                {% else %}
                mdi:door
                {% endif %}
              icon_color: |-
                {% set state=states(entity) %}
                {% if state=='off' %}
                grey
                {% elif state=='on' %}
                amber
                {% else %}
                grey
                {% endif %}
              tap_action:
                action: more-info
              double_tap_action:
                action: call-service
                service: switch.turn_off
                data: {}
                target:
                  entity_id: switch.all_house_switches
            - type: alarm-control-panel
              entity: alarm_control_panel.ha_alarm
              tap_action:
                action: navigate
                navigation_path: alarm
            - type: conditional
              conditions:
                - entity: input_boolean.zone_google_maps
                  state: 'off'
              chip:
                type: template
                content: |
                  {{ states('sensor.google_ev_is') }} dk.
                entity: sensor.google_ev_is
                icon: mdi:map
                icon_color: amber
                double_tap_action:
                  action: fire-dom-event
                  browser_mod:
                    command: popup
                    deviceID:
                      - this
                    title: Trafik
                    card:
                      type: vertical-stack
                      cards:
                        - type: grid
                          columns: 1
                          square: false
                          cards:
                            - type: vertical-stack
                              cards:
                                - type: iframe
                                  url: >-
                                    https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d96336.99948573063!2d28.9780563504497!3d41.01363228367648!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e6!4m5!1s0x14cac706417cc3d9%3A0x510da53686119327!2zw4dvbGFrIMSwc21haWwgU2suLCBTdWFkaXllLCAzNDc0MCBLYWTEsWvDtnkvxLBzdGFuYnVs!3m2!1d40.962209!2d29.0830187!4m5!1s0x14cab653d1296785%3A0x2af5a6a24d8d396a!2zR2F5cmV0dGVwZSwgWcSxbGTEsXogUG9zdGEgQ2QuLCBCZcWfaWt0YcWfL8Swc3RhbmJ1bA!3m2!1d41.065672299999996!2d29.008391099999997!5e0!3m2!1str!2str!4v1658418919304!5m2!1str!2str%22%20width=%22600%22%20height=%22450%22%20style=%22border:0;%22%20allowfullscreen=%22%22%20loading=%22lazy%22%20referrerpolicy=%22no-referrer-when-downgrade
                                  title: Google Maps
                                  aspect_ratio: 80%
                                  tap_action:
                                    action: call-service
                                    service: script.turn_on
                                    data: {}
                                    target:
                                      entity_id: script.browser_mode_pop_up_close
                                  hold_action:
                                    action: none
                                  theme: Mushroom
                tap_action:
                  action: more-info
            - type: conditional
              conditions:
                - entity: input_boolean.zone_google_maps
                  state: 'on'
              chip:
                type: template
                content: |
                  {{ states('sensor.google_is_ev') }} dk.
                entity: sensor.google_ev_is
                icon: mdi:map
                icon_color: amber
                double_tap_action:
                  action: fire-dom-event
                  browser_mod:
                    command: popup
                    deviceID:
                      - this
                    title: Futbol
                    card:
                      type: vertical-stack
                      cards:
                        - type: grid
                          columns: 1
                          square: false
                          cards:
                            - type: vertical-stack
                              cards:
                                - type: iframe
                                  url: >-
                                    https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d96317.48438258945!2d28.966588200804775!3d41.02697580605618!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e6!4m5!1s0x14cab653d1296785%3A0x2af5a6a24d8d396a!2zR2F5cmV0dGVwZSwgWcSxbGTEsXogUG9zdGEgQ2QuLCBCZcWfaWt0YcWfL8Swc3RhbmJ1bA!3m2!1d41.065672299999996!2d29.008391099999997!4m5!1s0x14cac706417cc3d9%3A0x510da53686119327!2zw4dvbGFrIMSwc21haWwgU2suLCBTdWFkaXllLCAzNDc0MCBLYWTEsWvDtnkvxLBzdGFuYnVs!3m2!1d40.962209!2d29.0830187!5e0!3m2!1str!2str!4v1658419175388!5m2!1str!2str%22%20width=%22600%22%20height=%22450%22%20style=%22border:0;%22%20allowfullscreen=%22%22%20loading=%22lazy%22%20referrerpolicy=%22no-referrer-when-downgrade
                                  title: Google Maps
                                  aspect_ratio: 80%
                                  tap_action:
                                    action: call-service
                                    service: script.turn_on
                                    data: {}
                                    target:
                                      entity_id: script.browser_mode_pop_up_close
                                  hold_action:
                                    action: none
                                  theme: Mushroom
          alignment: justify
          card_mod:
            style: |
              :host {
                --ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
              }
                  ha-card {
                    --chip-icon-size: 20px;
                    --chip-spacing: 2px;
                    margin-top: 5px; 
                    padding-right: auto;
                    padding-top: 1px;
                    padding-left: auto;
                    padding-bottom: 1px; 
                  }
        - type: horizontal-stack
          cards:
            - type: custom:mushroom-chips-card
              chips:
                - type: template
                  double_tap_action:
                    action: none
                  icon_color: amber
                  icon: mdi:home
                  tap_action:
                    action: navigate
                    navigation_path: home
                  hold_action:
                    action: none
                - type: template
                  double_tap_action:
                    action: none
                  icon_color: amber
                  icon: mdi:sofa
                  tap_action:
                    action: navigate
                    navigation_path: salon
                  hold_action:
                    action: none
                - type: template
                  double_tap_action:
                    action: none
                  icon_color: amber
                  icon: mdi:laptop
                  tap_action:
                    action: navigate
                    navigation_path: ofis
                  hold_action:
                    action: none
                - type: template
                  double_tap_action:
                    action: none
                  icon_color: amber
                  icon: mdi:bed
                  tap_action:
                    action: navigate
                    navigation_path: bedroom
                  hold_action:
                    action: none
                - type: template
                  double_tap_action:
                    action: none
                  icon_color: green
                  icon: mdi:spotify
                  tap_action:
                    action: navigate
                    navigation_path: music
                  hold_action:
                    action: none
                - type: template
                  double_tap_action:
                    action: none
                  icon_color: amber
                  icon: mdi:battery
                  tap_action:
                    action: navigate
                    navigation_path: batteries
                  hold_action:
                    action: none
              alignment: justify
              card_mod:
                style: |
                  :host {
                    --ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
                  }
                      ha-card {
                        --chip-icon-size: 20px;
                        --chip-spacing: 2px;
                        margin-top: 5px; 
                        padding-right: auto;
                        padding-top: 1px;
                        padding-left: auto;
                        padding-bottom: 1px; 
                      }
  - square: false
    columns: 4
    type: grid
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: input_boolean.bedroom_klima
                state: 'on'
            chip:
              type: template
              entity: input_boolean.bedroom_klima
              icon: mdi:snowflake-alert
              icon_color: white
              content: '{{ states(entity) }}'
              tap_action:
                action: more-info
        alignment: justify
        card_mod:
          style:
            div:
              mushroom-template-chip$:
                mushroom-chip: |
                  ha-icon {
                      animation: rotation 1s linear infinite;
                    }
                    @keyframes rotation {
                      0% {
                        transform: rotate(0deg);
                      }
                      100% {
                        transform: rotate(360deg);
                      }
                    }
            .: |
              :host {
                --ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
              }
              ha-card {
                --chip-spacing: 2px;
              }
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: input_boolean.termosifon_dugme
                state: 'on'
            chip:
              type: template
              entity: input_boolean.termosifon_dugme
              icon: mdi:water-thermometer-outline
              icon_color: blue
              content: '{{ states(entity) }}'
              tap_action:
                action: more-info
        alignment: justify
        card_mod:
          style:
            div:
              mushroom-template-chip$:
                mushroom-chip: |
                  ha-icon {
                      animation: rotation 1s linear infinite;
                    }
                    @keyframes rotation {
                      0% {
                        transform: rotate(0deg);
                      }
                      100% {
                        transform: rotate(360deg);
                      }
                    }
            .: |
              :host {
                --ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
              }
              ha-card {
                --chip-spacing: 2px;
              }
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: media_player.fire_tv_192_168_1_86
                state: playing
            chip:
              type: template
              entity: media_player.fire_tv_192_168_1_86
              icon: mdi:youtube
              icon_color: red
              content: '{{ states(entity) }}'
        alignment: justify
        card_mod:
          style:
            div:
              mushroom-template-chip$:
                mushroom-chip: |
                  ha-icon {
                      animation: rotation 1s linear infinite;
                    }
                    @keyframes rotation {
                      0% {
                        transform: rotate(0deg);
                      }
                      100% {
                        transform: rotate(360deg);
                      }
                    }
            .: |
              :host {
                --ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
              }
              ha-card {
                --chip-spacing: 2px;
              }
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0px;
          --chip-padding: 15px;
          margin-left: -6px;
          margin-bottom: -12px;
          width: 400px
        }
      alignment: start
  - type: custom:layout-card
    cards:
      - type: horizontal-stack
        cards:
          - type: vertical-stack
            cards:
              - type: custom:stack-in-card
                mode: vertical
                cards:
                  - type: markdown
                    content: |-
                      {% set time = now().hour %}
                      {% if (time >= 18) %}
                          İyi Geceler, {{user}}
                      {% elif (time >= 12) %}
                          Tünaydın, {{user}}
                      {% elif (time >= 5) %}
                          Günaydın, {{user}}
                      {% else %}
                          Merhaba, {{user}}!
                      {% endif %}
                    card_mod:
                      style: |
                        ha-markdown {
                          padding: 5px 0px 2px 0px !important;
                          font-size: 28px !important;
                          font-weight: normal !important;
                          line-height: 1.2 !important;
                        }
                        ha-card {
                          background-color: none;
                          box-shadow: 0px 0px;
                        }
                  - type: markdown
                    content: Bugün günlerden **{{ now().strftime('%d %B, %Y') }}**
                    card_mod:
                      style: |
                        ha-markdown {
                          padding: 0 0 10px 0px !important;
                          font-size: 14px !important;
                          font-weight: normal !important;
                          line-height: 1.4 !important;
                        }
                        ha-card {
                          background-color: none;
                          color: #9b9b9b;
                          box-shadow: 0px 0px;
                        }
                card_mod:
                  style: |
                    ha-card {
                      background: transparent;
                      color: #e1e1e1;
                      box-shadow: 0px 0px;
                      width: 350px;
                    }
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: conditional
                    conditions:
                      - entity: person.ali
                        state: saral
                    chip:
                      type: entity
                      entity: person.ali
                      content_info: nam
                      use_entity_picture: true
                      card_mod:
                        style: |
                          ha-card {
                              --chip-background: rgba(var(--rgb-state-person-home), 0.7);
                              margin-top: 12px;
                              margin-bottom: 0px;
                          }
                  - type: conditional
                    conditions:
                      - entity: person.ali
                        state_not: saral
                    chip:
                      type: entity
                      entity: person.ali
                      content_info: none
                      tap_action:
                        action: more-info
                      use_entity_picture: true
                      card_mod:
                        style: |
                          ha-card {
                            {% if is_state('person.cavidan', 'not_saral') %}
                              --chip-background: rgba(var(--rgb-state-person-not-saral), 0.4);
                            {% elif is_state('person.cavidan', 'unknown') %}
                              --chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
                            {% else %}
                              --chip-background: rgba(var(--rgb-state-person-zone), 0.4);
                            {% endif %} 
                              margin-top: 12px;
                              margin-bottom: 0px;
                          }
                card_mod:
                  style: |
                    ha-card {
                      background-color: none;
                      color: #9b9b9b;
                      box-shadow: 0px 0px;
                      margin-left: 100px

                    }
                alignment: end
              - type: custom:mushroom-chips-card
                chips:
                  - type: conditional
                    conditions:
                      - entity: person.cavidan
                        state: saral
                    chip:
                      type: entity
                      entity: person.cavidan
                      content_info: nam
                      use_entity_picture: true
                      card_mod:
                        style: |
                          ha-card {
                              --chip-background: rgba(var(--rgb-state-person-home), 0.7);
                              margin-top: 12px;
                              margin-bottom: 0px;
                          }
                  - type: conditional
                    conditions:
                      - entity: person.cavidan
                        state_not: saral
                    chip:
                      type: entity
                      entity: person.cavidan
                      content_info: none
                      use_entity_picture: true
                      card_mod:
                        style: |
                          ha-card {
                            {% if is_state('person.cavidan', 'not_saral') %}
                              --chip-background: rgba(var(--rgb-state-person-not-saral), 0.4);
                            {% elif is_state('person.cavidan', 'unknown') %}
                              --chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
                            {% else %}
                              --chip-background: rgba(var(--rgb-state-person-zone), 0.4);
                            {% endif %} 
                              margin-top: 12px;
                              margin-bottom: 0px;
                          }
                alignment: end
                card_mod:
                  style: |
                    ha-card {
                      background-color: none;
                      color: #9b9b9b;
                      box-shadow: 0px 0px;
                      margin-left: 75px
                    }
              - type: custom:mushroom-chips-card
                chips:
                  - type: conditional
                    conditions:
                      - entity: person.berkan_sezer
                        state: home
                    chip:
                      type: entity
                      entity: person.berkan_sezer
                      content_info: nam
                      use_entity_picture: true
                      card_mod:
                        style: |
                          ha-card {
                              --chip-background: rgba(var(--rgb-state-person-home), 0.7);
                              margin-top: 12px;
                              margin-bottom: 0px;
                          }
                  - type: conditional
                    conditions:
                      - entity: person.berkan_sezer
                        state_not: home
                    chip:
                      type: entity
                      entity: person.berkan_sezer
                      content_info: none
                      use_entity_picture: true
                      card_mod:
                        style: |
                          ha-card {
                            {% if is_state('person.berkan_sezer', 'not_home') %}
                              --chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
                            {% elif is_state('person.berkan_sezer', 'unknown') %}
                              --chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
                            {% else %}
                              --chip-background: rgba(var(--rgb-state-person-zone), 0.4);
                            {% endif %} 
                              margin-top: 12px;
                              margin-bottom: 0px;
                          }
                alignment: end
                card_mod:
                  style: |
                    ha-card {
                      background-color: none;
                      color: #9b9b9b;
                      box-shadow: 0px 0px;
                      margin-right: 10px;
                    }

Thank you for the code, This is my issue, :stuck_out_tongue:

image

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: masonry
    layout: {}
    cards:
      - type: custom:mushroom-chips-card
        chips: null
      - type: custom:mushroom-chips-card
        chips:
          - type: menu
          - type: alarm-control-panel
            entity: alarm_control_panel.verisure_alarm
            content_info: none
            name: Alarm
          - type: conditional
            conditions:
              - entity: group.lights_on_count
                state: 'on'
            chip:
              type: template
              icon: mdi:lightbulb-group
              content: >-
                {{ expand(states.group.lights_on_count) | selectattr( 'state',
                'eq', 'on') | list | count }}
              tap_action:
                action: more-info
              entity: group.lights_on_count
              icon_color: amber
          - type: template
            entity: lock.hoveddor
            icon: |-
              {% set state=states(entity) %}
              {% if state=='locked' %}
              mdi:lock
              {% elif state=='unlocked' %}
              mdi:lock-open-variant
              {% else %}
              grey
              {% endif %}
            tap_action:
              action: more-info
            icon_color: |-
              {% set state=states(entity) %}
              {% if state=='locked' %}
              green
              {% elif state=='unlocked' %}
              red
              {% else %}
              grey
              {% endif %}
          - type: template
            entity: group.windows_open_count
            content: >-
              {{ expand(states.group.windows_open_count) | selectattr( 'state',
              'eq', 'on') | list | count }}
            icon: |-
              {% set state=states(entity) %}
              {% if state=='off' %}
              mdi:window-closed-variant
              {% elif state=='on' %}
              mdi:window-open-variant
              {% else %}
              mdi:window-closed-variant
              {% endif %}
            icon_color: |-
              {% set state=states(entity) %}
              {% if state=='off' %}
              green
              {% elif state=='on' %}
              red
              {% else %}
              grey
              {% endif %}
            tap_action:
              action: more-info
          - type: conditional
            conditions:
              - entity: group.doors_open_count
                state: 'on'
            chip:
              type: template
              icon_color: red
              icon: mdi:door-open
              content: >-
                {{ expand(states.group.doors_open_count) | selectattr( 'state',
                'eq', 'on') | list | count }}
              tap_action:
                action: more-info
              entity: group.doors_open_count
          - type: template
            entity: sensor.tibber_stromlast_hjemmet
            content: >-
              {{(states('sensor.tibber_stromlast_hjemmet')|float *
              1/1000)|round(1)}}KWh
            chip:
              icon: mdi:lightning-bolt
              icon_color: orange
              card_mod:
                style: |
                  :host {
                  --ha-card-background: var(--card-background-color);
                  }
          - type: action
            icon: mdi:dots-vertical
            tap_action:
              action: navigate
              navigation_path: >-
                https://ckpungoon7m9o0jyv969gdclrygt68x1.ui.nabu.casa/lovelace-panel/hjem?edit=1
            hold_action:
              action: none
            double_tap_action:
              action: navigate
              navigation_path: /lovelace-panel/hjem
            icon_color: white
        alignment: justify
        card_mod:
          style: |
            :host {
              --ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
            }
            ha-card {
              --chip-spacing: 2px;
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: group.lights_on_count
                state: 'on'
            chip:
              type: template
              icon: mdi:lightbulb-group
              content: >-
                {{ expand(states.group.lights_on_count) | selectattr( 'state',
                'eq', 'on') | list | count }}
              tap_action:
                action: more-info
              entity: group.lights_on_count
              icon_color: amber
          - type: conditional
      - type: custom:stack-in-card
        mode: horizontal
        cards:
          - type: custom:stack-in-card
            mode: vertical
            cards:
              - type: markdown
                content: |-
                  {% set time = now().hour %}
                  {% if (time >= 18) %}
                     Hei, {{user}}
                  {% elif (time >= 12) %}
                     Hei, {{user}}
                  {% elif (time >= 5) %}
                     Hei, {{user}}
                  {% else %}
                     Hei, {{user}}!
                  {% endif %}
                card_mod:
                  style: |
                    ha-markdown {
                      padding: 0 0 0 10px !important;
                      font-size: 28px !important;
                      font-weight: normal !important;
                      line-height: 1.2 !important;
                    }
                    ha-card {
                      background-color: #111111;
                      color: #e1e1e1;
                      box-shadow: 0px 0px;
                    }
              - type: markdown
                content: Idag er det **{{ now().strftime('%d %B, %Y') }}**
                card_mod:
                  style: |
                    ha-markdown {
                      padding: 0 0 0 10px !important;
                      font-size: 14px !important;
                      font-weight: normal !important;
                      line-height: 1.4 !important;
                    }
                    ha-card {
                      background-color: #111111;
                      color: #9b9b9b;
                      box-shadow: 0px 0px;
                    }
            card_mod:
              style: |
                ha-card {
                  background: rgba(var(--rgb-primary-text-color), 0.0);
                  color: #e1e1e1;
                  box-shadow: 0px 0px;
                  width: 350px
                }
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: person.charlotte
                state: home
            chip:
              type: entity
              entity: person.charlotte
              content_info: nam
              use_entity_picture: true
              square: false
              card_mod:
                style: |
                  ha-card {
                      --chip-background: rgba(var(--rgb-state-person-home), 0.7);
                      margin-top: 5px;
                      margin-bottom: 0px;
                      --chip-border-radius: 50px;   
                  }
          - type: conditional
            conditions:
              - entity: person.charlotte
                state_not: home
            chip:
              type: entity
              entity: person.charlotte
              content_info: none
              use_entity_picture: true
              square: false
              card_mod:
                style: |
                   ha-card {
                     {% if is_state('person.charlotte', 'not_home') %}
                       --chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
                     {% elif is_state('person.cavidan', 'unknown') %}
                       --chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
                     {% else %}
                       --chip-background: rgba(var(--rgb-state-person-zone), 0.4);
                     {% endif %} 
                       margin-top: 5px;
                       margin-bottom: 0px;
                   }      
        alignement: end           
        card_mod:
            style: |
              ha-card {
                background-color: none;
                color: #9b9b9b;
                box-shadow: 0px 0px;
                margin-left: 100px
              }
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: person.tommy
                state: home
            chip:
              type: entity
              entity: person.tommy
              content_info: nam
              use_entity_picture: true
              card_mod:
                style: |
                  ha-card {
                      --chip-background: rgba(var(--rgb-state-person-home), 0.7);
                      margin-top: 5px;
                      margin-bottom: 0px;
                      --chip-border-radius: 50px;
                  }
          - type: conditional
            conditions:
              - entity: person.tommy
                state_not: home
            chip:
              type: entity
              entity: person.tommy
              content_info: none
              use_entity_picture: true
              card_mod:
                style: |
                  ha-card {
                    {% if is_state('person.berkan_sezer', 'not_home') %}
                      --chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
                    {% elif is_state('person.berkan_sezer', 'unknown') %}
                      --chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
                    {% else %}
                      --chip-background: rgba(var(--rgb-state-person-zone), 0.4);
                    {% endif %} 
                      margin-top: 12px;
                      margin-bottom: 0px;
                  }
        alignment: end
        card_mod:
          style: |
           ha-card {
             background-color: none;
             color: #9b9b9b;
             box-shadow: 0px 0px;
             margin-right: 10px;
           }
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: person.benjamin
                state: home
            chip:
              type: entity
              entity: person.benjamin
              content_info: nam
              use_entity_picture: true
              card_mod:
                style: |
                  ha-card {
                      --chip-background: rgba(var(--rgb-state-person-home), 0.7);
                      margin-top: 5px;
                      margin-bottom: 0px;
                      --chip-border-radius: 50px;
                  }
          - type: conditional
            conditions:
              - entity: person.benjamin
                state_not: home
            chip:
              type: entity
              entity: person.benjamin
              content_info: none
              use_entity_picture: true
              card_mod:
                style: |
                  ha-card {
                    {% if is_state('person.benjamin', 'not_home') %}
                      --chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
                    {% elif is_state('person.benjamin', 'unknown') %}
                      --chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
                    {% else %}
                      --chip-background: rgba(var(--rgb-state-person-zone), 0.4);
                    {% endif %} 
                      margin-top: 5px;
                      margin-bottom: 0px;
                      --chip-border-radius: 50px;
                  }
        alignment: end
        card_mod:
          style: |
            ha-card {
             margin: -57px 75px 0 0
            }
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: ''
            secondary: Hjem
            icon: mdi:home
            layout: vertical
            icon_color: blue
            tap_action:
              action: navigate
              navigation_path: /lovelace-panel/hjem
            card_mod:
              style: |
                ha-card { 
                  background: rgba(var(--rgb-primary-text-color), 0.025);
                  width: 66px;
                  border-radius: 30px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-top: 4px;
                  margin-bottom: -10px;
                }
          - type: custom:mushroom-template-card
            primary: ''
            secondary: Lys
            icon: mdi:lightbulb-group
            icon_color: orange
            layout: vertical
            tap_action:
              action: navigate
              navigation_path: /lovelace-panel/lys
            card_mod:
              style: |
                ha-card { 
                  background: rgba(var(--rgb-primary-text-color), 0.025);
                  width: 66px;
                  border-radius: 30px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-top: 4px;
                  margin-bottom: -10px;
                }
          - type: custom:mushroom-template-card
            primary: ''
            secondary: Alarm
            icon: mdi:shield
            icon_color: grey
            layout: vertical
            tap_action:
              action: navigate
              navigation_path: /lovelace-panel/alarm
            card_mod:
              style: |
                ha-card { 
                  background: rgba(var(--rgb-primary-text-color), 0.025);
                  width: 66px;
                  border-radius: 30px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-top: 4px;
                  margin-bottom: -10px;
                }
          - type: custom:mushroom-template-card
            primary: ''
            secondary: Ungene
            icon: mdi:face-man
            icon_color: green
            layout: vertical
            tap_action:
              action: navigate
              navigation_path: /lovelace-panel/ungene
            card_mod:
              style: |
                ha-card { 
                  background: rgba(var(--rgb-primary-text-color), 0.025);
                  width: 66px;
                  border-radius: 30px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-top: 4px;
                  margin-bottom: -10px;
                }
          - type: custom:mushroom-template-card
            primary: ''
            secondary: Rom
            icon: mdi:sofa
            layout: vertical
            icon_color: brown
            tap_action:
              action: navigate
              navigation_path: /lovelace-panel/rom
            card_mod:
              style: |
                ha-card { 
                  background: rgba(var(--rgb-primary-text-color), 0.025);
                  width: 66px;
                  border-radius: 30px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-top: 4px;
                  margin-bottom: -10px;
                }
      - square: false
        columns: 2
        type: grid
        cards:
          - type: custom:mushroom-chips-card
            chips:
              - type: conditional
                conditions:
                  - entity: input_boolean.boolean_dashboard_welcome_dropdown
                    state: 'off'
                chip:
                  type: weather
                  entity: weather.hjem
                  show_conditions: true
                  show_temperature: true
              - type: conditional
                conditions:
                  - entity: input_boolean.boolean_dashboard_welcome_dropdown
                    state: 'off'
                chip:
                  type: entity
                  entity: sensor.moon
                  icon_color: yellow
              - type: conditional
                conditions:
                  - entity: input_boolean.boolean_dashboard_welcome_dropdown
                    state: 'off'
                chip:
                  type: template
                  content: '{{state_attr(entity, ''current_temperature'')}} °F'
                  entity: sensor.verisure_rv_stua_fukt
                  icon: mdi:home-thermometer
                  tap_action:
                    action: more-info
                  icon_color: |-
                    {% set state=states(entity) %}
                    {% if state=='cool' %}
                    blue
                    {% elif state=='heat' %}
                    red
                    {% else %}
                    grey
                    {% endif %}
            card_mod:
              style: |
                ha-card {
                  --chip-box-shadow: none;
                  --chip-background: none;
                  --chip-spacing: 0px;
                  --chip-padding: 15px;
                  margin-left: -6px;
                  margin-bottom: -12px;
                  width: 400px
                }
            alignment: start
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                icon: |-
                  {% if is_state(entity, 'off') %}
                    mdi:chevron-down 
                  {% elif is_state(entity, 'on') %}   
                    mdi:chevron-up    
                  {% endif %}
                tap_action:
                  action: toggle
                entity: input_boolean.boolean_dashboard_welcome_dropdown
                icon_color: disabled
            card_mod:
              style: |
                ha-card {
                  --chip-box-shadow: none;
                  --chip-background: none;
                  --chip-spacing: 0px;
                  --chip-padding: 0px;
                  --chip-icon-size: 40px;
                  margin-right: -4px;
                  margin-bottom: -12px;
                }
            alignment: end
      - type: conditional
        conditions:
          - entity: input_boolean.boolean_dashboard_welcome_dropdown
            state: 'on'
        card:
          type: vertical-stack
          cards:
            - type: horizontal-stack
              cards:
                - type: custom:mushroom-template-card
                  primary: ''
                  secondary: Stua
                  icon: mdi:television
                  layout: vertical
                  icon_color: brown
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace-panel/stua
                  card_mod:
                    style: |
                      ha-card { 
                        background: rgba(var(--rgb-primary-text-color), 0.025);
                        width: 66px;
                        border-radius: 30px;
                        margin-left: auto;
                        margin-right: auto;
                        margin-top: -24px;
                        margin-bottom: 4px;
                      }
                - type: custom:mushroom-template-card
                  primary: ''
                  secondary: Kjøkken
                  icon: mdi:silverware-variant
                  layout: vertical
                  icon_color: purple
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace-panel/kjokken
                  card_mod:
                    style: |
                      ha-card { 
                        background: rgba(var(--rgb-primary-text-color), 0.025);
                        width: 66px;
                        border-radius: 30px;
                        margin-left: -5px;
                        margin-right: auto;
                        margin-top: -24px;
                        margin-bottom: 4px;
                      }
                - type: custom:mushroom-template-card
                  primary: ''
                  secondary: Gang
                  icon: mdi:menu
                  layout: vertical
                  icon_color: cyan
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace-panel/gang
                  card_mod:
                    style: |
                      ha-card { 
                        background: rgba(var(--rgb-primary-text-color), 0.025); 
                        width: 66px;
                        border-radius: 30px;
                        margin-left: -10px;
                        margin-right: auto;
                        margin-top: -24px;
                        margin-bottom: 4px;
                      }
                - type: custom:mushroom-template-card
                  primary: ''
                  secondary: Vaskerom
                  icon: mdi:washing-machine
                  layout: vertical
                  icon_color: pink
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace-panel/vaskerom
                  card_mod:
                    style: |
                      ha-card { 
                        background: rgba(var(--rgb-primary-text-color), 0.025);
                        width: 66px;
                        border-radius: 30px;
                        margin-left: -15px;
                        margin-right: auto;
                        margin-top: -24px;
                        margin-bottom: 4px;
                      }
            - type: custom:simple-weather-card
              entity: ledig
              name: ''
              primary_info:
                - wind_speed
                - wind_bearing
                - pressure
              secondary_info:
                - humidity
                - precipitation_probability
                - precipitation
              card_mod:
                style: |
                  ha-card {
                    box-shadow: none;
                    background: none;
                    padding: 0 28px 0 28px !important;
                    margin-left: 0px;
                    margin-right: 0px;
                    margin-top: 0;
                    margin-bottom: 0;
                  }
            - type: grid
              square: false
              columns: 2
              cards:
                - type: custom:stack-in-card
                  mode: vertical
                  cards:
                    - type: custom:mushroom-template-card
                      primary: Autolys
                      secondary: null
                      icon: mdi:home-lightbulb-outline
                      icon_color: blue
                      card_mod:
                        style: |
                          ha-card {
                            padding-bottom: 0px !important;
                          }
                    - type: custom:stack-in-card
                      mode: horizontal
                      cards:
                        - type: horizontal-stack
                          cards:
                            - type: custom:mushroom-template-card
                              icon: mdi:party-popper
                              icon_color: grey
                              layout: vertical
                              secondary: Benjamin
                              tap_action:
                                action: call-service
                                service: scene.turn_on
                                service_data: {}
                                target:
                                  entity_id: scene.party
                              card_mod:
                                style: |
                                  ha-card {
                                    box-shadow: none;
                                    --card-secondary-font-size: 8px;
                                  }
                            - type: custom:mushroom-template-card
                              icon: mdi:television
                              icon_color: grey
                              layout: vertical
                              secondary: Sebastian
                              tap_action:
                                action: call-service
                                service: scene.turn_on
                                service_data: {}
                                target:
                                  entity_id: scene.chill
                              card_mod:
                                style: |
                                  ha-card {
                                    box-shadow: none;
                                    --card-secondary-font-size: 8px;
                                  }
                            - type: custom:mushroom-template-card
                              icon: mdi:stairs
                              icon_color: grey
                              layout: vertical
                              secondary: Lillestua
                              tap_action:
                                action: call-service
                                service: input_boolean.turn_on
                                service_data: {}
                                target:
                                  entity_id: input_boolean.god_natt
                              card_mod:
                                style: |
                                  ha-card {
                                    box-shadow: none;
                                    --card-secondary-font-size: 8px;
                                  }
                      card_mod:
                        style: |
                          ha-card {
                            box-shadow: none;
                          }
                        card_mod:
                          style: |
                            ha-card {
                              padding: 2px;
                              background: #1a1a1a;
                            }
                - type: custom:stack-in-card
                  mode: vertical
                  cards:
                    - type: custom:mushroom-template-card
                      primary: Scener
                      secondary: Alle
                      icon: mdi:home-lightbulb-outline
                      icon_color: blue
                      card_mod:
                        style: |
                          ha-card {
                            padding-bottom: 0px !important;
                          }
                    - type: custom:stack-in-card
                      mode: horizontal
                      cards:
                        - type: horizontal-stack
                          cards:
                            - type: custom:mushroom-template-card
                              icon: mdi:party-popper
                              icon_color: grey
                              layout: vertical
                              secondary: Party
                              tap_action:
                                action: call-service
                                service: scene.turn_on
                                service_data: {}
                                target:
                                  entity_id: scene.party
                              card_mod:
                                style: |
                                  ha-card {
                                    box-shadow: none;
                                    --card-secondary-font-size: 8px;
                                  }
                            - type: custom:mushroom-template-card
                              icon: mdi:television
                              icon_color: grey
                              layout: vertical
                              secondary: Chill
                              tap_action:
                                action: call-service
                                service: scene.turn_on
                                service_data: {}
                                target:
                                  entity_id: scene.chill
                              card_mod:
                                style: |
                                  ha-card {
                                    box-shadow: none;
                                    --card-secondary-font-size: 8px;
                                  }
                            - type: custom:mushroom-template-card
                              icon: mdi:weather-night
                              icon_color: grey
                              layout: vertical
                              secondary: God Natt
                              tap_action:
                                action: call-service
                                service: input_boolean.turn_on
                                service_data: {}
                                target:
                                  entity_id: input_boolean.god_natt
                              card_mod:
                                style: |
                                  ha-card {
                                    box-shadow: none;
                                    --card-secondary-font-size: 8px;
                                  }
                      card_mod:
                        style: |
                          ha-card {
                            box-shadow: none;
                          }
card_mod:
  style: |
    ha-card {
      padding: 2px;
      background: #1a1a1a;
    }

2 Likes

Anyone know how to create a chip that acts as a home button but it navigates to a specific page per user? For example I have a home page specifically for user John and want to create a home button that navigates back to that page, but if another use is logged in that same home button navigates to their respective home page.

You can change just the icon (and shape) when on like this:

type: custom:mushroom-light-card
entity: light.office_light
show_brightness_control: true
card_mod:
  style: |
    mushroom-shape-icon {
      {{ '--card-mod-icon: mdi:lightbulb;' if is_state(config.entity, 'on') else '--card-mod-icon: mdi:lightbulb-off;' }}
      --icon-color-disabled: rgb(var(--rgb-red));
      --shape-color-disabled: rgba(var(--rgb-red), 0.2);
      --icon-color: rgb(var(--rgb-blue)) !important;
      --shape-color: rgba(var(--rgb-blue), 0.2) !important;
    }
1 Like

Is anyone interested in some icon animations?

10 Likes

Hello, I’ve tried it but I’m breaking my head it doesn’t come out, how do you do it? how do you leave the separators on the left and right? Only a central column and assigning a tab?
Forgive me :frowning:

3 Likes

Have a look at layout-card.

2 Likes