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

Good. Thanks
Any way to reduce the size of the conditional chip icons and the space between them?

Yes, this is an example

        alignment: end
        card_mod:
         style: |
          ha-card {
            border: none;
            --chip-height: 30px;
            --chip-spacing: 0px;
                   }

I already try thatā€¦ but it still have a lot of spaceā€¦
image

image

Please point out what you consider lots of space. Are you talking about the space inside the chip?

Yesā€¦ because i remove the bordersā€¦ and the all the ā€œinsideā€ space remains

Hi all. I have inserted those conditional cards couple of years ago for my homeassistant dashboard. Got my self a new computer and did backup copy of frontend
But having problem with animation of chips like this one down below no matter what i do it dont work, the icon
Does not appear on the card.
Thanks in advance

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Half Bath
    secondary: Bathroom
    icon: mdi:toilet
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    tap_action:
      action: navigate
      navigation_path: half-bath
    icon_color: teal
    hold_action:
      action: none
    double_tap_action:
      action: none
    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          background: rgba(var(--rgb-primary-text-color), 0.025);
          --mush-icon-size: 76px;
          height: 56px;
          margin-left: -2px !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
      - type: conditional
        conditions:
          - entity: light.vanity_light
            state: 'on'
        chip:
          type: entity
          entity: light.vanity_light
          icon_color: amber
          tap_action:
            action: call-service
            service: light.turn_off
            service_data: {}
            target:
              entity_id: light.vanity_light
          content_info: none
          icon: mdi:lightbulb
      - type: conditional
        conditions:
          - entity: fan.exhaust_fan
            state: 'on'
        chip:
          type: entity
          entity: fan.exhaust_fan
          icon_color: green
          card_mod: null
          style: |
            @keyframes rotation {
              0% {
                transform: rotate(0deg);
              }
              100% {
                transform: rotate(360deg);
              }
            }
            ha-card {
              animation: rotation linear infinite;
              {% if states('fan.exhaust_fan') == 'on' %}
               animation-duration: 1s;
              {%- else -%}
              {%- endif %}
            }
          tap_action:
            action: call-service
            service: fan.turn_off
            service_data: {}
            target:
              entity_id: fan.exhaust_fan
          content_info: none
          icon: mdi:fan
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          margin-right: 6px;
        }
card_mod:
  style: |
    ha-card {
      height: 92px;
      {% if is_state('light.vanity_light', 'on') %}
         background: rgba(255, 152, 0, 0.1);
      {% endif %}
    }

An exampleā€¦

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: binary_sensor.suite_motion
        state_not: "off"
    chip:
      type: template
      icon_color: |-
        {% set state=states(entity) %}
        {% if state=='open'  or state=='on' %}
        yellow
        {% elif state=='unavailable' %}
        red
        {% endif %}
      icon: mdi:motion-sensor
      entity: binary_sensor.suite_motion
card_mod:
  style:
    mushroom-conditional-chip:nth-child(1):
      mushroom-template-chip$: |
        ha-state-icon {
          padding: 20px;
          }

You can set the padding: to zero, but you can also shift the chips closer together if you are removing the border.

Your indention for style: is off, thus the null value

It is

card_mod:
  style:  |

Could any one help me get the animation working?
A bit unsure how to target the chip.

      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: switch.coffeemaker
                state: "on"
            chip:
              type: entity
              entity: switch.coffeemaker
              icon_color: brown
              content_info: none
              icon: mdi:coffee-maker
              card_mod:
                style: |
                  mushroom-conditional-chip:nth-child(1):
                    mushroom-template-chip$: |
                      ha-state-icon {
                          animation: java 4s linear infinite;
                        }
                      @keyframes java {
                        0%, 80%, 100% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 0 100%); }
                        10% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 77%, 55% 80%, 57% 100%, 0 100%); }
                        15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 77%, 55% 80%, 55% 100%, 0 100%); }
                        20% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 76%, 55% 76%, 57% 100%, 0 100%); }
                        25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 76%, 55% 76%, 56% 100%, 0 100%); }
                        30% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 55%, 42% 69%, 44% 73%, 55% 73%, 57% 100%, 0 100%); }
                        35% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 54%, 42% 69%, 44% 73%, 55% 73%, 56% 100%, 0 100%); }
                        40% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 57% 70%, 57% 100%, 0 100%); }
                        45% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 55% 70%, 56% 100%, 0 100%); }
                        50% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 57% 65%, 57% 100%, 0 100%); }
                        55% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 55% 65%, 56% 100%, 0 100%); }
                        60% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 57% 60%, 57% 100%, 0 100%); }
                        65% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 55% 60%, 56% 100%, 0 100%); }
                        70% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 57% 56%, 57% 100%, 0 100%); }
                        75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 55% 56%, 55% 100%, 0 100%); }
                      }
                    .: |
                      ha-card {
                        background: var(--card-background-color);
                        #width: 66px;
                        border-radius: 30px;
                        margin-left: auto;
                        margin-right: auto;
                        margin-bottom: 2px;
                      }

Like thisā€¦

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: switch.coffeemaker
        state: "on"
    chip:
      type: entity
      entity: switch.coffeemaker
      icon_color: brown
      content_info: none
      icon: mdi:coffee-maker
card_mod:
  style:
    mushroom-conditional-chip:nth-child(1):
      mushroom-entity-chip$: |
        ha-state-icon {
          animation: java 4s linear infinite;
        }
        @keyframes java {
              0%, 80%, 100% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 0 100%); }
              10% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 77%, 55% 80%, 57% 100%, 0 100%); }
              15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 77%, 55% 80%, 55% 100%, 0 100%); }
              20% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 76%, 55% 76%, 57% 100%, 0 100%); }
              25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 76%, 55% 76%, 56% 100%, 0 100%); }
              30% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 55%, 42% 69%, 44% 73%, 55% 73%, 57% 100%, 0 100%); }
              35% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 54%, 42% 69%, 44% 73%, 55% 73%, 56% 100%, 0 100%); }
              40% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 57% 70%, 57% 100%, 0 100%); }
              45% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 55% 70%, 56% 100%, 0 100%); }
              50% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 57% 65%, 57% 100%, 0 100%); }
              55% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 55% 65%, 56% 100%, 0 100%); }
              60% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 57% 60%, 57% 100%, 0 100%); }
              65% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 55% 60%, 56% 100%, 0 100%); }
              70% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 57% 56%, 57% 100%, 0 100%); }
              75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 55% 56%, 55% 100%, 0 100%); }
                      }

Is this correct?

chip:
          type: entity
          entity: fan.sonoff_1000a82389
          icon_color: green
          card_mod:
            style: |
              @keyframes rotation {
                0% {
                  transform: rotate(0deg);
                }
                100% {
                  transform: rotate(360deg);
                }
              }
              ha-card {
                animation: rotation linear infinite;
                {% if states('fan.sonoff_1000a82389') == 'on' %}
                 animation-duration: 1s;
                {%- else -%}
                {%- endif %}
              }

No, please compare your code to the post before yoursā€¦

EDIT: ADDED CODE

Sticky

type: custom:stack-in-card
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: menu
      - type: template
        content: "{{ now().strftime(\"%A, %-d %B\") }}"
        card_mod:
          style: |
            /* Style date & time */
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-border-width: 0;
            }
      - type: template
        entity: input_boolean.notifications
        icon: mdi:bell
        tap_action:
          action: toggle
        hold_action:
          action: none
        card_mod:
          style: |

            /* Notification indicator */
            ha-card:after {
              /* Turn on indicator if there is a notification */
              {% set notifications = (expand(states.group.all_lights) | selectattr('state', 'eq', 'on') | list | count)
                                   + (expand(states.group.all_windows) | selectattr( 'state', 'eq', 'on') | list | count) 
                                   + (expand(states.group.external_doors) | selectattr( 'state', 'eq', 'on') | list | count) 
                                   + states('sensor.devices_with_low_battery') | int %}
              {% if notifications > 0 %}
                content: "";
              {% endif %}

              /* Position & style notification */
              position: absolute;
              background: rgb(var(--rgb-red));
              border-radius: 50%;
              top: 6px;
              right: 6px;
              width: 8px;
              height: 8px;
            } 
    alignment: justify
  - type: conditional
    conditions:
      - entity: input_boolean.notifications
        state: "on"
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          entity: alarm_control_panel.home_alarm
          icon: mdi:shield-home
          icon_color: |-
            {% set alarm_status = states(entity) %}
            {% if alarm_status == 'armed_home' %} 
              green
            {% elif alarm_status == 'disarmed' %}
              blue
            {% elif alarm_status == 'arming' %}
               yellow
            {% elif alarm_status == 'triggered' %}
               red
            {% endif %} 
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                title: Alarm
                content:
                  type: custom:mushroom-alarm-control-panel-card
                  entity: alarm_control_panel.home_alarm
                  states:
                    - armed_home
                    - armed_away
          hold_action:
            action: none
        - type: template
          entity: lock.front_door
          icon: "{{ 'mdi:lock' if is_state(entity, 'locked') else 'mdi:lock-open' }}"
          icon_color: "{{ 'green' if is_state(entity, 'locked') else 'red' }}"
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                title: Front Door
                content:
                  type: custom:stack-in-card
                  cards:
                    - type: custom:layout-card
                      layout_type: masonry
                      layout: {}
                      cards:
                        - type: custom:frigate-card
                          cameras:
                            - camera_entity: camera.doorbell
                              live_provider: webrtc-card
                              webrtc_card:
                                url: rtsp://10.10.90.10/Streaming/Channels/501/
                          dimensions:
                            aspect_ratio_mode: dynamic
                    - type: custom:mushroom-lock-card
                      entity: lock.front_door
                card_mod:
                  style: |
                    .content {
                    }
        - type: conditional
          conditions:
            - entity: group.all_lights
              state: "on"
          chip:
            type: template
            icon: mdi:lightbulb
            entity: group.all_lights
            content: >
              {{ expand(states.group.all_lights) | selectattr('state', 'eq',
              'on') | list | count }}
            icon_color: amber
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Lights On
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: group.all_lights
                          state: "on"
                          options:
                            type: custom:mushroom-light-card
                            show_brightness_control: true
                            layout: horizontal
                            tap_action:
                              action: toggle
                            use_light_color: true
                        - entity_id: group.all_lights
                          state: "on"
                          options:
                            type: custom:mushroom-light-card
                            layout: horizontal
                            secondary_info: none
                            tap_action:
                              action: toggle
                            card_mod:
                              style: |
                                /* Style & position All Lights button */
                                ha-card {
                                  background: color-mix(in srgb, rgb(var(--rgb-state-light)) 10%, var(--card-background-color));
                                }
                                :host {
                                  margin: 0px 0px 12px !important;
                                }
                      exclude: []
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
        - type: conditional
          conditions:
            - entity: group.all_windows
              state: "on"
          chip:
            type: template
            icon_color: blue
            icon: mdi:window-open
            entity: group.all_windows
            content: >
              {{ expand(states.group.all_windows) | selectattr('state', 'eq',
              'on') | list | count }}
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Windows Open
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: group.all_windows
                          state: "on"
                          options:
                            type: custom:mushroom-entity-card
                            layout: horizontal
                            secondary_info: last-changed
                            tap_action:
                              action: none
                            hold_action:
                              action: none
                      exclude: []
                    show_empty: false
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
        - type: conditional
          conditions:
            - entity: group.external_doors
              state: "on"
          chip:
            type: template
            entity: group.external_doors
            content: >
              {{ expand(states.group.external_doors) | selectattr('state', 'eq',
              'on') | list | count }}
            icon_color: brown
            icon: mdi:door-open
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Windows Open
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: group.external_doors
                          state: "on"
                          options:
                            type: custom:mushroom-entity-card
                            layout: horizontal
                            secondary_info: last-changed
                            icon_color: brown
                            tap_action:
                              action: none
                            hold_action:
                              action: none
                      exclude: []
                    show_empty: false
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
        - type: conditional
          conditions:
            - entity: sensor.devices_with_low_battery
              state_not: "0"
          chip:
            type: template
            entity: sensor.devices_with_low_battery
            content: |
              {{ states(config.entity) | int }}
            icon_color: red
            icon: mdi:battery-alert
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Low Batteries
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - attributes:
                            device_class: battery
                          state: < 30
                          options:
                            type: custom:mushroom-template-card
                            primary: "{{ states(entity) }}%"
                            secondary: "{{ state_attr(entity, 'friendly_name') | title }}"
                            icon: >
                              {% set battery_level = (states(entity) | int / 10)
                              | round(0) | int * 10 %}

                              {% if battery_level == 100 %}
                                mdi:battery
                              {% elif battery_level > 0 %}
                                mdi:battery-{{ battery_level }}
                              {% else %}
                                mdi:battery-outline
                              {% endif %}
                            icon_color: |-
                              {% set battery_level = states(entity) | int %}
                              {% if battery_level > 90 %} 
                                green
                              {% elif battery_level > 60 %}
                                light-green
                              {% elif battery_level > 50 %}
                                lime
                              {% elif battery_level > 40 %}
                                yellow
                              {% elif battery_level > 30 %}
                                amber
                              {% elif battery_level > 20 %}
                                orange
                              {% elif battery_level > 10 %}
                                deep-orange
                              {% else %}
                                red
                              {% endif %} 
                            layout: horizontal
                            tap_action:
                              action: none
                            badge_icon: >-
                              {{ 'mdi:exclamation-thick' if states(entity) | int
                              < 10 }} 
                            badge_color: red
                      exclude: null
                    show_empty: false
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
        - type: conditional
          conditions:
            - entity: group.water_leak
              state: "on"
          chip:
            type: template
            icon_color: light-blue
            icon: mdi:water-alert
            tap_action:
              action: more-info
            entity: group.water_leak
            card_mod:
              style: |
                .content {
                  animation: blink 1s linear infinite;
                }
                @keyframes blink {
                  50% {opacity: 0;}
                }
        - type: conditional
          conditions:
            - entity: group.smoke_alarm
              state: "on"
          chip:
            type: template
            icon_color: red
            icon: mdi:fire-alert
            tap_action:
              action: more-info
            entity: group.smoke_alarm
            card_mod:
              style: |
                .content {
                  animation: blink 1s linear infinite;
                }
                @keyframes blink {
                  50% {opacity: 0;}
                }
      alignment: end
      card_mod:
        style: |
          /* Set margins on notification chips */
          ha-card {
            margin: var(--chip-spacing) calc(-1 * var(--chip-spacing)) 0px;
            transition: all 0s;
          }
card_mod:
  style: |
    /* Remove styling from top card with chips */
    ha-card {
      /* Allow pseudo elements to display outside card */
      overflow: visible !important;

      /* Remove gap at top of card */
      margin-top: calc(-1 * var(--mush-chip-spacing, 8px));

      /* Remove styling from card */
      box-shadow: none;
      border: none;
      background: none;
      padding: var(--mush-chip-spacing, 8px);
      transition: all 0s;
    }
    /* Make card sticky at top of page */
    :host {
      position: sticky;
      z-index: 9;
      top: 0px;
    }
    /* Pseudo element to hide card styling when at top */
    ha-card:after {
      content: "";

      /* Make fixed so element scrolls up */
      position: fixed;
      top: 0px;

      /* Adjust height when notifications visible */
      height: {{ '104px' if is_state('input_boolean.notifications', 'on') else '60px' }};

      /* Set width to match */
      width: calc(100% - var(--mush-chip-spacing, 8px));
      max-width: calc(var(--column-max-width) - 2 * var(--ha-card-border-width, 1px) - var(--mush-chip-spacing, 8px));

      /* Center element on page */
      left: 50%;
      transform: translateX(-50%);

      /* Position between chips and background pseudo elemnt */
      z-index: -1;

      /* Match background to main card */
      background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color));
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
    }
    /* Pseudo element for background & other card styling */
    ha-card:before {
      content: "";

      /* Position & size card behind chips */
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;

      /* Adjust width to account for border */
      width: calc(100% - 2 * var(--ha-card-border-width, 1px));

      /* Position card at back */
      z-index: -1;

      /* Blur content behind card */
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);

      /* Adjust opacity of card */
      background: rgba(var(--rgb-card-background-color), 0.8);

      /* Set styling of card */
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
      box-shadow: var(--ha-card-box-shadow);
      border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
    }

Welcome

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto auto
      margin: 8px 4px 4px 4px;
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: person.derrick
            content_info: none
            use_entity_picture: true
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Derrick
                  content:
                    type: vertical-stack
                    cards:
                      - type: custom:mushroom-person-card
                        entity: person.derrick
                        icon_type: entity-picture
            card_mod:
              style: |
                /* Color border around avatar to show person status */
                ha-card {
                  --chip-background:
                  {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                    rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
                  {% else %}
                    rgb(var(--rgb-state-person-zone))
                  {% endif %};
                } 
                /* Slightly enlarge & bring to front on hover */
                ha-card:hover {
                  transform: scale(1.2);
                  transform-origin: top center;
                  z-index: 1;
                  transition: all 1s;
                }
          - type: entity
            entity: person.papa
            content_info: none
            use_entity_picture: true
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Papa
                  content:
                    type: vertical-stack
                    cards:
                      - type: custom:mushroom-person-card
                        entity: person.papa
                        icon_type: entity-picture
            card_mod:
              style: |
                /* Color border around avatar to show person status */
                ha-card {
                  --chip-background:
                  {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                    rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
                  {% else %}
                    rgb(var(--rgb-state-person-zone))
                  {% endif %};
                } 
                /* Slightly enlarge & bring to front on hover */
                ha-card:hover {
                  transform: scale(1.2);
                  transform-origin: top center;
                  z-index: 1;
                  transition: all 1s;
                }
        alignment: end
        card_mod:
          style: |
            ha-card { 
              /* Overlap avatar Chips */
              --chip-spacing: calc(-1 * var(--mush-chip-spacing, 8px));

              /* Set size of border around Chips */
              --chip-avatar-padding: 2px;

              /* Reduce width to fit Chips & allow max space for weather */
              width: fit-content;
              transition: all 0s;
            }
      - type: custom:mushroom-template-card
        primary: "{{ state_attr(entity, 'temperature') | int}} Ā°F"
        secondary: >-
          {% set condition = state_attr(entity, 'weather.home')[0]['conditions']
          %} {% set intensity = states('weather.home') %}

          {% if intensity != 'None' %}
            {% set condition = intensity + ' Rain' %}
          {% endif %}

          {{ condition }}
        icon: " "
        entity: weather.home
        picture: >-
          {% set condition = states(entity)  %}

          {% set intensity = states('weather.home') | replace(" ", "-") | lower
          %}

          {% if condition == 'partlycloudy' and is_state('sun.sun',
          'below_horizon') %}
            {% set condition = condition + '-night' %}
          {% endif %}

          {% if intensity != 'none' and condition != 'lightning' %}
            {% set condition = intensity %}
          {% endif %}

          /local/weather_icons/{{ condition }}.svg
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Weather
              content:
                type: custom:layout-card
                layout_type: masonry
                layout: {}
                cards:
                  - type: custom:weather-card
                    entity: weather.home
                    number_of_forecasts: "5"
        card_mod:
          style:
            mushroom-state-info$: |
              /* Align text on the right */
              .container {
                transform: scaleX(-1);
                text-align: right;
                width: fit-content;
              }
            .: |
              ha-card {
                /* Move icon to the right */
                transform: scaleX(-1);

                /* Enlarge icon & remove circular shape */
                --icon-size: 42px;
                --icon-border-radius: 0;

                /* Style secondary text */
                --card-secondary-font-weight: normal;

                /* Remove styling from card */
                --ha-card-background: none;
                --ha-card-box-shadow: none;
                --ha-card-border-width: 0;
                padding: 0px !important;
                transition: all 0s;
              }
  - type: horizontal-stack
    cards:
      - type: custom:mod-card
        card:
          type: custom:mushroom-title-card
          title: |-
            {% set time = now().hour %}
            {% if (time >= 18) %} 
             Good Evening,
            {% elif (time >= 12) %}
             Good Afternoon,
            {% elif (time >= 5) %}
             Good Morning,
            {% else %}
             Welcome,
            {% endif %}
          subtitle: |
            {{ user }}!
          alignment: start
        card_mod:
          style:
            mushroom-title-card$: |
              /* Style greeting */
              .title {
                --title-font-size: var(--mush-title-font-size, 16px);
                --title-font-weight: var(--mush-subtitle-font-weight, light);
                color: var(--secondary-text-color) !important;
              }
              /* Style name */
              .subtitle {
                --subtitle-font-size: var(--mush-title-font-size, 24px);
                --subtitle-font-weight: var(--mush-title-font-weight, bold);
                color: var(--primary-text-color) !important;
                padding-left: 12px;
              }
              /* Set spacing around greeting */
              .header {
                --title-padding: 0px 12px 24px;
                --title-spacing: 8px;
              }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        secondary: House
        icon: mdi:home
        layout: vertical
        icon_color: blue
        tap_action:
          action: navigate
          navigation_path: house
        card_mod:
          style: |
            ha-card {
              /* Set size and spacing of button */
              width: 58px;
              --spacing: 8px;
              padding-bottom: calc(var(--spacing) * 1.618) !important;

              /* Styling of button */
              background: var(--card-background-color) !important;
              box-shadow: var(--ha-card-box-shadow) !important;
              border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

              /* Center button */
              margin-left: auto;
              margin-right: auto;
              transition: all 0s;
            }

            /* Add subtle color on hover */
            ha-card:hover {
              background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
            }
      - type: custom:mushroom-template-card
        primary: ""
        secondary: Lights
        icon: mdi:lightbulb
        icon_color: amber
        layout: vertical
        tap_action:
          action: navigate
          navigation_path: lights
        card_mod:
          style: |
            ha-card {
              /* Set size and spacing of button */
              width: 58px;
              --spacing: 8px;
              padding-bottom: calc(var(--spacing) * 1.618) !important;

              /* Styling of button */
              background: var(--card-background-color) !important;
              box-shadow: var(--ha-card-box-shadow) !important;
              border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

              /* Center button */
              margin-left: auto;
              margin-right: auto;
              transition: all 0s;
            }

            /* Add subtle color on hover */
            ha-card:hover {
              background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
            }
      - type: custom:mushroom-template-card
        secondary: Secure
        icon: mdi:shield
        icon_color: green
        layout: vertical
        tap_action:
          action: navigate
          navigation_path: security
        card_mod:
          style: |
            ha-card {
              /* Set size and spacing of button */
              width: 58px;
              --spacing: 8px;
              padding-bottom: calc(var(--spacing) * 1.618) !important;

              /* Styling of button */
              background: var(--card-background-color) !important;
              box-shadow: var(--ha-card-box-shadow) !important;
              border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

              /* Center button */
              margin-left: auto;
              margin-right: auto;
              transition: all 0s;
            }

            /* Add subtle color on hover */
            ha-card:hover {
              background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
            }
      - type: custom:mushroom-template-card
        secondary: Media
        icon: mdi:speaker
        layout: vertical
        icon_color: red
        tap_action:
          action: navigate
          navigation_path: media
        card_mod:
          style: |
            ha-card {
              /* Set size and spacing of button */
              width: 58px;
              --spacing: 8px;
              padding-bottom: calc(var(--spacing) * 1.618) !important;

              /* Styling of button */
              background: var(--card-background-color) !important;
              box-shadow: var(--ha-card-box-shadow) !important;
              border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

              /* Center button */
              margin-left: auto;
              margin-right: auto;
              transition: all 0s;
            }

            /* Add subtle color on hover */
            ha-card:hover {
              background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
            }
      - type: custom:mushroom-template-card
        secondary: Net
        icon: mdi:lan
        layout: vertical
        icon_color: cyan
        tap_action:
          action: navigate
          navigation_path: net
        card_mod:
          style: |
            ha-card {
              /* Set size and spacing of button */
              width: 58px;
              --spacing: 8px;
              padding-bottom: calc(var(--spacing) * 1.618) !important;

              /* Styling of button */
              background: var(--card-background-color) !important;
              box-shadow: var(--ha-card-box-shadow) !important;
              border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

              /* Center button */
              margin-left: auto;
              margin-right: auto;
              transition: all 0s;
            }
            /* Add subtle color on hover */
            ha-card:hover {
              background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
            }
card_mod:
  style: |
    ha-card {
      /* Set padding of card */
      padding: 8px 8px 12px;

      /* Move card up to match header card */
      margin-top: -20px;

      /* Styling of card background */
      background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color)) !important;
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);

      transition: all 0s;
    }

Has anyone figured the solution? I am also stuck with the sticky bar not working properly.

Also, for the weather I was able to get the icons I want and temp but it doesnā€™t show the conditions text line.

Any help is appreciated!

1 Like

Iā€™m able to put the sticky to work!
Confirm that all the card are in the same ā€œvertical cardā€ and you have mansonry active, not sections

when you say ā€œsame vertical cardā€ what exactly does that mean? Sorry Just started HA journey a week or so ago. This is where iā€™m at after changing to masonry.

He means this portion of your code

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

custom:stack-in-card is considered a vertical card

1 Like

You can only have one ā€œeditā€ optionā€¦ in your image you have twoā€¦ one before the person icon and other in the bottom, you only can have one in the bottom

1 Like

Thank you, I figured that portion out yesterday after posting but Iā€™m still having trouble getting the sticky to stay.

Share the code you haveā€¦ again only one card

Position of chip card is not working anymore. Please help to fix.

I read through part1+2 of the mushroom cards thread, but did not find a solution yet.
image
The icon of the mirror was used to be positioned on the left side (where the arrow points to), as it is a button for the light of the mirror. Additonal chips based on state of other devices will apprear on the right side. Unfortunately the positioning is not working anymore. I guess is has something to do with this snipped:

        card_mod:
          style: |
            ha-card {
              position: absolute;
              left: 0px;
            }

And here is all the code of my card:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Ellen
    secondary: >-
      {{ states('sensor.heizkoerperthermostat_ellen_actual_temperature') |
      round(1, default=20) }}Ā°C
    icon: mdi:handball
    entity: light.lichtschalter_ellen
    tap_action:
      action: navigate
      navigation_path: /ellens-dashboard/0
    double_tap_action:
      action: toggle
    icon_color: "{{ 'orange' if is_state('light.glichter_ellen', 'on') else 'disabled' }}"
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    badge_icon: >
      {% if is_state_attr('climate.heizkoerperthermostat_ellen', 'hvac_action',
      'heating') %}
        mdi:radiator
      {% elif is_state_attr('climate.heizkoerperthermostat_ellen',
      'hvac_action', 'cooling') %}
        mdi:snowflake
      {% else %} mdi:radiator-disabled {% endif %}
    badge_color: >
      {% if is_state_attr('climate.heizkoerperthermostat_ellen', 'hvac_action',
      'heating') %}
        red
      {% elif is_state_attr('climate.heizkoerperthermostat_ellen',
      'hvac_action', 'cooling') %}
        #03A9F4
      {% else %} {% endif %}
    card_mod:
      style: |
        ha-card([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        ha-card {
          background: rgba(var(--rgb-primary-text-color), 0.025);
          --icon-size: 76px;
          margin-top: -20px !important;
          margin-left: -18px !important;
          margin-bottom: -11px !important;
          --ha-card-border-width: 0;
        }
        mushroom-badge-icon {
          left: 138px;
          top: 40px;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: light.licht_schminktisch_smart_plug_switch
        icon_color: "{{ 'orange' if is_state(entity, 'on') else 'disabled' }}"
        icon: mdi:mirror-rectangle
        content_info: none
        card_mod:
          style: |
            ha-card {
              position: absolute;
              left: 0px;
            }
      - type: conditional
        conditions:
          - entity: binary_sensor.fensterkontakt_ellen_state
            state: "on"
        chip:
          type: template
          icon_color: disabled
          icon: mdi:window-open
      - type: conditional
        conditions:
          - entity: switch.klima_ellen_power
            state: "on"
        chip:
          type: template
          icon_color: disabled
          icon: mdi:air-conditioner
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-icon-size: 25px;
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          --chip-border-width: 0;
          margin-top:-10px;
        } 
card_mod:
  style: |
    ha-card {
      height: 102px;
      {% if is_state('light.glichter_ellen', 'on') %}
         background: rgba(255, 152, 0, 0.1);
      {% endif %}
    }

Any help is greatly appreciated!