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

Look i dont know what you want me to do if you refuse to post the entire card.

i can see from the screenshot you sent that you have multiple things stacked on top of eachother.

a horizontal stack with 2 cards at the bottom. a card on top, another card on top of that, and some sort of title card on top of that. all in a stack of some kind (probably a vertical stack) if you dont post the full vertical stack i cant help you.

but honestly what is likely causing the issue is that you have all of these stacks in stacks in stacks.

i would take each of these cards out and place them seperately in your dashboard.

so the horizontal stack with 2 cards seperately. and the other cards on top of that seperately in your dashboard. not all in a vertical stack card like you have right now. your device might just not be able to load it in time.

      - type: custom:mushroom-media-player-card
        entity: media_player.music
        icon: mdi:play
        use_media_info: true
        use_media_artwork: false
        show_volume_level: false
        media_controls:
          - play_pause_stop
          - previous
          - next
          - shuffle
        volume_controls:
          - volume_buttons
          - volume_set
        fill_container: false
        card_mod:
          style: |
            mushroom-shape-icon {
              display: flex;
              {% set media_type = state_attr(config.entity, 'media_content_type') %}
              {% if media_type == 'music' %}
                --card-mod-icon: mdi:music;
                animation: beat 1.3s ease-out infinite both;
              {% elif media_type == 'playlist' %}
                --card-mod-icon: mdi:music;
                animation: beat 1.3s ease-out infinite both;
              {% else %}
                --card-mod-icon: mdi:play;
              {% endif %}

              {{ 'animation: none;' if not is_state(config.entity, 'playing') }}

            }
            @keyframes beat {
              0%, 60% { --icon-symbol-size: 21px; }
              5%, 17%, 57% { --icon-symbol-size: 22px; }
              10%, 20%, 51% { --icon-symbol-size: 23px; }
              25%, 45% { --icon-symbol-size: 24px; }
              30%, 39% { --icon-symbol-size: 25px; }
              33% { --icon-symbol-size: 26px; }
            }
            ha-card {
              --ha-card-border-width: 0;
            }
            ha-card:before {
              transform: translate3d(0,0,0);
              -webkit-transform: translate3d(0,0,0);
              content: "";

              background: url('/local/idle_art.png') center no-repeat;
              {% if is_state(config.entity, 'playing') %}
                background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
              {% endif %}

              background-size: contain;
              margin: 4px 4px 16px;
              filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
              border-radius: var(--control-border-radius);

              {% set media_type = state_attr(config.entity, 'media_content_type') %}
              {% if media_type == 'tvshow' %}
                aspect-ratio: 16 / 9;
              {% elif media_type == 'movie' %}
                aspect-ratio: 2 / 3;
              {% else %}
                aspect-ratio: 1 / 1;
              {% endif %}
            }
      - type: conditional
        conditions:
          - entity: media_player.music
            state: playing
        card:
          entity: media_player.music
          hide:
            icon: true
            name: true
            runtime: true
            source: true
            power: true
            state_label: true
            volume: true
            info: true
            progress: false
            controls: true
          more_info: false
          type: custom:mini-media-player
          toggle_power: false
          group: true
    card_mod:
      style: |
        ha-card:before {
          transform: translate3d(0,0,0);
          -webkit-transform: translate3d(0,0,0);
          content: "";
          position: absolute;
          height: 100%;
          width: 100%;

          background: url('/local/idle_art.png') center no-repeat;
          {% if is_state('media_player.music', 'playing') %}
            background: url( '{{ state_attr('media_player.music', "entity_picture") }}' ) center no-repeat;
          {% endif %}

          filter: blur(150px) saturate(200%);
          background-size: 100% 100%;
        }
        ha-card {
          transform: translate3d(0,0,0);
          -webkit-transform: translate3d(0,0,0);
        }

hallo @dimitri.landerloos
I have a question; maybe you can help me with this. I would like the badge color to be the same as the card, so red for 0, orange for 1, and yellow for 2, just like the icon itself. Thanks in advance!

type: custom:stack-in-card
mode: vertical
keep:
  background: false
  box_shadow: false
  margin: false
  outer_padding: true
  border_radius: false
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: >-
          Volgende: {{ state_attr
          ('sensor.limburg_net_eerst_volgende','Upcoming_day') }}
        secondary: >-
          {{ state_attr
          ('sensor.limburg_net_eerst_volgende','Upcoming_waste_types') }}
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
        card_mod: null
        style: |
          ha-card {
            --card-primary-font-weight: 400;
            --card-secondary-font-weight: 400;!important;
            #margin-top: -5px;
            #margin-bottom: -5px;
          }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            content: null
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            icon: phu:garbage-plastic
            badge_icon: |
              {% if state_attr('sensor.limburg_net_pmd', 'Days_until') == 1 %} 
            badge_color: orange
            icon_color: |-
              {% if state_attr('sensor.limburg_net_pmd', 'Days_until') == 2 %}
                yellow
              {% elif state_attr('sensor.limburg_net_pmd', 'Days_until') == 1 %}
                orange
              {% elif state_attr('sensor.limburg_net_pmd', 'Days_until') == 0 %}
                red
              {% endif %}
            card_mod: null
            style: |
              ha-card:after {
                content: "{{ state_attr('sensor.limburg_net_pmd', 'Days_until') }}";
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgb(var(--rgb-orange));
                color: var(--card-background-color);
                font-weight: bolder;
                border-radius: 50%;
                top: -5px;
                right: -5px;
                width: 16px;
                height: 16px;
                font-size: 11px; 
              }
          - type: template
            content: null
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            icon: phu:garbage-residual
            icon_color: >-
              {% if state_attr('sensor.limburg_net_restafval', 'Days_until') ==
              2 %}
                yellow
              {% elif state_attr('sensor.limburg_net_restafval', 'Days_until')
              == 1 %}
                orange
              {% elif state_attr('sensor.limburg_net_restafval', 'Days_until')
              == 0 %}
                red
              {% endif %}
            card_mod: null
            style: |
              ha-card:after {
                content: "{{ state_attr('sensor.limburg_net_restafval', 'Days_until') }}";
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgb(var(--rgb-orange));
                color: var(--card-background-color);
                font-weight: bolder;
                border-radius: 50%;
                top: -5px;
                right: -5px;
                width: 16px;
                height: 16px;
                font-size: 11px; 
              }
          - type: template
            content: null
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            icon: phu:garbage-organic
            icon_color: |-
              {% if state_attr('sensor.limburg_net_gft', 'Days_until') == 2 %}
                yellow
              {% elif state_attr('sensor.limburg_net_gft', 'Days_until') == 1 %}
                orange
              {% elif state_attr('sensor.limburg_net_gft', 'Days_until') == 0 %}
                red
              {% endif %}
            card_mod: null
            style: |
              ha-card:after {
                content: "{{ state_attr('sensor.limburg_net_gft', 'Days_until') }}";
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgb(var(--rgb-orange));
                color: var(--card-background-color);
                font-weight: bolder;
                border-radius: 50%;
                top: -5px;
                right: -5px;
                width: 16px;
                height: 16px;
                font-size: 11px; 
              }
          - type: template
            content: null
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            icon: phu:garbage-cardboard
            icon_color: >-
              {% if state_attr('sensor.limburg_net_papier', 'Days_until') == 2
              %}
                yellow
              {% elif state_attr('sensor.limburg_net_papier', 'Days_until') == 1
              %}
                orange
              {% elif state_attr('sensor.limburg_net_papier', 'Days_until') == 0
              %}
                red
              {% endif %}
            card_mod: null
            style: |
              ha-card:after {
                content: "{{ state_attr('sensor.limburg_net_papier', 'Days_until') }}";
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgb(var(--rgb-orange));
                color: var(--card-background-color);
                font-weight: bolder;
                border-radius: 50%;
                top: -5px;
                right: -5px;
                width: 16px;
                height: 16px;
                font-size: 11px; 
              }
          - type: template
            content: null
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            picture: local/afvalbeheer/textiel-afval.png
            icon_color: >-
              {% if state_attr('sensor.limburg_net_textiel', 'Days_until') == 2
              %}
                yellow
              {% elif state_attr('sensor.limburg_net_textiel', 'Days_until') ==
              1 %}
                orange
              {% elif state_attr('sensor.limburg_net_textiel', 'Days_until') ==
              0 %}
                red
              {% endif %}
            card_mod: null
            style: |
              ha-card:after {
                content: "{{ state_attr('sensor.limburg_net_textiel', 'Days_until') }}";
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgb(var(--rgb-orange));
                color: var(--card-background-color);
                font-weight: bolder;
                border-radius: 50%;
                top: -5px;
                right: -5px;
                width: 16px;
                height: 16px;
                font-size: 11px; 
              }
        alignment: end
        card_mod:
          style: |
            ha-card {
              top: 10px;
              right: 60px;
            }

Hi, is there a way to make the buttons (100, 70, 30) change color or flash for a few seconds to indicate that that scenario has been activated?


type: custom:stack-in-card
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:layout-card
        layout_type: masonry
        cards:
          - square: false
            columns: 2
            type: grid
            cards:
              - type: custom:mushroom-cover-card
                entity: cover.aqara_estore_grande_entrada
                show_position_control: true
                show_tilt_position_control: false
                show_buttons_control: true
                icon: mdi:blinds
                name: Estore Grande Entrada
                card_mod:
                  style: |
                    :host {
                       grid-column: 1 / span 2; 
                    }                
          - square: false
            columns: 3
            type: grid
            cards:
              - type: custom:mushroom-template-card
                primary: 100%
                secondary: ''
                layout: vertical
                entity: scene.estore_100
                icon: mdi:blinds-open
              - type: custom:mushroom-template-card
                primary: 70%
                secondary: ''
                layout: vertical
                entity: scene.estore_70
                icon: mdi:roller-shade
              - type: custom:mushroom-template-card
                primary: 30%
                secondary: ''
                layout: vertical
                entity: scene.estore_30
                icon: mdi:roller-shade-closed

This should work:

          - type: template
            content: null
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            icon: phu:garbage-plastic
            badge_icon: |
              {% if state_attr('sensor.limburg_net_pmd', 'Days_until') == 1 %} 
            icon_color: |-
              {% if state_attr('sensor.limburg_net_pmd', 'Days_until') == 2 %}
                yellow
              {% elif state_attr('sensor.limburg_net_pmd', 'Days_until') == 1 %}
                orange
              {% elif state_attr('sensor.limburg_net_pmd', 'Days_until') == 0 %}
                red
              {% endif %}
            card_mod: null
            style: |
              ha-card:after {
                content: "{{ state_attr('sensor.limburg_net_pmd', 'Days_until') }}";
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                {% if state_attr('sensor.limburg_net_pmd', 'Days_until') == 2 %}
                  background: rgb(var(--rgb-yellow));
                {% elif state_attr('sensor.limburg_net_pmd', 'Days_until') == 1 %}
                  background: rgb(var(--rgb-orange));
                {% elif state_attr('sensor.limburg_net_pmd', 'Days_until') == 0 %}
                  background: rgb(var(--rgb-red));
                {% endif %}
                color: var(--card-background-color);
                font-weight: bolder;
                border-radius: 50%;
                top: -5px;
                right: -5px;
                width: 16px;
                height: 16px;
                font-size: 11px; 
              }
1 Like

Sure:

type: custom:stack-in-card
mode: vertical
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Bin Collection
        secondary: >-
          {{ 'Today' if '0 days' in states('sensor.waste_collection') else
             ('Tomorrow' if '1 days' in states('sensor.waste_collection') else
              states('sensor.waste_collection')|regex_findall_index('in \d+ days')) }}
        icon: mdi:calendar
        icon_color: >-
          {{ 'blue' if '0 days' in states('sensor.waste_collection') else
          'disabled' }}
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            content: ''
            icon: mdi:trash-can
            icon_color: >-
              {{ 'red' if 'Rubbish' in states('sensor.waste_collection') else
              'grey' }}
            card_mod:
              style: |
                ha-card {
                  background: rgba(var(--rgb-{{ 'red' if 'Rubbish' in states('sensor.waste_collection') else 'grey' }}), 0.2) !important;
                  border: none;
                  box-shadow: none;
                }
                ha-card:after {
                  content: "{{ 'done' if 'Rubbish' in states('sensor.waste_collection') else 'close' }}";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: rgb(var(--rgb-{{ 'red' if 'Rubbish' in states('sensor.waste_collection') else 'grey' }}));
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: -5px;
                  right: -5px;
                  width: 16px;
                  height: 16px;
                  font-size: 11px;
                  font-family: 'Material Icons';
                }
          - type: template
            content: ''
            icon: mdi:recycle
            icon_color: >-
              {{ 'yellow' if 'Recycling' in states('sensor.waste_collection')
              else 'grey' }}
            card_mod:
              style: |
                ha-card {
                  background: rgba(var(--rgb-{{ 'yellow' if 'Recycling' in states('sensor.waste_collection') else 'grey' }}), 0.2) !important;
                  border: none;
                  box-shadow: none;        
                }
                ha-card:after {
                  content: "{{ 'done' if 'Recycling' in states('sensor.waste_collection') else 'close' }}";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: rgb(var(--rgb-{{ 'yellow' if 'Recycling' in states('sensor.waste_collection') else 'grey' }}));
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: -5px;
                  right: -5px;
                  width: 16px;
                  height: 16px;
                  font-size: 11px;
                  font-family: 'Material Icons';
                }
          - type: template
            content: ''
            icon: mdi:leaf
            icon_color: >-
              {{ 'green' if 'Green' in states('sensor.waste_collection') else
              'grey' }}
            card_mod:
              style: |
                ha-card {
                  background: rgba(var(--rgb-{{ 'green' if 'Green' in states('sensor.waste_collection') else 'grey' }}), 0.2) !important;
                  border: none;
                  box-shadow: none;
                }
                ha-card:after {
                  content: "{{ 'done' if 'Green' in states('sensor.waste_collection') else 'close' }}";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: rgb(var(--rgb-{{ 'green' if 'Green' in states('sensor.waste_collection') else 'grey' }}));
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: -5px;
                  right: -5px;
                  width: 16px;
                  height: 16px;
                  font-size: 11px;
                  font-family: 'Material Icons';
                }
        alignment: end
        card_mod:
          style: |
            ha-card {
              top: 16px;
              right: 17px;
            }
card_mod:
  style: |
    ha-card {
      background: none;
      --ha-card-box-shadow: 0px;
    }

Edited: Updated secondary logic

3 Likes

You can kinda do it like this with card mod, but it doesnt always react well to the press on mobile unfortunately.

type: custom:mushroom-template-card
primary: 100%
secondary: ''
layout: vertical
entity: scene.estore_100
icon: mdi:blinds-open
card_mod:
  style: |
    ha-card:active {
      background: rgba(var(--rgb-blue), 0.5);
      transition: 0s;
    }

Another approach:

icon_color: >-
  {% set days_until = state_attr('sensor.limburg_net_pmd', 'Days_until') %}
  {{ {
    2: 'yellow',
    1: 'orange',
    0: 'red'
  }.get(days_until, '') }}
2 Likes

Hello !

Is anybody experiencing since some weeks a very slow Home assistant, using mushroom cards ? Even my automations are slow like 5min delay.

In my case it seems that the august update has been the problem. I initially tough that was my try with Frigate, so I’ve everything unistalled with no change.

Then I deleted my view with all mushroom card and tada everything works fine !

To be sure I put again a card in a view, and it works fine for 20 seconds, then the problem reappear.

So is there something in the code of theses card that are messing with my instance ?

Here one of my card :

type: horizontal-stack
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        entity: switch.template_vannea_eau_ext
        icon: mdi:pool
        icon_color: |
          {% if is_state(entity, 'on') %}
            orange
          {% else %}  
            #44739E
          {% endif %}
        primary: Piscine
        secondary: >-
          {{ states('sensor.temperature_piscine') }}°C | {{
          states('sensor.ph_piscine') }}pH |{{ states('sensor.cuisine_6_1d') }}
          kW
        layout: horizontal
        tap_action:
          action: toggle
        double_tap_action:
          action: more-info
        badge_icon: ''
        badge_color: |
          {% if is_state('switch.ecs_gpio5', 'on') %}
            orange
          {% else %}  
            #44739E
          {% endif %}    
        card_mod:
          style:
            mushroom-state-info$: |
              .primary {
                font-size: 16px !important;
                position: relative;
                top: -50px;
                left: -155px;
                overflow: visible !important;
                white-space: normal !important;
              }
              .secondary {
                position: relative;
                overflow: visible !important;
                top: -52px;
                left: -155px;
              }
            mushroom-shape-icon$: |
              .shape {
                position: relative;
                left: -43px;
                top: 55px;
              }
            .: |
              :host {
                --mush-icon-size: 146px;
              }
            style: |
              mushroom-badge-icon {
                left: 80px;
                top: 25px;
              }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: binary_sensor.sensors_piscine
            icon: mdi:motion-sensor
            icon_color: |-
              {% if is_state(entity, 'on') %} 
               red
              {% else %}
               #44739E
              {% endif %}
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Capteurs
                  content:
                    type: vertical-stack
                    cards:
                      - type: custom:mushroom-entity-card
                        entity: binary_sensor.exterieur_1_cell_motion_detection
                        name: Camera Piscine
                        icon: mdi:cctv
                        secondary_info: state
                        icon_color: red
                      - type: custom:mushroom-entity-card
                        entity: binary_sensor.portail_passage_gpio27
                        icon: mdi:motion-sensor
                        fill_container: false
                        primary_info: name
                        name: Présence humaine
                        secondary_info: state
                        icon_color: red
          - type: template
            entity: switch.ev_chambre_bas
            tap_action:
              action: toggle
            icon: mdi:pump
            hold_action:
              action: more-info
            icon_color: |-
              {% if is_state(entity, 'on') %} 
               orange
              {% elif is_state(entity, 'off') %} 
               #44739E
              {% else %}
               grey
              {% endif %}
            double_tap_action:
              action: more-info
          - type: template
            entity: sensor.ph_piscine
            icon: mdi:ph
            icon_color: |-
              {% if is_state(entity, 'on') %} 
               red
              {% else %}
               #44739E
              {% endif %}
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: pH
                  content:
                    type: vertical-stack
                    cards:
                      - chart_type: line
                        period: 5minute
                        type: statistics-graph
                        entities:
                          - sensor.ph_piscine
                        stat_types:
                          - mean
                          - max
                          - min
                        days_to_show: 2
                        hide_legend: false
            double_tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Température
                  content:
                    type: vertical-stack
                    cards:
                      - chart_type: line
                        period: 5minute
                        type: statistics-graph
                        entities:
                          - sensor.temperature_piscine
                        stat_types:
                          - mean
                          - max
                          - min
                        days_to_show: 2
                        hide_legend: false
          - type: template
            entity: input_boolean.water_leak_detected
            icon: mdi:pipe-leak
            icon_color: |
              {% if is_state(entity, 'on') %}
                red
              {% else %}  
                #44739E
              {% endif %}
            primary: Home
            secondary: '{{ states(''sensor.homeassistant_uptime'') }}'
            layout: horizontal
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Capteurs
                  content:
                    type: vertical-stack
                    cards:
                      - type: custom:mushroom-entity-card
                        entity: sensor.cpu_temperature
                        name: Température CPU
                        icon: mdi:raspberry-pi
                        secondary_info: state
                      - type: custom:mushroom-entity-card
                        entity: sensor.disk_use_percent_config
                        name: SSD
                        icon: mdi:harddisk
                        secondary_info: state
                      - type: custom:mushroom-entity-card
                        entity: sensor.memory_use_percent
                        name: RAM
                        icon: mdi:memory
                        secondary_info: state
                      - type: custom:mushroom-entity-card
                        entity: sensor.processor_use
                        name: Processeur
                        icon: mdi:memory
                        secondary_info: state
            double_tap_action:
              action: more-info
        card_mod:
          style:
            .: |
              ha-card {
                width: 16px;
                margin-left: 80%;
                top: -170px;
                background: none;
                --chip-border-width: 0;
              }
    card_mod:
      style: |
        ha-card {
          height: 178px ;
          width: 178px !important;
          margin-left: auto;
          margin-right: auto;
        }
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        entity: switch.template_vannea_eau_ext
        icon: mdi:water
        icon_color: |
          {% if is_state(entity, 'on') %}
            orange
          {% else %}  
            #44739E
          {% endif %}
        primary: Eau
        secondary: >-
          {{ states('sensor.eau_utility_l_daily') }}L | {{
          states('sensor.ecs_2_1d_arrond') }} kW
        layout: horizontal
        tap_action:
          action: toggle
        double_tap_action:
          action: more-info
        badge_icon: |
          {% if is_state('switch.ecs_gpio5', 'on') %}
            mdi:water-boiler
          {% else %}  
            mdi:water-boiler
          {% endif %}
        badge_color: |
          {% if is_state('switch.ecs_gpio5', 'on') %}
            orange
          {% else %}  
            #44739E
          {% endif %}    
        card_mod:
          style:
            mushroom-state-info$: |
              .primary {
                font-size: 16px !important;
                position: relative;
                top: -50px;
                left: -155px;
                overflow: visible !important;
                white-space: normal !important;
              }
              .secondary {
                position: relative;
                overflow: visible !important;
                top: -52px;
                left: -155px;
              }
            mushroom-shape-icon$: |
              .shape {
                position: relative;
                left: -43px;
                top: 55px;
              }
            .: |
              :host {
                --mush-icon-size: 146px;
              }
            style: |
              mushroom-badge-icon {
                left: 80px;
                top: 25px;
              }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: switch.ecs_gpio5
            tap_action:
              action: toggle
            hold_action:
              action: more-info
            icon: mdi:water-boiler
            icon_color: |-

              {% if is_state(entity, 'on') %} 
               orange

              {% else %}
               #44739E
              {% endif %}
            double_tap_action:
              action: more-info
            content: null
          - type: template
            entity: switch.template_vannea_eau_int
            tap_action:
              action: toggle
            icon: mdi:water
            hold_action:
              action: more-info
            icon_color: |-
              {% if is_state(entity, 'on') %} 
               orange
              {% elif is_state(entity, 'off') %} 
               #44739E
              {% else %}
               grey
              {% endif %}
            double_tap_action:
              action: more-info
          - type: template
            entity: switch.template_vannea_eau_ext
            tap_action:
              action: toggle
            icon: mdi:water
            hold_action:
              action: more-info
            icon_color: |-
              {% if is_state(entity, 'on') %} 
               orange
              {% elif is_state(entity, 'off') %} 
               #44739E
              {% else %}
               grey
              {% endif %}
            double_tap_action:
              action: more-info
          - type: template
            entity: input_boolean.water_leak_detected
            icon: mdi:pipe-leak
            icon_color: |
              {% if is_state(entity, 'on') %}
                red
              {% else %}  
                #44739E
              {% endif %}
            primary: Home
            secondary: '{{ states(''sensor.homeassistant_uptime'') }}'
            layout: horizontal
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Capteurs
                  content:
                    type: vertical-stack
                    cards:
                      - type: custom:mushroom-entity-card
                        entity: input_boolean.water_leak_detected
                        name: Fuite d'eau
                        icon: mdi:pipe-leak
                        secondary_info: state
            double_tap_action:
              action: more-info
        card_mod:
          style:
            .: |
              ha-card {
                width: 16px;
                margin-left: 80%;
                top: -170px;
                background: none;
                --chip-border-width: 0;
              }
    card_mod:
      style: |
        ha-card {
          height: 178px ;
          width: 178px !important;
          margin-left: auto;
          margin-right: auto;
        }

Hello, I already tried this but the effect only appears while the button is being pressed. I wanted the effect to be visible for a few seconds after pressing it.
Is this possible?

Hello all,
I would like to use a template card for the visualisation of lamps and put a coloured shadow around the card. The shadow should correspond to the current colour of the lamp. I think I have seen an example here before, but unfortunately I can’t find it. Does anyone have another example for me?

This will work:
image

type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
entity: light.office_desk_lamp
icon: mdi:home
card_mod:
  style: |
    ha-card {
      box-shadow: 0 0 10px 5px rgb{{state_attr(config.entity,'rgb_color')}};
    }

Just keep in mind that this only works if your light supports rgb_color as an attribute.
if you want to have a check first and then set a default color if it doesnt support it you can do this:

type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
entity: light.office_desk_lamp
icon: mdi:home
card_mod:
  style: |
    ha-card {
      {% if state_attr(config.entity, 'rgb_color') != none %}
        box-shadow: 0 0 10px 5px rgb{{state_attr(config.entity,'rgb_color')}};
      {% else %}
        box-shadow: 0 0 10px 5px rgb(255, 150, 40);
      {% endif %}
    }

checks if rgb_color is not equal to none and then applies the rgb_color if it is none applies a default color you can set yourself :slight_smile:

if you want to control the light intensity (perhaps in line with brightness set) you can do this:
image
50% brightness, on a light that doesnt support rgb_color

type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
entity: light.kitchen_down_light_1
icon: mdi:home
card_mod:
  style: |
    ha-card {
      {% if state_attr(config.entity, 'rgb_color') != none %}
        box-shadow: 0 0 10px 5px rgba{{state_attr(config.entity,'rgb_color') + (state_attr(config.entity,'brightness') / 2.55 / 100,)}};
      {% else %}
        box-shadow: 0 0 10px 5px rgba(255, 150, 40, {{state_attr(config.entity,'brightness') / 2.55 / 100}});
      {% endif %}
    }

But again, your light needs to support the brightness attribute, so we can build in another check again like this:

type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
entity: light.kitchen_down_light_1
icon: mdi:home
card_mod:
  style: |
    ha-card {
      {% if state_attr(config.entity, 'rgb_color') != none and state_attr(config.entity, 'brigtness') != none  %}
        /* if both color and brightness supported */
        box-shadow: 0 0 10px 5px rgba{{state_attr(config.entity,'rgb_color') + (state_attr(config.entity,'brightness') / 2.55 / 100,)}};
      {% elif state_attr(config.entity, 'rgb_color') == none %}
        /* if only brightness supported */
        box-shadow: 0 0 10px 5px rgba(255, 150, 40, {{state_attr(config.entity,'brightness') / 2.55 / 100}});
      {% elif state_attr(config.entity, 'brightness') == none %}
        /* if only color supported (never seen this in my life) */
        box-shadow: 0 0 10px 5px rgba{{state_attr(config.entity,'rgb_color')}};
      {% else %}
        /* if neither color or brighness supported */
        box-shadow: 0 0 10px 5px rgba(255, 150, 40, 1);
      {% endif %}
    }
2 Likes

wow, thank you very much for your quick and comprehensive answer. Now I have enough tasks for tonight. :slight_smile:

1 Like

How can I adjust the size? :thinking:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: person.bologni
    use_entity_picture: true
    card_mod:
      style: |
        ha-card {


          --chip-border-radius: 0;
        }
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          content:
            type: map
            entities:
              - entity: person.bologni
              - entity: person.elena
            dark_mode: false
            hours_to_show: 2
            class: border
            style:
              .: |
                ha-card {
                  border: solid 1px var(--primary-color);
                  border-radius: 25px;
                }
  - type: entity
    entity: person.elena
    use_entity_picture: true
    card_mod:
      style: |
        ha-card {

          --chip-border-radius: 0;
        }
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          content:
            type: map
            entities:
              - entity: person.bologni
              - entity: person.elena
            dark_mode: false
            hours_to_show: 2
            class: border
            style:
              .: |
                ha-card {
                  border: solid 1px var(--primary-color);
                  border-radius: 25px;
                }
  - type: weather
    card_mod:
      style: |
        ha-card {
            margin-bottom: auto
          --chip-box-shadow: 12;
          --chip-spacing: 150;
          --chip-icon-size: 0.8em;
          --chip-border-radius: 0;
        }
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          content:
            type: weather-forecast
            entity: weather.casa
            class: border
            style:
              .: |
                ha-card {
                  border: solid 1px var(--primary-color);
                  border-radius: 25px;

                }
    entity: weather.casa
    show_temperature: false
    show_conditions: true

ok, I think I have understood the basic logic. But now I run into the next problem when I want to move the template card into a stack-in card.
Where do I have to place the card-mod so that this also has an effect?

type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
  entity: light.aussenbeleuchtung_garten
  primary: Garten
  secondary: |-
    {% if is_state(entity, 'off') %}
      ausgeschaltet
    {% elif is_state(entity, 'on') %}
      {{ states('sensor.anzahl_lampen_garten_eingeschaltet') }} eingeschaltet
    {% else %}
      nicht verfĂŒgbar
    {% endif %}
  icon: hue:bulb-group-pillar-turaco-short-tall
  layout: vertical
  hold_action:
    action: more-info
  card_mod:
    style: |
      ha-card {
        box-shadow: 0 0 10px 5px rgb{{state_attr(light.aussenbeleuchtung_garten,'rgb_color')}};
      }

Keep in mind that you now cant use config.entity because you entity isnt configured in the stack in card, but rather in your template card. so you have to tell it what entity to use. i see that you did that, but you need to have 'light.yourlight' around it :slight_smile:

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    entity: light.office_desk_lamp
    primary: Garten
    secondary: |-
      {% if is_state(entity, 'off') %}
        ausgeschaltet
      {% elif is_state(entity, 'on') %}
        {{ states('sensor.anzahl_lampen_garten_eingeschaltet') }} eingeschaltet
      {% else %}
        nicht verfĂŒgbar
      {% endif %}
    icon: hue:bulb-group-pillar-turaco-short-tall
    layout: vertical
    hold_action:
      action: more-info
card_mod:
  style: |
    ha-card {
      box-shadow: 0 0 10px 5px rgb{{state_attr('light.office_desk_lamp','rgb_color')}};
    }

use alignment: justify

so just have in your main chip card:

type: custom:mushroom-chips-card
alignment: justify
chips:

thanks man tis working nice

1 Like

thanks man tis make my code shorter man

Thank you for your support. That also works. But right at my next step, I get the next problem. I’ll stop with the step by step now and jump to my final wish. I have found a map here in the thread that I like quite well as it is and am trying to adapt it a little for myself. First of all, I would like to draw a frame around the map.

Unfortunately, something doesn’t fit in the display and css is not my friend at all :-(Maybe you can already see something here?

square: false
columns: 2
type: grid
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-template-card
        entity: light.aussenbeleuchtung_garten
        primary: Garten
        secondary: |-
          {% if is_state(entity, 'off') %}
            ausgeschaltet
          {% elif is_state(entity, 'on') %}
            {{ states('sensor.anzahl_lampen_garten_eingeschaltet') }} eingeschaltet
          {% else %}
            nicht verfĂŒgbar
          {% endif %}
        icon: hue:bulb-group-pillar-turaco-short-tall
        icon_color: '{{ state_attr(entity, ''rgb_color'') }}'
        layout: vertical
        hold_action:
          action: more-info
        card_mod:
          style:
            mushroom-state-info$: |
              .container {
                align-items: start;
                padding-bottom: 10px;
              }
              .secondary {
                  font-weight: 400 !important;
            mushroom-shape-icon$: |
              .shape {
                margin-right: 140px;
                margin-top: 20px;
                --shape-color: none !important;
                --icon-size: 30px;
              }
            .: |
              ha-card {
                box-shadow: 0 0 10px 5px rgb{{state_attr('light.aussenbeleuchtung_garten','rgb_color')}};
                height: 110px !important;
                width: 200px;
                --card-secondary-font-size: 13px;
              }
              ha-state-icon {
              --icon-symbol-size: 30px;
              }
      - type: vertical-stack
        cards:
          - type: conditional
            conditions:
              - entity: light.aussenbeleuchtung_garten
                state: 'on'
            card:
              type: custom:mushroom-template-card
              icon: none
              entity: light.aussenbeleuchtung_garten
              layout: vertical
              tap_action:
                action: none
              hold_action:
                action: none
              double_tap_action:
                action: none
              primary: ''
              multiline_secondary: false
              fill_container: false
              card_mod:
                style:
                  mushroom-shape-icon$: |
                    .shape {
                    --icon-size: 35px; 
                      /* Radial progress bar */
                      background: radial-gradient(var(--card-background-color) 60%, 
                                                  transparent calc(60% + 1px)), 
                                  conic-gradient(var(--icon-color) {{ (state_attr(config.entity,'brightness') | int / 255 * 100)| round(0) }}% 0%, 
                                                  var(--card-background-color) 0% 100%);
                      --icon-symbol-size: 21px; 
                      --shape-color: none !important;
                    }
                    .shape:after {

                      /* Add back icon shape */
                      content: "";
                      position: absolute;
                      border-radius: var(--icon-border-radius);
                      background: var(--shape-color);
                      content: "{{ (state_attr('light.aussenbeleuchtung_garten', 'brightness') | int / 255 * 100)| round(0) }}%";
                      font-weight: light;
                      font-size: 10px;
                    }
                  .: |
                    ha-card {
                      /* Center card on row */
                      width: fit-content;
                      left: 40px;
                      top: 5px;
                      --ha-card-background: none;
                      --ha-card-box-shadow: none;
                      --ha-card-border-width: 0;
                      /* Make card non-responsive to select and pointer */
                      user-select: none;
                      pointer-events: none;
                    }
          - type: conditional
            conditions:
              - entity: light.aussenbeleuchtung_garten
                state: 'on'
            card:
              type: custom:mushroom-chips-card
              chips:
                - type: entity
                  entity: light.aussenbeleuchtung_garten
                  double_tap_action:
                    action: none
                  tap_action:
                    action: more-info
                  hold_action:
                    action: none
                  icon: mdi:dots-vertical
                  content_info: none
              card_mod:
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    margin: 5px 0px 0px 50px;
                    width: 44px;
                    border-radius: 100px !important;
                    --chip-border-width: 0px;
                  }
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-template-card
        entity: light.aussenbeleuchtung_kugeln
        primary: Kugeln
        secondary: |-
          {% if is_state(entity, 'on') %}
            eingeschaltet
          {% elif is_state(entity, 'off') %}
            ausgeschaltet
          {% else %}
            nicht verfĂŒgbar
          {% endif %}
        icon: hue:iris-group
        icon_color: '{{ state_attr(entity, ''rgb_color'') }}'
        layout: vertical
        hold_action:
          action: more-info
        card_mod:
          style:
            mushroom-state-info$: |
              .container {
                align-items: start;
                padding-bottom: 10px;
              }
              .secondary {
                  font-weight: 400 !important;
            mushroom-shape-icon$: |
              .shape {
                margin-right: 140px;
                margin-top: 20px;
                --shape-color: none !important;
                --icon-size: 30px;
              }
            .: |
              ha-card {
                height: 110px !important;
                width: 200px;
                --card-secondary-font-size: 13px;
              }
              ha-state-icon {
              --icon-symbol-size: 30px;
              }
      - type: vertical-stack
        cards:
          - type: conditional
            conditions:
              - entity: light.aussenbeleuchtung_kugeln
                state: 'on'
            card:
              type: custom:mushroom-template-card
              icon: none
              entity: light.aussenbeleuchtung_kugeln
              layout: vertical
              tap_action:
                action: none
              hold_action:
                action: none
              double_tap_action:
                action: none
              primary: ''
              multiline_secondary: false
              fill_container: false
              card_mod:
                style:
                  mushroom-shape-icon$: |
                    .shape {
                    --icon-size: 35px; 
                      /* Radial progress bar */
                      background: radial-gradient(var(--card-background-color) 60%, 
                                                  transparent calc(60% + 1px)), 
                                  conic-gradient(var(--icon-color) {{ (state_attr(config.entity,'brightness') | int / 255 * 100)| round(0) }}% 0%, 
                                                  var(--card-background-color) 0% 100%);
                      --icon-symbol-size: 21px; 
                      --shape-color: none !important;
                    }
                    .shape:after {

                      /* Add back icon shape */
                      content: "";
                      position: absolute;
                      border-radius: var(--icon-border-radius);
                      background: var(--shape-color);
                      content: "{{ (state_attr('light.aussenbeleuchtung_kugeln', 'brightness') | int / 255 * 100)| round(0) }}%";
                      font-weight: light;
                      font-size: 10px;
                    }
                  .: |
                    ha-card {
                      /* Center card on row */
                      width: fit-content;
                      left: 40px;
                      top: 5px;
                      --ha-card-background: none;
                      --ha-card-box-shadow: none;
                      --ha-card-border-width: 0;
                      /* Make card non-responsive to select and pointer */
                      user-select: none;
                      pointer-events: none;
                    }
          - type: conditional
            conditions:
              - entity: light.aussenbeleuchtung_kugeln
                state: 'on'
            card:
              type: custom:mushroom-chips-card
              chips:
                - type: entity
                  entity: light.aussenbeleuchtung_kugeln
                  double_tap_action:
                    action: none
                  tap_action:
                    action: more-info
                  hold_action:
                    action: none
                  icon: mdi:dots-vertical
                  content_info: none
              card_mod:
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    margin: 5px 0px 0px 50px;
                    width: 44px;
                    border-radius: 100px !important;
                    --chip-border-width: 0px;
                  }