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

hallo @rhysb I was working on your nice card, but the problem is that if I scroll through the page, it will go along nicely, but if I click on the bell, my chips card will become clear? what did I do wrong & I have the mushroom shadow theme on with dark on? thanks in advance!

here screenshots



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.light.lampen_nu) | selectattr('state', 'eq', 'on') | list | count)
                                   + (expand(states.group.ramen) | selectattr( 'state', 'eq', 'on') | list | count) 
                                   + (expand(states.group.deuren) | 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: entity
          entity: input_boolean.hide_header_mobile
          icon_color: blue
          icon: mdi:page-layout-header
          name: null
          content_info: none
          tap_action:
            action: toggle
        - type: entity
          entity: camera.kooi_noucky
          icon_color: blue
          name: 'Camera '
          content_info: name
          icon: phu:arlo-essential-indoor
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                style: '--popup-background-color: black;'
                content:
                  type: custom:stack-in-card
                  cards:
                    - type: custom:mushroom-template-card
                      primary: Camera
                      secondary: null
                      icon: phu:arlo-essential-indoor
                      icon_color: blue
                    - type: custom:layout-card
                      layout_type: masonry
                      layout:
                        width: 300
                        max_cols: 1
                        height: auto
                        padding: 0px
                        card_margin: var(--masonry-view-card-margin, 0px 8px 14px)
                      cards:
                        - show_state: false
                          show_name: false
                          camera_view: live
                          type: picture-entity
                          entity: camera.kooi_noucky
                          camera_image: camera.kooi_noucky
                          theme: Mushroom
                          card_mod:
                            style: |
                              ha-card {
                                background: none;
                                box-shadow: none;
                              }
        - type: conditional
          conditions:
            - entity: light.lampen_nu
              state: 'on'
          chip:
            type: template
            icon: mdi:lightbulb
            entity: light.lampen_nu
            content: >
              {{ expand(states.light.lampen_nu) | 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: light.lampen_nu
                          state: 'on'
                          options:
                            type: custom:mushroom-light-card
                            show_brightness_control: true
                            layout: horizontal
                            tap_action:
                              action: toggle
                            use_light_color: true
                        - entity_id: light.lampen_nu
                          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.ramen
              state: 'on'
          chip:
            type: template
            icon_color: blue
            icon: mdi:window-open
            entity: group.ramen
            content: >
              {{ expand(states.group.ramen) | selectattr('state', 'eq', 'on') |
              list | count }}
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Ramen Open
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: group.ramen
                          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.deuren
              state: 'on'
          chip:
            type: template
            entity: group.deuren
            content: >
              {{ expand(states.group.deuren) | 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: Deuren Open
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: group.deuren
                          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: entity
          entity: sensor.lights_on_lampen_nu
          icon: hue:bulb-group-sultan-lightstrip
        - type: entity
          entity: sensor.lights_off_lampen_nu
          use_entity_picture: false
          icon: hue:bulb-group-sultan-lightstrip-off
        - type: template
          content: |-
            {{ states('sensor.openweathermap_temperature') }} /
            {{ states('sensor.multi_sensor_tarras_temperature') }} Ā°C
          icon: |-
            {% if is_state('weather.openweathermap', 'sunny') %}
            mdi:weather-sunny
            {% elif is_state('weather.openweathermap', 'partlycloudy') %}
            mdi:weather-partly-cloudy
            {% elif is_state('weather.openweathermap', 'cloudy') %}
            mdi:weather-cloudy
            {% elif is_state('weather.openweathermap', 'rainy') %}
            mdi:weather-rainy
            {% elif is_state('weather.openweathermap', 'partly-rainy') %}
            mdi:weather-partly-rainy
            {% elif is_state('weather.openweathermap', 'pouring') %}
            mdi:weather-pouring
            {% elif is_state('weather.openweathermap', 'fog') %}
            mdi:weather-fog
            {% elif is_state('weather.openweathermap', 'hail') %}
            mdi:weather-hail
            {% elif is_state('weather.openweathermap', 'hazy') %}
            mdi:weather-hazy
            {% elif is_state('weather.openweathermap', 'lightning') %}
            mdi:weather-lightning
            {% elif is_state('weather.openweathermap', 'lightning-rainy') %}
            mdi:weather-lightning-rainy
            {% elif is_state('weather.openweathermap', 'partly-lightning') %}
            mdi:weather-partly-lightning
            {% elif is_state('weather.openweathermap', 'snowy') %}
            mdi:weather-snowy
            {% elif is_state('weather.openweathermap', 'snowy-heavy') %}
            mdi:weather-snowy-heavy
            {% elif is_state('weather.openweathermap', 'snowy-rainy') %}
            mdi:weather-snowy-rainy
            {% elif is_state('weather.openweathermap', 'partly-snowy') %}
            mdi:weather-partly-snowy
            {% elif is_state('weather.openweathermap', 'partly-snowy-rainy') %}
            mdi:weather-partly-snowy-rainy
            {% elif is_state('weather.openweathermap', 'clear-night') %}
            mdi:weather-night
            {% elif is_state('weather.openweathermap', 'night-partly-cloudy') %}
            mdi:weather-night-partly-cloudy
            {% endif %}
          icon_color: >-
            {% if is_state('weather.openweathermap', 'sunny') %} #FFF900  {%
            elif is_state('weather.openweathermap', 'partlycloudy') %} #B3B6B7
            {% elif is_state('weather.openweathermap', 'cloudy') %} #626567 {%
            elif is_state('weather.openweathermap', 'rainy') %} #5757BE {% elif
            is_state('weather.openweathermap', 'partly-rainy') %} #4E4DD8 {%
            elif is_state('weather.openweathermap', 'pouring') %} #2E9AFE {%
            elif is_state('weather.openweathermap', 'fog') %} #C0C0C0 {% elif
            is_state('weather.openweathermap', 'hail') %} white {% elif
            is_state('weather.openweathermap', 'hazy') %} grey {% elif
            is_state('weather.openweathermap', 'lightning') %} #D9D401 {% elif
            is_state('weather.openweathermap', 'lightning-rainy') %} #D9D401 {%
            elif is_state('weather.openweathermap', 'partly-lightning') %}
            #D9D401 {% elif is_state('weather.openweathermap', 'snowy') %}
            #FFFFFF {% elif is_state('weather.openweathermap', 'snowy-heavy') %}
            #FFFFFF {% elif is_state('weather.openweathermap', 'snowy-rainy') %}
            #FFFFFF {% elif is_state('weather.openweathermap', 'partly-snowy')
            %} #FFFFFF {% elif is_state('weather.openweathermap',
            'partly-snowy-rainy') %} #FFFFFF {% elif
            is_state('weather.openweathermap', 'clear-night') %} #FFF900 {% elif
            is_state('weather.openweathermap', 'night-partly-cloudy') %} #B3B6B7
            {% endif %}
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                style: '--popup-background-color: black;'
                content:
                  type: custom:weather-card
                  entity: weather.openweathermap
                  name: Weer
                  current: true
                  details: true
                  forecast: true
                  hourly_forecast: true
                  number_of_forecasts: 5
          card_mod:
            style:
              mushroom-template-chip:nth-child(1)$: |
                ha-icon {
                  {%- set sensor = states('weather.openweathermap') %}
                  {%- if sensor == 'sunny' %}
                    animation: sunny 8s ease-in-out infinite alternate;
                  {%- elif sensor == 'partly-cloudy' %}
                    animation: cloudy 10s ease-in-out infinite, sun 2s infinite;
                  {%- elif sensor == 'cloudy' %}
                    animation: cloudy 10s ease-in-out infinite;
                  {%- elif sensor == 'rainy' %}
                    animation: cloudy 10s ease-in-out infinite, rain 1.5s infinite;
                  {%- elif sensor == 'pouring' %}
                    animation: cloudy 10s ease-in-out infinite, pouring 1s infinite;
                  {%- elif sensor == 'fog' %}
                    animation: cloudy 10s ease-in-out infinite, fog 4s infinite; 
                  {%- elif sensor == 'hail' %}
                    animation: cloudy 10s ease-in-out infinite, hail 2s infinite; 
                  {%- elif sensor == 'lightning' %}
                    animation: cloudy 10s ease-in-out infinite, lightning 4s infinite; 
                  {%- elif sensor == 'snow' %}
                    animation: cloudy 10s ease-in-out infinite, snow 4s infinite; 
                  {%- elif sensor == 'clear-night' %}
                    animation: moon 10s linear infinite, stars 5s linear infinite;
                  {%- endif %}
                }
                @keyframes cloudy {
                  0%, 100% { transform: translateX(3px); }
                  30% { transform: translateX(-1px); }
                  45% { transform: translateX(1.5px); }
                  75% { transform: translateX(-3.2px); }
                }
                @keyframes sun {
                  50% { clip-path: polygon(0 67%, 18% 55%, 16% 31%, 41% 12%, 67% 24%, 77% 59%, 100% 64%, 100% 100%, 0 100%); }
                }
                @keyframes sunny {
                  70% { transform: rotate(360deg) scale(1); }
                  80% { transform: scale(1); }
                  90% { transform: scale(1.15); }
                  100% { transform: scale(1); }
                }
                @keyframes rain {
                  50% { clip-path: polygon(0 0, 100% 0, 100% 73%, 71% 73%, 50% 39%, 29% 73%, 0 73%); }
                }
                @keyframes pouring {
                  0%, 50%, 100% { clip-path: inset(0 0 0 0); }
                  25% { clip-path: polygon(0 0, 100% 0, 100% 83%, 54% 83%, 62% 47%, 47% 46%, 38% 83%, 0 83%); }
                  75%  { clip-path: polygon(0 0, 100% 0, 100% 70%, 75% 70%, 80% 48%, 63% 48%, 54% 94%, 32% 94%, 46% 46%, 30% 46%, 23% 72%, 0 72%); }
                }
                @keyframes fog {
                  0%, 26%, 76%, 100% { clip-path: inset(0 0 0 0); }
                  25% { clip-path: polygon(0 0, 100% 0, 100% 59%, 60% 59%, 60% 74%, 100% 74%, 100% 100%, 0 100%); }
                  75%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 26% 100%, 26% 76%, 0 76%); }
                }
                @keyframes hail {
                  0%, 26%, 51%, 76%, 100% { clip-path: inset(0 0 0 0); }
                  25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 47% 69%, 56% 55%, 43% 43%, 31% 58%, 48% 68%, 63% 100%, 0 100%); }
                  50%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 61% 86%, 74% 74%, 61% 60%, 46% 69%, 60% 87%, 63% 100%, 0 100%); }
                  75%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 47% 100%, 56% 83%, 42% 68%, 27% 81%, 37% 100%, 0 100%); }
                }
                @keyframes lightning {
                  10%, 15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 47% 100%, 69% 55%, 66% 40%, 48% 39%, 24% 100%, 0 100%); transform: scale(1.1); }
                  10.1%, 15.1% { clip-path: inset(0 0 0 0); transform: scale(1); }
                }
                @keyframes snow {
                  50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 65% 100%, 76% 73%, 57% 49%, 34% 56%, 26% 79%, 37% 100%, 0 100%); }
                  51% { clip-path: inset(0 0 0 0); }
                }
                @keyframes moon {
                  0%, 100% { transform: rotate(12deg); }
                  30% { transform: rotate(-6deg); }
                  45% { transform: rotate(8deg); }
                  75% { transform: rotate(-10deg); }
                }
                @keyframes stars {
                  0%, 3.1%, 14.1% { clip-path: inset(0 0 0 0); }
                  3% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 99% 62%, 68% 62%, 62% 44%, 76% 34%, 100% 34%, 99% 0%); }
                  14% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 100% 25%, 51% 45%, 38% 34%, 36% 0); }
                }
        - type: entity
          entity: binary_sensor.meteoalarm
          use_entity_picture: false
        - type: entity
          entity: sensor.multi_sensor_slaapkamer_jarne_temperature
        - type: entity
          entity: sensor.multi_sensor_tarras_temperature
        - type: entity
          entity: sensor.deur_open
          icon: mdi:door-open
          use_entity_picture: false
        - type: entity
          entity: sensor.deur_gesloten
          icon: mdi:door-closed-lock
          use_entity_picture: false
        - type: entity
          entity: sensor.raam_open
          icon: mdi:window-open-variant
        - type: entity
          entity: sensor.raam_gesloten
          icon: mdi:window-closed-variant
        - type: entity
          entity: sensor.covers_open
          icon: mdi:window-shutter-open
        - type: entity
          entity: sensor.covers_closed
          icon: mdi:window-shutter
        - type: entity
          entity: media_player.spotify_jarne_roussard
        - type: entity
          entity: calendar.onze_agenda
          tap_action:
            action: navigate
            navigation_path: agenda
        - type: entity
          entity: switch.rituals_parfum
          icon: phu:rituals
          icon_color: blue
          tap_action:
            action: navigate
            navigation_path: rituals-parfum
        - type: entity
          entity: sensor.jupiler_pro_league
          icon: mdi:soccer
          icon_color: blue
          tap_action:
            action: navigate
            navigation_path: voetbal
        - type: entity
          entity: switch.stopcontact_printer_living
          icon: mdi:printer
          icon_color: blue
          tap_action:
            action: toggle
    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;
        }
        - type: entity
          entity: binary_sensor.update
          icon: mdi:update
          icon_color: blue
          tap_action:
            action: navigate
            navigation_path: update
        - type: entity
          entity: sensor.plex_server_jarne
          icon: mdi:plex
          icon_color: blue
          tap_action:
            action: navigate
            navigation_path: plex
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: var(--header-height);
    }
    /* Pseudo element to hide card styling when at top */
    ha-card:after {
      content: "";

      /* Make fixed so element scrolls up */
      position: fixed;
      top: var(--header-height);

      /* 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));
    }
2 Likes

Hereā€™s a different take on the slider card.

Mushroom Light Slider Card

Mushroom Light Slider

type: custom:mushroom-light-card
entity: light.office_light
show_brightness_control: true
tap_action:
  action: toggle
use_light_color: true
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape:active {
        transform: scale(1.2);
      }
    .: |
      mushroom-light-brightness-control {      
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        opacity: 0.3;
        --control-height: 66px;
        --control-border-radius: var(--ha-card-border-radius, 12px);
        --rgb-disabled: var(--rgb-card-background-color);
      }
      mushroom-state-item {
        z-index: 1;
        max-width: fit-content;
        margin-bottom: 0px;
        pointer-events: none;
      }
      mushroom-shape-icon {
        pointer-events: auto;
      }

Works Ok with RGB lights too :grin:.

23 Likes

No, this sort of thing:

    card-mod-card: |
        .type-custom-mushroom-template-card:active {
            transform: scale(0.975);
            transition: all 0s;
        }

Hello, is it possible to have more badges on a template card?

Hey David, how about this?

Mushroom Climate Status

Mushroom Climate Status

type: custom:mushroom-template-card
secondary: '{{ states(config.entity) | replace(''_only'', '''') | replace(''_'', ''/'') | title }}'
icon: none
entity: climate.office_air_conditioner
layout: vertical
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape:after {
        content: "{{ state_attr(config.entity, 'current_temperature') | round(0) }}Ā°";
        position: absolute;
        font-size: var(--card-primary-font-size);
        font-weight: bolder;
      }
      .shape {
        box-shadow: var(--ha-card-box-shadow) !important;
      }
    .: |
      ha-card {
        --ha-card-background: none;
        box-shadow: none;
        --ha-card-border-width: 0;
      }
      mushroom-shape-icon {
        --shape-color: white !important;
      }
3 Likes

Yes, why not?

Mushroom Multi-Badges

Mushroom Multi-Badge

type: custom:mushroom-template-card
primary: Mushrooms
icon: mdi:mushroom
icon_color: red
badge_icon: mdi:bug
badge_color: green
card_mod:
  style: |
    mushroom-badge-icon:after {
        content: "bug_report";

        font-size: 0.9em;
        font-family: 'Material Icons';
        
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 32px;

        color: var(--icon-color);
        background: var(--main-color);

        width: var(--mush-badge-size, 16px);
        height: var(--mush-badge-size, 16px);
        border-radius: var(--mush-badge-border-radius, 50%);
      }

    mushroom-badge-icon:before {
        content: "bug_report";

        font-size: 0.9em;
        font-family: 'Material Icons';
        
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        right: 32px;

        color: var(--icon-color);
        background: var(--main-color);

        width: var(--mush-badge-size, 16px);
        height: var(--mush-badge-size, 16px);
        border-radius: var(--mush-badge-border-radius, 50%);
      }

The additional badges only support a limited set of Material Icons.

To use the Material Icons font you will need to add https://fonts.googleapis.com/icon?family=Material+Icons as a Stylesheet Resource.

16 Likes

@rhysb Very nice! - Is there a way to make the 100% on slider effect appear for lights which do not have brightness control ? (eg. bulbs which are just switched on/off)
Just been playing around with the card and it currently looks a bit inconsistent as bulbs with no brightness control just show the icon lit up.

1 Like

Itā€™s just using the existing Mushroom Slider, so for those types of lights it wonā€™t exist. You could add a suitable background color to match.

type: custom:mushroom-light-card
entity: light.office_light
tap_action:
  action: toggle
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape:active {
        transform: scale(1.2);
      }
    .: |
      mushroom-state-item {
        pointer-events: none;
      }
      mushroom-shape-icon {
        pointer-events: auto;
      }
      ha-card {
        {{ '--ha-card-background: rgba(var(--rgb-state-light), 0.3);' if is_state(config.entity, 'on') }}
      }
2 Likes

Change top: var(--header-height); to top: 0px; for starters.

Yeah unfortunately it is. That is actually a very good workaround! Do you mind sharing the code for your card?

As alwaysā€¦ legend! - Thank you

1 Like

Cute Popups can be done like this:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: alarm_control_panel.home_alarm
    content_info: none
    use_entity_picture: true
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: Alarm
          content:
            type: vertical-stack
            cards:
              - type: tile
                entity: alarm_control_panel.home_alarm
                features:
                  - type: alarm-modes
                    modes:
                      - armed_away
                      - disarmed
          card_mod:
            style:
              ha-header-bar$: |
                .mdc-top-app-bar__section {
                  padding: 0px !important;
                }
                .mdc-top-app-bar__title {
                  --mdc-typography-headline6-font-size: 18px;
                  padding-left: 8px !important;
                }
                .mdc-top-app-bar__row {
                  height: var(--mdc-icon-button-size, 36px) !important;
                }
                .mdc-top-app-bar {
                  padding: 8px;
                }
              .: |
                ha-icon-button {
                  position: absolute !important;
                  right: 0px;
                  background: color-mix(in srgb, var(--grey-color) 20%, transparent);
                  border-radius: 50%;
                  border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
                }
                :host {
                  --popup-min-width: 450px;
                  --mdc-icon-button-size: 36px;
                }
10 Likes

It can sort of be done like this.

Mushroom Info Material Icons

Mushroom Info Icons

type: custom:mushroom-template-card
primary: Mushroom
secondary: '{{ states(''sensor.rhys_office_sensor_temperature'') | round(0) }}Ā°C'
icon: mdi:mushroom
icon_color: red
card_mod:
  style:
    mushroom-state-info$: |
      .primary:after {
        content: " local_florist";
        font-family: 'Material Icons';
        vertical-align: bottom;
      }
      .secondary:before {
        content: "thermostat";
        font-family: 'Material Icons';
        vertical-align: bottom;
      }

Only a limited set of Material Icons are supported.

To use the Material Icons font you will need to add https://fonts.googleapis.com/icon?family=Material+Icons as a Stylesheet Resource.

4 Likes

Sure, i picked it out of my grid, so itā€™s ā€œstand aloneā€, you might ā€œajust itā€ to your View/Card, bt as you see there are ā€œsome variablesā€ to play around with :slight_smile:
mush-templ mush-template

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: sensor.asusr_connected_devices
    primary: 2.4 GHz
    secondary: " On - {{
          state_attr('sensor.asusr_connected_devices','devices')|selectattr('connection_type','==','2.4
          GHz')|selectattr('guest', '==', false) |list|count }}"
    multiline_secondary: true
    icon_type: icon
    layout: horizontal
    icon: mdi:wifi
    icon_color: |
      {% set state = states('sensor.asusr_connected_devices')|float(-1) %}

      {% if state >= 21 %} #FFBF00

      {% elif state >= 19 %} orange

      {% elif state >= 18 %} red

      {% else %} #00FFFF

      {% endif %}
    card_mod:
      style: |
        ha-card {
          margin-top: 8px;
          margin-left: 0px;
          padding-top: 0px !important;
          border-radius: 15px;
        }
card_mod:
  style: |
    ha-card {
      height: 50px !important;
      width: 120px !important;
      --mush-card-primary-font-size: 12px;
      --mush-card-secondary-font-size: 12px;
      --secondary-text-color: #FFBF00;
      --primary-text-color: #87bf50;
      margin: 0 auto;
      padding-top: 0px !important;
      padding-bottom: 20px !important;
      border-radius: 15px;
    }
    :host {
      --mush-icon-size: 32px;
      --mush-icon-symbol-size: 24px;
      --mush-card-primary-font-weight: lighter;
      --mush-card-secondary-font-weight: lighter;
    }

Edit: if you donā€™t want the colored-circle behind the icon, you just set the ā€œmush-icon-size:ā€ to 0px
Edit2: and you really dont need the ā€œfirstā€ entity: ā€¦ i just have it as ā€œadditionalā€ so i have easy access to ā€œmore-infoā€ of that ā€œentityā€

Edit3: :grinning_face_with_smiling_eyes: Maybe @rhysb have the ā€œtrickā€ to make the ā€œwhitespaceā€ smaller between Icon and ā€œstate-infoā€ and between primary | secondary ā€¦ i have tried 50options :slight_smile: , but seems like Mushroom-template are different from others here also, canā€™t use row-height or margins/position to squeeze it together, it seems , iā€™ve tried on state-item and .container etc., nothing seems to ā€œstickā€

EDIT: just remembered i had line-height, on another View/card ā€¦ under the last ha-cardā€¦ looked already better
ā€“mush-card-primary-line-height: 12px;
ā€“mush-card-secondary-line-height: 12px;

2 Likes

No, I do not ā€¦ but I would like to add it :slight_smile: I will check if this can be added directly to the theme itself avoiding card-mod :thinking:

For the record, hereā€™s how to do it:

{{ state_attr(entity,  'icon') }}

example:

- type: custom:mushroom-chips-card
  chips:
      - type: template
        entity: sensor.phone_battery_level
        icon_color: |-
          {% set battery_level = states(config.entity) | int %}
          {% if battery_level == 'unknown' %} disabled
          {% elif battery_level >= 80 %} 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 %}
        icon: >-
          {{ state_attr(config.entity,  'icon') }}
        content: >-
          {{ states(config.entity) }}{{ state_attr(config.entity, 'unit_of_measurement') }}

image
image

2 Likes

Iā€™m trying to recreate your room card using this mushroom-light-card. Can you tell me how to change the secondary information?

This is brilliant and Iā€™ve got it working on itā€™s own but Iā€™m having great difficulty trying to get this and the mushroom welcome card that you created working together, just canā€™t get the yaml formatted correctly for some reasonā€¦

Edit: Got it! Once I actually copied the code into a proper editor it was much easier to sort out.

Just a few question moving on from that, where you have the state of the person for example it should show ā€œHomeā€ inside my home zone, I get it appearing as ā€œhomeā€ without a capital and also when Iā€™m away it shows as ā€œnot_homeā€ can I make it show as ā€œAwayā€ instead?

1 Like

Hi, Iā€™m a great fan of this thread and the mushroom cards. Big kudos to all of you! I got lotā€™s of inspiration for my dashboard. Now I need to ask for some help, as I can not figure out what the problem is. I have some chip cards with icons on my room card and like to change the color depending on the status.
Living room ON (all lights) - everything looks fine (orange):
image

Living room ON (except floor lamp) - the floor lamp icon is white, but should be gray:
image

Living room OFF - the floor lamp icon is white, but should be gray:
image

The gray color works with all icons that are aligned automatically, as you can see on the ā€œArbeitszimmerā€ room. However it seems, that the card_mod is somehow interfering with the icon_color. I can also put ā€˜greenā€™ in the statement and it wonā€™t work as well. If you need the whole room card code, let me know and I will gladly post it as well. Attached is only the part used for the chips cards.

- type: custom:mushroom-chips-card
    chips:
      - type: light
        entity: light.gwohnzimmer_licht_ambiente
        icon: mdi:floor-lamp
        icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
        content_info: none
        card_mod:
          style: |
            ha-card {
              position: absolute;
              left: 0px;
            }
      - type: conditional
        conditions:
          - entity: binary_sensor.fensterkontakt_wohnzimmer_state
            state: 'on'
        chip:
          type: template
          icon_color: disabled
          icon: mdi:window-open
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: binary_sensor.bewegungssensor_wohnzimmer_iaszone
            state: 'on'
        chip:
          type: template
          icon_color: disabled
          icon: mdi:motion-sensor
          tap_action:
            action: none
          hold_action:
            action: none
    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;
        }

Love it! Gonna try and make this work with the other stuff now too.

1 Like