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

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