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

Thank you very much friend!!! This solution works!

1 Like

Happy to assist!!

Hello,

i have the following issue since the last update for my room card:
Bildschirmfoto 2024-03-22 um 11.19.23

The chips are not alligned in the middle anymore. Can anyone help to fix this?

Code
type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Wohnzimmer
    secondary: >-
      šŸŒ”ļø {{ states('sensor.wohnzimmer_raumthermostat_temperature') | round(1)
      }} Ā°C
    icon: mdi:sofa
    entity: light.wohnzimmer
    tap_action:
      action: navigate
      navigation_path: wohnzimmer
    hold_action:
      action: toggle
    icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          background: rgba(var(--rgb-primary-text-color), 0.025);
          --mush-icon-size: 76px;
          height: 66px;
          margin-left: -18px !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: climate.wohnzimmer_thermostat
            state_not: 'off'
        chip:
          type: template
          entity: climate.wohnzimmer_thermostat
          icon: |-
            {% if is_state(entity, 'heat') %}
              mdi:fire
            {% endif %} 
          icon_color: red
      - type: conditional
        conditions:
          - entity: binary_sensor.wohnzimmer_balkontur
            state: 'on'
        chip:
          type: template
          icon_color: amber
          icon: mdi:door-open
          entity: binary_sensor.wohnzimmer_balkontur
          tap_action:
            action: more-info
      - type: light
        entity: light.wohnzimmer
        content_info: none
        use_light_color: true
        icon: mdi:lightbulb
        tap_action:
          action: toggle
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
        } 
card_mod:
  style: |
    ha-card {
      height: 102px;
      {% if is_state('light.wohnzimmer', 'on') %}
         background: rgba(255, 152, 0, 0.1);
      {% endif %}
    }

if you mean centered like this

image

then change alignment:end to alignment:center

sorry i mean the vertical alignment

Good morning everyone,

I created a card with a TV status icon. I only need the icon to understand if the TV is on or off but not to turn it on and off.

I would like to use the monitor animation, which is this:

but using the TV icon.

Iā€™m not good with code. Iā€™m trying but I canā€™t.

Can anyone help me!?

I attach my code.

type: custom:button-card
name: SOGGIORNO
icon: mdi:sofa
show_state: false
show_label: true
label: |
  [[[
    return Math.round(states['sensor.weather_station_temperature'].state) + "Ā°C" + "&nbsp&nbsp" + Math.round(states['sensor.weather_station_humidity'].state) + " %";
  ]]]
tap_action:
  action: navigate
  navigation_path: '#soggiorno'
custom_fields:
  btn1:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          tap_action:
            action: none
          entity: media_player.tv_samsung_58
          icon: mdi:television
      card_mod:
        style:
          mushroom-template-chip:nth-child(1)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{ 'rgba(199, 239, 207, 0.8)' if is_state('media_player.tv_samsung_58', 'on') else 'rgba(199, 239, 207, 0.3)' }};
                animation: {{ 'ping 2s ease-out infinite' if is_state('media_player.tv_samsung_58', 'on') }};
                padding: 5px !important;
                border-radius: 100px !important;
               justify-content: center;
                --chip-icon-size: 30px;
                --chip-height: 40px;
                width: var(--chip-height) !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(199, 239, 207, 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(199, 239, 207, 0);
                }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
            .: |
              ha-icon {
                {{ 'animation: refresh 300ms linear infinite;' if is_state('media_player.tv_samsung_58', 'on') }}
              }
              @keyframes refresh { 
                0% { background: linear-gradient(180deg, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 0%, transparent 50%, transparent 100%); }
                25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 25%, transparent 100%); }
                50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 50%, transparent 100%); }
                75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 75%, transparent 100%); }
                100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 100%); }
              }
styles:
  grid:
    - grid-template-areas: '"n btn btn1" "l btn btn1" "i btn btn1"'
    - grid-template-columns: 1fr min-content min-content
    - grid-template-rows: min-content min-content 1fr
  img_cell:
    - justify-content: center
    - position: absolute
    - width: 80px
    - height: 80px
    - left: 0
    - bottom: 0
    - margin: 0 0 -25px -25px
    - background: '#FFF'
    - border-radius: 200px
  icon:
    - width: 35px
    - color: black
    - opacity: '0.6'
    - margin: 0 0 18px 15px
  card:
    - padding: 10px 20px 10px 10px

Using this in the new sections layout ā€¦ Iā€™m trying many things to get the alignment correctly ā€¦ but unfortunately I donā€™t succeed :slight_smile:
Anyone has an idea what could be wrong in the code?

Code
type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:stack-in-card
    card_mod:
      style: |
        ha-card {
          border: none !important;
          --ha-card-border-width: 0;
        }
    cards:
      - type: custom:mushroom-template-card
        primary: Woonkamer
        secondary: 'ā€Ž '
        icon: mdi:sofa
        tap_action:
          action: navigate
          navigation_path: null
        icon_color: blue
        multiline_secondary: true
        card_mod:
          style: |
            ha-card {
              --ha-card-background: none;
              --ha-card-box-shadow: none;
              --ha-card-border-width: 0;
              z-index: 1;
            }
            :host {
              --mush-icon-border-radius: 12px;
            }
      - type: custom:mini-graph-card
        entities:
          - entity: climate.living
            attribute: current_temperature
            name: null
        hours_to_show: 24
        line_width: 3
        font_size: 50
        animate: true
        show:
          name: false
          icon: false
          state: false
          legend: false
          fill: fade
        color: orange
        card_mod:
          style: |
            ha-card {
              position: absolute !important;
              height: 100%;
              width: 100%;
              top: 0px;
              --ha-card-border-width: 0;
            }
            ha-card:after {
              content: "";
              position: absolute;
              width: 100%;
              height: 100%;
              background: linear-gradient(to right, var(--card-background-color) 25%, transparent);
            }
  - type: custom:stack-in-card
    mode: horizontal
    card_mod:
      style: |
        ha-card {
          border: none !important;
          --ha-card-border-width: 0;
          margin-left: -10px;
          margin-right: 0px; 
        }
    cards:
      - type: custom:mushroom-climate-card
        entity: climate.living
        icon: none
        show_temperature_control: false
        primary_info: none
        secondary_info: none
        layout: horizontal
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape:after {
                content: "{{ state_attr(config.entity, 'current_temperature')|replace('.', ',') }}Ā°";
                font-size: 12px;
                font-weight: bolder;
                color: white;
                position: absolute;
              }
              .shape {
                {% set mode = state_attr(config.entity, 'hvac_action') %}
                --shape-color: rgba(var(--rgb-
                {%- if mode == 'heating' -%}
                  orange
                {%- elif mode == 'cooling' -%}
                  blue
                {%- else -%}
                  grey
                {% endif %}));
              }
            mushroom-badge-icon$: |
              .badge {
                {{ 'display: none !important;' if state_attr(config.entity, 'hvac_action') == 'idle' }}
              }
            .: |
              mushroom-badge-icon:after {
                content: "{{ states('sensor.alpha2_heat_control_ezr012b5_glv_1_valve_opening') }}";
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgb(var(--rgb-green));
                color: rgb(var(--rgb-white));
                border-radius: 50%;
                border-width: 0;
                top: 0px;
                width: 100%;
                height: 100%;
                font-size: 0.6em; 
              }
              mushroom-shape-icon {
                --icon-size: 34px;
                position: relative;
                top: 4px;
              ha-card {
                border: none !important;
              }
      - type: custom:mushroom-template-card
        primary: null
        icon: mdi:lightbulb
        icon_color: >-
          {%if is_state('sensor.lichten_aan_woonkamer', '0') %} grey {% else %}
          amber {% endif %}      
        entity: light.all_lights
        badge_icon: none
        badge_color: transparent
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Lichten
              style: |
                --popup-border-radius: 12px;
              content:
                type: custom:auto-entities
                filter:
                  include:
                    - area: Woonkamer
                      domain: light
                      options:
                        type: custom:mushroom-light-card
                        show_brightness_control: true
                        layout: horizontal
                        tap_action:
                          action: toggle
                        use_light_color: true
                        card_mod:
                          style: |
                            ha-card {
                              padding: 4px 12px !important;
                              --ha-card-border-width: 0;
                            }
                  exclude:
                    - domain: light
                      attributes:
                        device_class: DNDMode
                card:
                  type: custom:layout-card
                  layout:
                    margin: 0px 10px 10px 10px
                    border-radius: 12px
                  cards: []
                  layout_type: masonry
                  sort:
                    method: friendly_name
          target: {}
        card_mod:
          style: |
            mushroom-badge-icon:after {
              content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' ,'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | rejectattr ('attributes.device_class','eq','DNDMode') | list | count }}";         
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              background: rgb(var(--rgb-orange));
              color: var(--card-background-color);
              border-radius: 50%;
              top: 0px;
              width: 100%;
              height: 100%;
              font-size: 0.7em; 
            }
            mushroom-shape-icon {
                --icon-size: 34px;
                position: relative;
                top: 4px;
            ha-card {
              --ha-card-border-width: 0;  
              margin-left: -10px;
              margin-right: 0px; 
            }
      - type: custom:mushroom-template-card
        primary: null
        icon: mdi:window-shutter-open
        icon_color: >-
          {%if  expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
          'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list |
          count > 0 %} blue {% else %} grey {% endif %}
        entity: cover.alle_rolluiken
        badge_icon: none
        badge_color: transparent
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Rolluiken
              style: |
                --popup-border-radius: 12px
              content:
                type: custom:auto-entities
                filter:
                  include:
                    - area: Woonkamer
                      domain: cover
                      options:
                        type: custom:mushroom-cover-card
                        show_buttons_control: true
                        layout: horizontal
                        card_mod:
                          style: |
                            ha-card {
                              padding: 4px 12px !important;
                              --ha-card-border-width: 0;
                            }
                  exclude:
                    - domain: cover
                      attributes:
                        types: browser_mod
                card:
                  type: custom:layout-card
                  layout:
                    margin: 0px 10px 10px 10px
                    border-radius: 12px
                  cards: []
                  layout_type: masonry
                  sort:
                    method: friendly_name
        card_mod:
          style: |
            mushroom-badge-icon:after {
              content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list | count}}";         
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              background: rgb(var(--rgb-orange));
              color: var(--card-background-color);
              border-radius: 50%;
              top: 0px;
              width: 100%;
              height: 100%;
              font-size: 0.7em; 
            }
            mushroom-shape-icon {
              --icon-size: 34px;
              position: relative;
              top: 4px;
            ha-card {
              --ha-card-border-width: 0;  
              margin-left: -10px;
              margin-right: 0px; 
            }
      - type: custom:mushroom-template-card
        primary: null
        icon: mdi:window-shutter
        icon_color: >-
          {%if  expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
          'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'closed' ) | list |
          count > 0 %} blue {% else %} grey {% endif %}
        entity: cover.alle_rolluiken
        badge_icon: none
        badge_color: transparent
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Rolluiken
              style: |
                --popup-border-radius: 12px
              content:
                type: custom:auto-entities
                filter:
                  include:
                    - area: Woonkamer
                      domain: cover
                      options:
                        type: custom:mushroom-cover-card
                        show_buttons_control: true
                        layout: horizontal
                        card_mod:
                          style: |
                            ha-card {
                              padding: 4px 12px !important;
                              --ha-card-border-width: 0;
                            }
                  exclude:
                    - domain: cover
                      attributes:
                        types: browser_mod
                card:
                  type: custom:layout-card
                  layout:
                    margin: 0px 10px 10px 10px
                    border-radius: 12px
                  cards: []
                  layout_type: masonry
                  sort:
                    method: friendly_name
        card_mod:
          style: |
            mushroom-badge-icon:after {
              content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'closed' ) | list | count}}";         
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              background: rgb(var(--rgb-orange));
              color: var(--card-background-color);
              border-radius: 50%;
              top: 0px;
              width: 100%;
              height: 100%;
              font-size: 0.7em; 
            }
            mushroom-shape-icon {
              --icon-size: 34px;
              position: relative;
              top: 4px;
            ha-card {
              --ha-card-border-width: 0; 
              margin-left: -10px;
              margin-right: 0px;
            }

1 Like

Had this same issue as well. Try adding margin-bottom and change -XXpx to adjust the height. See example below.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Wohnzimmer
    secondary: >-
      šŸŒ”ļø {{ states('sensor.wohnzimmer_raumthermostat_temperature') | round(1)
      }} Ā°C
    icon: mdi:sofa
    entity: light.wohnzimmer
    tap_action:
      action: navigate
      navigation_path: wohnzimmer
    hold_action:
      action: toggle
    icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          background: rgba(var(--rgb-primary-text-color), 0.025);
          --mush-icon-size: 76px;
          height: 66px;
          margin-left: -18px !important;
          margin-bottom: -XXpx !important; <---------- Add this to change the height
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: climate.wohnzimmer_thermostat
            state_not: 'off'
        chip:
          type: template
          entity: climate.wohnzimmer_thermostat
          icon: |-
            {% if is_state(entity, 'heat') %}
              mdi:fire
            {% endif %} 
          icon_color: red
      - type: conditional
        conditions:
          - entity: binary_sensor.wohnzimmer_balkontur
            state: 'on'
        chip:
          type: template
          icon_color: amber
          icon: mdi:door-open
          entity: binary_sensor.wohnzimmer_balkontur
          tap_action:
            action: more-info
      - type: light
        entity: light.wohnzimmer
        content_info: none
        use_light_color: true
        icon: mdi:lightbulb
        tap_action:
          action: toggle
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
        } 
card_mod:
  style: |
    ha-card {
      height: 102px;
      {% if is_state('light.wohnzimmer', 'on') %}
         background: rgba(255, 152, 0, 0.1);
      {% endif %}
    }
1 Like

possibly width: var(--chip-height) !important;

Remove it temporarily and see what changes///

Sorry, its not clear what the issue is?

The animation is working based off the state of the TV and the tap action on the TV icon is disable.

chrome-capture-2024-3-23

Many thanks for your reply.
Do you mean removing it from the code (but that line isnā€™t used)?
Or do you mean I should add it? :slight_smile:

Sections is limited by total width and you are trying to fit too many entities into one row. Iā€™d recommend three and then start a second row.

1 Like

4 in a row will work

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    margin: 0px 0px 0px 0px
    layout:
      grid-template-columns: 1fr 1fr 1fr 1fr
    cards:
      - type: custom:mushroom-template-card
        primary: Woonkamer
        layout: vertical
        icon: mdi:sofa
        tap_action:
          action: navigate
          navigation_path: null
        icon_color: blue
        multiline_secondary: true
        card_mod:
          style: |
            ha-card {
              --ha-card-background: none;
              --ha-card-box-shadow: none;
              --ha-card-border-width: 0;
              z-index: 1;
            }
            :host {
              --mush-icon-border-radius: 12px;
            }
      - type: custom:mushroom-climate-card
        entity: climate.living
        icon: none
        show_temperature_control: false
        primary_info: none
        secondary_info: none
        layout: horizontal
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape:after {
                content: "{{ state_attr(config.entity, 'current_temperature')|replace('.', ',') }}Ā°";
                font-size: 12px;
                font-weight: bolder;
                color: white;
                position: absolute;
              }
              .shape {
                {% set mode = state_attr(config.entity, 'hvac_action') %}
                --shape-color: rgba(var(--rgb-
                {%- if mode == 'heating' -%}
                  orange
                {%- elif mode == 'cooling' -%}
                  blue
                {%- else -%}
                  grey
                {% endif %}));
              }
            mushroom-badge-icon$: |
              .badge {
                {{ 'display: none !important;' if state_attr(config.entity, 'hvac_action') == 'idle' }}
              }
            .: |
              mushroom-badge-icon:after {
                content: "{{ states(sensor.alpha2_heat_control_ezr012b5_glv_1_valve_opening') }}";
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgb(var(--rgb-green));
                color: rgb(var(--rgb-white));
                border-radius: 50%;
                border-width: 0;
                top: 0px;
                width: 100%;
                height: 100%;
                font-size: 0.6em; 
              }
              mushroom-shape-icon {
                --icon-size: 34px;
                position: relative;
                top: 4px;
                 }
              ha-card {
               border: none;
                }
               
               
      - type: custom:mushroom-template-card
        icon: mdi:lightbulb
        icon_color: >-
          {%if is_state('sensor.lichten_aan_woonkamer', '0') %} grey {% else %}
          amber {% endif %}      
        entity: light.all_lights
        badge_icon: none
        badge_color: transparent
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Lichten
              style: |
                --popup-border-radius: 12px;
              content:
                type: custom:auto-entities
                filter:
                  include:
                    - area: Woonkamer
                      domain: light
                      options:
                        type: custom:mushroom-light-card
                        show_brightness_control: true
                        layout: horizontal
                        tap_action:
                          action: toggle
                        use_light_color: true
                  exclude:
                    - domain: light
                      attributes:
                        device_class: DNDMode
                card:
                  type: custom:layout-card
                  layout:
                    border-radius: 12px
                  cards: []
                  layout_type: masonry
                  sort:
                    method: friendly_name
          target: {}
        card_mod:
          style: |
            mushroom-badge-icon:after {
              content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' ,'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | rejectattr ('attributes.device_class','eq','DNDMode') | list | count }}";         
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              background: red
              color: var(--card-background-color);
              border-radius: 50%;
              top: 0px;
              width: 100%;
              height: 100%;
              font-size: 0.7em; 
            }
            mushroom-shape-icon {
                --icon-size: 34px;
                position: relative;
                top: 4px;
                }
            ha-card {
               border: none;
                }
      - type: custom:mushroom-template-card
        icon: mdi:window-shutter-open
        icon_color: >-
          {%if  expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
          'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list |
          count > 0 %} blue {% else %} grey {% endif %}
        entity: cover.alle_rolluiken
        badge_icon: none
        badge_color: transparent
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Rolluiken
              style: |
                --popup-border-radius: 12px
              content:
                type: custom:auto-entities
                filter:
                  include:
                    - area: Woonkamer
                      domain: cover
                      options:
                        type: custom:mushroom-cover-card
                        show_buttons_control: true
                        layout: horizontal
                        card_mod:
                          style: |
                            ha-card {
                              padding: 4px 12px !important;
                              --ha-card-border-width: 0;
                            }
                  exclude:
                    - domain: cover
                      attributes:
                        types: browser_mod
                card:
                  type: custom:layout-card
                  layout:
                    margin: 0px 10px 10px 10px
                    border-radius: 12px
                  cards: []
                  layout_type: masonry
                  sort:
                    method: friendly_name
        card_mod:
          style: |
            mushroom-badge-icon:after {
              content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list | count}}";         
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              background: rgb(var(--rgb-orange));
              color: var(--card-background-color);
              border-radius: 50%;
              top: 0px;
              width: 100%;
              height: 100%;
              font-size: 0.7em; 
            }
            mushroom-shape-icon {
              --icon-size: 35px;
              position: relative;
              top: 4px;
              }
            ha-card {
             border: none;
             }
      - type: custom:mushroom-template-card
        icon: mdi:window-shutter
        icon_color: >-
          {%if  expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
          'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'closed' ) | list |
          count > 0 %} blue {% else %} grey {% endif %}
        entity: cover.alle_rolluiken
        badge_icon: none
        badge_color: transparent
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Rolluiken
              style: |
                --popup-border-radius: 12px
              content:
                type: custom:auto-entities
                filter:
                  include:
                    - area: Woonkamer
                      domain: cover
                      options:
                        type: custom:mushroom-cover-card
                        show_buttons_control: true
                        layout: horizontal
                        card_mod:
                          style: |
                            ha-card {
                              padding: 4px 12px !important;
                              --ha-card-border-width: 0;
                            }
                  exclude:
                    - domain: cover
                      attributes:
                        types: browser_mod
                card:
                  type: custom:layout-card
                  layout:
                    margin: 0px 10px 10px 10px
                    border-radius: 12px
                  cards: []
                  layout_type: masonry
                  sort:
                    method: friendly_name
        card_mod:
          style: |
            mushroom-badge-icon:after {
              content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'closed' ) | list | count}}";         
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              background: rgb(var(--rgb-orange));
              color: var(--card-background-color);
              border-radius: 50%;
              top: 0px;
              width: 100%;
              height: 100%;
              font-size: 0.7em; 
            }
            mushroom-shape-icon {
              --icon-size: 34px;
              position: relative;
              top: 4px;
              }
            ha-card {
             border: none;
             }           

thank you!

Can I please get your code?

can you please send the code without a black background? to have a regular theme

Hi i love the looks of the mushroom cards and use it for most of things except for lightsā€¦ and thats because i often wanto to tim my lights down to 1% but then if i use mushroom lights sliders they often go down to 0% and turn offā€¦ is it possible to add a value that the lowest value on the slider is 1%?

and can you please share the scripts for the timer?

Can you specify a specific post or a visual of the card?