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

[president75 (Fabio)]

@tvds

@LiQuid_cOOled

I’d recommend three and then start a second row.

Hi, many thanks for the insights!
I changed the design a little bit .
I removed the 2 cover cards (open & closed). And changed it to just one cover card with 2 badges. The upper badge shows the nr of open covers, the bottom badge shows the nr of closed covers.

Very nice. You could share the code. Thank you

[tvds (Tim)]

Hi sure … here you go
It’s a room card:

• Graph of the room temperature for the last 24h on the left side
• Climate card with the actual temperature. The color changes depending on the hvac action state: orange when heating, blue when cooling, grey when idle. The green badge on top is the valve % opening of the floor heating in the room. The badge is removed when the action state is idle.
• Nr of active lights in the room. Color yellow >= 1 light active, else color is grey (no active lights). Tap action: : pop-up of al lights in the room.
• The last one is the state of the covers. The color and icon change depending on state of all cover in the room. In this example I have 5 covers in the room (living area). When all covers are open → blue icon: open cover. When all covers are closed → blue icon: closed cover. When mixed open/closed covers → grey icon: alert cover
  The upper badge shows the nr of open covers, the bottom badge shows the nr of closed covers in the room.
  Tap action: pop-up of al covers in the room.

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;
          top: 5px;
        }
    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: 14px;
                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: 0;
                width: 100%;
                height: 100%;
                font-size: 0.7em; 
              }
              ha-card {
                border: none !important;
                margin-left: -10px;
                margin-right: 0px;
              }
      - type: custom:mushroom-template-card
        primary: null
        icon: mdi:lightbulb
        icon_color: >-
          {%if  expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' ,
          'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count > 0 %}
          amber {% else %} grey {% 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: 0;
              width: 100%;
              height: 100%;
              font-size: 0.8em; 
            }
            ha-card {
              --ha-card-border-width: 0;
              margin-left: -10px;
              margin-right: 0px; 
            }
      - type: custom:mushroom-template-card
        primary: null
        icon: >-
          {%if  expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
          'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list |
          count == 5 %} mdi:window-shutter-open  {%elif
          expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' ,
          'cover' ) | selectattr ( 'state' , 'eq' , 'closed' ) | list | count ==
          5 %} mdi:window-shutter  {% else %} mdi:window-shutter-alert  {% endif
          %}
        icon_color: >-
          {%if  expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
          'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list |
          count == 5  or expand(area_entities('woonkamer')) | selectattr (
          'domain' , 'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'closed' )
          | list | count == 5 %} 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;
              right: 0px;
              width: 100%;
              height: 100%;
              font-size: 0.8em;
            }                
            mushroom-badge-icon:before {
              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: 30px;
              right: 0px;
              width: 100%;
              height: 100%;
              font-size: 0.8em;               
            }
            ha-card {
              --ha-card-border-width: 0;
              margin-left: -10px;
              margin-right: 0px;
            }

[president75 (Fabio)]

Thanks

[president75 (Fabio)]

Good evening guys,

I still need you.

Through your invaluable help I have managed to create my counter of lights on.

The entity is “sensor.luci_accese_soggiorno”.

However, now I should insert the counter into my icon with animation in a chip card but I can’t.

Can you please help me.

Thank you

Here is the 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: light.luci_soggiorno
          icon: |
            {% if is_state(entity, 'on') %}
              mdi:lightbulb-on
            {% else %}
              mdi:lightbulb-outline
            {% endif %}
          icon_color: |
            {% if is_state(entity, 'on') %}
              black
            {% else %}
              white
            {% endif %}
      card_mod:
        style:
          mushroom-template-chip:nth-child(1)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{'rgba(235, 204, 52, 1)' if is_state('light.luci_soggiorno', 'on') else 'rgba(199, 239, 207, 0.3)' }};
                animation: {{ 'ping 2s ease-out infinite' if is_state('light.luci_soggiorno', 'on') }};
                padding: 5px !important;
                border-radius: 100px !important;
                justify-content: center;
                --chip-icon-size: 34px;
                --chip-height: 40px;
                width: var(--chip-height) !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
                }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
            .: |
              ha-state-icon {
                animation: {{ 'illumination 2s infinite' if is_state('light.luci_soggiorno', 'on') }};
              }
              @keyframes illumination {
                0%, 100% { clip-path: inset(0 0 0 0); }
                95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 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
type or paste code here

[LiQuid_cOOled]

So something like this?

type: custom:mushroom-template-card
      tap_action:
        action: none
      entity: light.luci_soggiorno
      icon: |
        {% if is_state(entity, 'on') %}
          mdi:lightbulb-on
        {% else %}
          mdi:lightbulb-outline
        {% endif %}
      icon_color: |
        {% if is_state(entity, 'on') %}
          black
        {% else %}
          white
        {% endif %}
      card_mod:
        style: |

          ha-card:after {
                    content: " {{ states.light | rejectattr('attributes.entity_id', 'defined') | selectattr('state', 'eq', 'on') | list | count }}";
                    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% 50%;
                    top: -5px;
                    right: -15px;
                    width: 20px;
                    height: 20px;
                    font-size: 10px;
                                  }

          ha-card {
             background: {{'rgba(235, 204, 52, 1)' if is_state('light.luci_soggiorno', 'on') else 'rgba(199, 239, 207, 0.3)' }};
            animation: {{ 'ping 2s ease-out infinite' if is_state('light.luci_soggiorno', 'on') }};
              padding: 0px !important;
              border-radius: 50% !important;
              justify-content: center;
              
             
            }
            @keyframes ping {
              0% {
                box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
              }
              100% {
                box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
              }
            }
            ha-card:active {
              transform: translateY(1.5px);
              transition: 0s;
              box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
            }
          .: |
            ha-state-icon {
              animation: {{ 'illumination 2s infinite' if is_state(light.luci_soggiorno', 'on') }};
            }
            @keyframes illumination {
              0%, 100% { clip-path: inset(0 0 0 0); }
              95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
            }

[LiQuid_cOOled]

I have since redesigned the card to this

Script

alias: Pihole Timer Finish
sequence:
  - service: timer.finish
    metadata: {}
    data: {}
    target:
      entity_id:
        - timer.pht
  - type: turn_on
    device_id: main device here
    entity_id: main device here
    domain: switch
  - service: input_boolean.turn_off
    target:
      entity_id:
        - input_boolean.pht
    data: {}
mode: single
icon: mdi:timer-off-outline

Automation

alias: Pihole Timer Finish
sequence:
  - service: timer.finish
    metadata: {}
    data: {}
    target:
      entity_id:
        - timer.pht
  - type: turn_on
    device_id: main device here
    entity_id: main device here
    domain: switch
  - service: input_boolean.turn_off
    target:
      entity_id:
        - input_boolean.pht
    data: {}
mode: single
icon: mdi:timer-off-outline

Card Code

type: custom:stack-in-card
cards:
  - type: custom:mushroom-title-card
    title: PiHole
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 15% 20% 65%
      margin: '-10px 0px 0px 0px'
    cards:
      - type: custom:mushroom-template-card
        entity: input_boolean.pht
        icon: mdi:apple
        tap_action:
          action: toggle
          confirmation:
            text: Are you sure you want to start the timer?
        hold_action:
          action: call-service
          confirmation:
            text: Are you sure you want cancel the timer?
          service: script.pihole_timer_finish
        icon_color: transparent
        card_mod:
          style: |

            {% if is_state('switch.pi_hole', 'off') %}
            ha-state-icon {
            animation: beat 1.3s ease-out infinite both;
                 }
                @keyframes beat {
                0% { transform: scale(.9); }
               10% { transform: scale(1.1); }
               17% { transform: scale(1.05); }
               33% { transform: scale(1.1); }
               60% { transform: scale(1); }
                }
              {% endif %}
              
            {% if is_state('switch.pi_hole', 'on') %}  ha-state-icon:after {
            content: ""; position: relative; background-image:
            url("/local/pics/pi-on.png") ;  background-repeat:no-repeat;
            background-size: 100%;  background-position: center;  height: 50px;
            width: 40px;  top: -6px; left: 12px; border-radius: 50%;
                     } 
            {% else %} ha-state-icon:after { content: ""; position: relative;
            background-image: url("/local/pics/pi.png"); 
            background-repeat:no-repeat; background-size: 100%; 
            background-position: center;  height: 50px; width: 40px;  top: -6px;
            left: 12px; border-radius: 50%; animation: sprinkle 4s ease-in-out
            infinite;
               } 
            {% endif %}
            ha-card {
             border: none !important;
             background:none;
            }  ha-state-icon { color: transparent !important; border: none
            !important;
             --icon-symbol-size: 1px;
                }

             
      - type: custom:button-card
        entity: timer.pht
        name: Time Left
        show_name: true
        show_state: true
        show_label: false
        show_icon: false
        tap_action:
          action: none
        custom_fields:
          status:
            card:
              type: custom:button-card
              entity: switch.pi_hole
              tap_action: none
              show_state: true
              show_name: false
              show_icon: false
              styles:
                card:
                  - color: |
                      [[[
                       if(states['input_boolean.pht'].state == 'off') return 'lime'
                       else return 'red';
                       ]]] 
                  - font-size: 14px
                  - background: transparent
                  - border: none
                  - text-transform: uppercase
        styles:
          name:
            - position: absolute
            - width: 60px
            - top: 5%
            - left: 10%
            - z-index: 1
            - font-size: 13px
            - color: grey
          card:
            - height: 60px
            - width: 70px
            - top: 3px
            - background: none
            - border: none
            - color: |
                [[[
                  if(states['input_boolean.pht'].state == 'off') return 'lime'
                  else return 'red';
                ]]] 
          state:
            - position: absolute
            - left: 40%
            - top: 35%
            - z-index: 0
            - font-size: 12px
          custom_fields:
            status:
              - position: absolute
              - left: 32%
              - top: 70%
              - z-index: 2
              - width: 30px
        card_mod:
          style: |
            ha-card {
            border-radius: 8px !important;
             }
      - type: custom:mushroom-number-card
        name: ''
        entity: input_number.pht
        tap_action:
          action: toggle
        layout: horizontal
        display_mode: slider
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                background: none !important;
                --shape-color: none;
                
                }
            mushroom-number-value-control$:
              mushroom-slider$: |
                .slider {
                 position: absolute !important;
                 width: 90% !important;
                 left: 12px;
                 z-index: 0;
                 height: 44px !important;
                 flex-shrink: 1;
                 flex-grow: 1;
                 margin-top:2px;
                 --bg-color: rgba(169, 169, 169, 0.2);
                 --main-color: {{ 'rgba(0, 255, 0, .42)' if is_state('switch.pi_hole', 'on') else 'rgba(255, 0, 0, .2)' }}  ;
                 }
            .: |
              ha-state-icon {
                color:transparent;
                --icon-symbol-size: 1px;
                      }

              ha-card {
                  border: none !important;
                  background: none;
                      }  
            mushroom-state-info$: |
              .container {
                flex-direction: row !important;
                position: absolute !important;
                width: 79%;
                top: 17px;
                align-items: baseline;
              }
              .primary {
                color: transparent !important;
                position: relative;
                   flex-shrink: 0;
                flex-grow: 1;
                z-index: 1;
              }
              .primary:after {
                content: "{{states('input_number.pht')| int(0)}} Min ";
                position:absolute;
                color: {{ 'lime' if is_state('switch.pi_hole', 'on') else 'red' }}  ;
                left: 1px;
                font-weight: 400;
                top: 3px;
                width: 30px !important;
                z-index: 1 ;
              }
              .secondary {
                color: transparent !important;
                position: relative ;
                flex-shrink: 1;
                flex-grow: 1;
                          }
card_mod:
  style: |
    ha-card {
    background-image: url("/local/pics/wood.png"); 
    border: none;
    }

[1umnyy (Viktor)]

@LiQuid_cOOled

pht

What’s the switch? I need a timer that can be controlled from gui, which turns off the automation of the hood in the bathroom

[LiQuid_cOOled]

The switch is the actual device you are trying to control.

For example my server fan

The remaining timer, input_number and input_boolean are virtual.

Is the hood controlled by a switch connected to HA?

[1umnyy (Viktor)]

yes, the hood is connected to HA

[SaintTDI (Stefano Triff)]

Hi all,

I’m trying to “replicate” the Minimalist Room Card with Mushroom and Card-Mod. I’m doing it with copy&paste of what I found on the web, I’m not so good with card-mod and I need a little bit of help

This is what I’ve done:

The issues that I have are:

1. I would like that the height of the room on the top right “Bagno Ale”, would be the same as all the other rooms.

2. I would like in the bottom half of each card, a big icon in the background so I can easily know which room it is at a glance. Best thing is that it changes color from grey to orange if I turn on a light of that room.

3. Put a shadow to the whole card, or even change other stuff.

Here is the code of the room “Salone” on the top left

Card "Salone"

type: custom:mod-card
style:
  .: |
    ha-card {
       background: var(--ha-card-background, var(--card-background-color, #fff));
    }
  hui-vertical-stack-card:
    $:
      .: |
        #root {
          gap: 0px !important;
        }
card:
  type: horizontal-stack
  cards:
    - type: vertical-stack
      cards:
        - type: custom:mushroom-template-card
          primary: Salone
          icon: mdi:sofa
          entity: light.salone_tavolo_finestra
          icon_color: '{% if is_state(''light.all_salone'',''on'') %} orange {% endif %}'
          tap_action:
            action: toggle
          double_tap_action:
            action: call-service
            service: light.turn_off
            target:
              area_id: soggiorno
            data: {}
          card_mod:
            style: |
              ha-card {
                padding-top: 5px !important;
                padding-bottom: 0px !important;
                box-shadow: none;
                --ha-card-background: none;
              }
        - type: custom:mushroom-chips-card
          chips:
            - type: template
              entity: sensor.riscaldamento_temperature
              content: '{{ states(''sensor.riscaldamento_temperature'') | round(1) }} ºC'
              icon: >-
                {% set state=states('sensor.riscaldamento_temperature')|float(0)
                %} {% if state<20 %} mdi:thermometer-low {% elif state<24 %}
                mdi:thermometer {% else %} mdi:thermometer-high {% endif %}
              icon_color: >-
                {% set state=states('sensor.riscaldamento_temperature')|float(0)
                %} {% if state<20 %} blue {% elif state<24 %} green {% elif
                state<27 %} amber {% else %} red {% endif %}
              tap_action:
                action: navigate
                navigation_path: salone
            - type: template
              entity: sensor.riscaldamento_humidity
              content: '{{ states(''sensor.riscaldamento_humidity'') | round(1) }} %'
              icon: mdi:water-percent
              icon_color: >-
                {% set state=states('sensor.riscaldamento_humidity')|float(0) %}
                {% if state<30 %} blue {% elif state<60 %} green {% elif
                state<80 %} amber {% else %} red {% endif %}
              tap_action:
                action: navigate
                navigation_path: salone
          card_mod:
            style: |
              ha-card {
                --chip-box-shadow: none;
                --chip-background: none;
                --chip-spacing: 0px; 
                margin-top: -10px;
                padding-top: 0px;
                --chip-height: 35px;
              }
        - type: horizontal-stack
          cards:
            - type: custom:mushroom-template-card
              primary: null
              icon: mdi:lightbulb
              entity: light.salone_tavolo_finestra
              icon_color: >-
                {% if is_state('light.salone_tavolo_finestra','on') %} orange {%
                endif %}
              tap_action:
                action: toggle
              card_mod:
                style: |
                  ha-card {
                    padding-top: 5px !important;
                    padding-bottom: 0px !important;
                    box-shadow: none;
                    margin-right: 50px !important;
                    --ha-card-background: none;
                  }
            - type: custom:mushroom-template-card
              primary: null
              icon: mdi:lightbulb
              entity: light.salone_divano_finestra
              icon_color: >-
                {% if is_state('light.salone_divano_finestra','on') %} orange {%
                endif %}
              tap_action:
                action: toggle
              card_mod:
                style: |
                  ha-card {
                    padding-top: 5px !important;
                    padding-bottom: 0px !important;
                    box-shadow: none;
                    margin-right: 50px !important;
                    padding-right: 50px !important;
                    --ha-card-background: none;
                  }
        - type: horizontal-stack
          cards:
            - type: custom:mushroom-template-card
              primary: null
              icon: mdi:lightbulb
              entity: light.salone_tavolo_corridoio
              icon_color: >-
                {% if is_state('light.salone_tavolo_corridoio','on') %} orange
                {% endif %}
              tap_action:
                action: toggle
              card_mod:
                style: |
                  ha-card {
                    padding-top: 5px !important;
                    padding-bottom: 0px !important;
                    box-shadow: none;
                    margin-right: 50px !important;
                    --ha-card-background: none;
                  }
            - type: custom:mushroom-template-card
              primary: null
              icon: mdi:lightbulb
              entity: light.salone_divano_corridoio
              icon_color: >-
                {% if is_state('light.salone_divano_corridoio','on') %} orange
                {% endif %}
              tap_action:
                action: toggle
              card_mod:
                style: |
                  ha-card {
                    padding-top: 5px !important;
                    padding-bottom: 0px !important;
                    box-shadow: none;
                    margin-right: 50px !important;
                    padding-right: 50px !important;
                    --ha-card-background: none;
                  }
        - type: custom:mushroom-chips-card
          chips:
            - type: template
              entity: binary_sensor.aqara_finestra_salone_piccola_contact
              icon: >-
                {% set
                state=states('binary_sensor.aqara_finestra_salone_piccola_contact')
                %}  {% if state=='on'%} mdi:window-open {% else %}
                mdi:window-closed {% endif %}
              icon_color: >-
                {% set
                state=states('binary_sensor.aqara_finestra_salone_piccola_contact')
                %}  {% if state=='on'%} amber {% elif state=='unavailable' %}
                red {% else %} grey {% endif %}
              tap_action:
                action: more-info
            - type: template
              entity: binary_sensor.aqara_finestra_salone_grande_contact
              icon: >-
                {% set
                state=states('binary_sensor.aqara_finestra_salone_grande_contact')
                %}  {% if state=='on'%} mdi:window-open-variant{% else %}
                mdi:window-closed-variant {% endif %}
              icon_color: >-
                {% set
                state=states('binary_sensor.aqara_finestra_salone_grande_contact')
                %}  {% if state=='on'%} amber {% elif state=='unavailable' %}
                red {% else %} grey {% endif %}
              tap_action:
                action: more-info
          card_mod:
            style: |
              ha-card {
                --chip-box-shadow: none;
                --chip-background: none;
                --chip-spacing: 0px; 
                margin-top: -10px;
                padding-top: 0px;
                --chip-height: 40px;
              }
    - type: vertical-stack
      cards:
        - type: custom:mushroom-template-card
          primary: null
          icon: mdi:fire
          entity: climate.salone
          icon_color: >-
            {% set state=states('climate.salone') %}  {% if state=='heat'%}
            amber {% else %} grey {% endif %}
          tap_action:
            action: navigate
            navigation_path: '#salone-hvac'
          card_mod:
            style: |
              ha-card {
                padding-top: 5px !important;
                padding-bottom: 0px !important;
                box-shadow: none;
                margin-left: 100px;
                padding-right: 50px !important;
                --ha-card-background: none;
              }
        - type: custom:mushroom-template-card
          primary: null
          icon: mdi:snowflake
          entity: climate.153931628014499_climate
          icon_color: >-
            {% set state=states('climate.153931628014499_climate') %}  {% if
            state=='off'%} grey {% else %} blue {% endif %}
          tap_action:
            action: more-info
          card_mod:
            style: |
              ha-card {
                padding-top: 5px !important;
                padding-bottom: 0px !important;
                box-shadow: none;
                margin-left: 100px;
                padding-right: 50px !important;
                --ha-card-background: none;
              }
        - type: custom:mushroom-template-card
          primary: null
          icon: mdi:robot-vacuum
          entity: vacuum.gregorio
          icon_color: >-
            {% set state=states('vacuum.gregorio')  %}  {% set
            stanza=states('input_text.gregorio_stanza_pulizia')  %}  {% if state
            == "cleaning" and stanza=='8'%} green   {% elif state == "returning"
            and stanza=='8' %} yellow   {% else  %} grey {% endif %}
          tap_action:
            action: call-service
            service: script.DO_Gregorio_pulisci_stanza
            service_data:
              rooms: 8
          card_mod:
            style: |
              ha-card {
                padding-top: 5px !important;
                padding-bottom: 0px !important;
                box-shadow: none;
                margin-left: 100px;
                padding-right: 50px !important;
                --ha-card-background: none;
              }
              {% if is_state('vacuum.gregorio','cleaning') and
              is_state('input_text.gregorio_stanza_pulizia','8') %}
                ha-card { animation: blink 2s linear infinite; }
                @keyframes blink { 50% {opacity: 0;} }
              {%- endif %}
        - type: custom:mushroom-template-card
          primary: null
          icon: >-
            {% set state=states('cover.tapparelle_salone') %}  {% if
            state=='open'%} mdi:window-shutter-open {% else %}
            mdi:window-shutter {% endif %}
          entity: cover.tapparelle_salone
          icon_color: >-
            {% set state=states('cover.tapparelle_salone') %}  {% if
            state=='open'%} amber {% else %} grey {% endif %}
          tap_action:
            action: more-info
          card_mod:
            style: |
              ha-card {
                padding-top: 5px !important;
                padding-bottom: 0px !important;
                box-shadow: none;
                margin-left: 100px;
                padding-right: 50px !important;
                --ha-card-background: none;
              }

And here is the code of the room “Bagno Ale” on the top right:

Card "Bagno Ale"

type: custom:mod-card
style:
  .: |
    ha-card {
       background: var(--ha-card-background, var(--card-background-color, #fff));
    }
  hui-vertical-stack-card:
    $:
      .: |
        #root {
          gap: 0px !important;
        }
card:
  type: horizontal-stack
  cards:
    - type: vertical-stack
      cards:
        - type: custom:mushroom-template-card
          primary: Bagno Ale
          icon: mdi:face-woman-shimmer
          entity: light.bagno_ale
          icon_color: '{% if is_state(''light.bagno_ale'',''on'') %} orange {% endif %}'
          tap_action:
            action: toggle
          double_tap_action:
            action: call-service
            service: light.turn_off
            target:
              area_id: bagno_piccolo
            data: {}
          card_mod:
            style: |
              ha-card {
                padding-top: 5px !important;
                padding-bottom: 0px !important;
                box-shadow: none;
                --ha-card-background: none;
              }
        - type: custom:mushroom-chips-card
          chips:
            - type: template
              entity: sensor.bagno_piccolo_temperature
              content: '{{ states(''sensor.bagno_piccolo_temperature'') | round(1) }} ºC'
              icon: >-
                {% set state=states('sensor.bagno_piccolo_temperature')|float(0)
                %} {% if state<20 %} mdi:thermometer-low {% elif state<24 %}
                mdi:thermometer {% else %} mdi:thermometer-high {% endif %}
              icon_color: >-
                {% set state=states('sensor.bagno_piccolo_temperature')|float(0)
                %} {% if state<20 %} blue {% elif state<24 %} green {% elif
                state<27 %} amber {% else %} red {% endif %}
              tap_action:
                action: navigate
                navigation_path: bagno_piccolo
            - type: template
              entity: sensor.bagno_piccolo_humidity
              content: '{{ states(''sensor.bagno_piccolo_humidity'') | round(1) }} %'
              icon: mdi:water-percent
              icon_color: >-
                {% set state=states('sensor.bagno_piccolo_humidity')|float(0) %}
                {% if state<30 %} blue {% elif state<60 %} green {% elif
                state<80 %} amber {% else %} red {% endif %}
              tap_action:
                action: navigate
                navigation_path: bagno_piccolo
          card_mod:
            style: |
              ha-card {
                --chip-box-shadow: none;
                --chip-background: none;
                --chip-spacing: 0px; 
                margin-top: -10px;
                padding-top: 0px;
                --chip-height: 35px;
              }
        - type: horizontal-stack
          cards:
            - type: custom:mushroom-template-card
              primary: null
              icon: mdi:lightbulb
              entity: light.bagno_ale
              icon_color: '{% if is_state(''light.bagno_ale'',''on'') %} orange {% endif %}'
              tap_action:
                action: toggle
              card_mod:
                style: |
                  ha-card {
                    padding-top: 5px !important;
                    padding-bottom: 0px !important;
                    box-shadow: none;
                    margin-right: 50px !important;
                    padding-right: 50px !important;
                    --ha-card-background: none;
                  }
    - type: vertical-stack
      cards:
        - type: custom:mushroom-template-card
          primary: null
          icon: mdi:fire
          entity: climate.bagno_piccolo
          icon_color: >-
            {% set state=states('climate.bagno_piccolo') %}  {% if
            state=='heat'%} amber {% else %} grey {% endif %}
          tap_action:
            action: navigate
            navigation_path: '#bagno_ale-hvac'
          card_mod:
            style: |
              ha-card {
                padding-top: 5px !important;
                padding-bottom: 0px !important;
                box-shadow: none;
                margin-left: 100px;
                padding-right: 50px !important;
                --ha-card-background: none;
              }
        - type: custom:mushroom-template-card
          primary: null
          icon: mdi:robot-vacuum
          entity: vacuum.gregorio
          icon_color: >-
            {% set state=states('vacuum.gregorio')  %}  {% set
            stanza=states('input_text.gregorio_stanza_pulizia')  %}  {% if state
            == "cleaning" and stanza=='4'%} green   {% elif state == "returning"
            and stanza=='4' %} yellow   {% else  %} grey {% endif %}
          tap_action:
            action: call-service
            service: script.DO_Gregorio_pulisci_stanza
            service_data:
              rooms: 4
          card_mod:
            style: |
              ha-card {
                padding-top: 5px !important;
                padding-bottom: 0px !important;
                box-shadow: none;
                margin-left: 100px;
                padding-right: 50px !important;
                --ha-card-background: none;
              }
              {% if is_state('vacuum.gregorio','cleaning') and
              is_state('input_text.gregorio_stanza_pulizia','4') %}
                ha-card { animation: blink 2s linear infinite; }
                @keyframes blink { 50% {opacity: 0;} }
              {%- endif %}

The code that I don’t understand, is the first part of both cards:

type: custom:mod-card
style:
  .: |
    ha-card {
       background: var(--ha-card-background, var(--card-background-color, #fff));
    }
  hui-vertical-stack-card:
    $:
      .: |
        #root {
          gap: 0px !important;
        }

I’m trying to put some card-mod/css attributes, like “color: red”, just to see if something changes, but actually nothing changes

Could someone help me please? It would be very much appreciated
Thanks!

[LiQuid_cOOled]

I don’t recommend the copy and paste method.

Please review this first for Mushroom card editing and the second link for almost all additional mod info…

Mushroom Cards Card Mod Styling/Config Guide

This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. Below info is true as of Mushroom Version 3.2.2 and Card Mod Version 3.4.1 (you can also optionally use a theme like i do. i use Minimalist Version 1.3.7). links to each post: Alarm Control Panel Card Chips Card Climate Card Cover Card Entity Card Fan Card Humidifier Card Number Card Lock Card Light Card Media Card …

Card-mod - Add css styles to any lovelace card

Here all my posts which may be useful: NOTE: Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3). And also read this important note to create optimized code. In most examples here a code is NOT optimized - just to describe a DOM navigation. Entity card post rotating icon (by @dolodobendan) disabled tap_action Entities card (including some special row elements - button, section, divider) post font-size for Entities card post Entities card with attributes …

Your posted card was all over the place. I cut a portion of the unnecessary code out so you can play around with the settings.

type: horizontal-stack
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Bagno Ale
        icon: mdi:face-woman-shimmer
        entity: light.bagno_ale
        icon_color: '{% if is_state(''light.bagno_ale'',''on'') %} orange {% endif %}'
        tap_action:
          action: toggle
        double_tap_action:
          action: call-service
          service: light.turn_off
          target:
            area_id: bagno_piccolo
          data: {}
        card_mod:
          style: |
            ha-card {
              padding-top: 5px !important;
              padding-bottom: 0px !important;
              box-shadow: none;
              --ha-card-background: none;
              border: none;
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: sensor.bagno_piccolo_temperature
            content: '{{ states(''sensor.bagno_piccolo_temperature'') | round(1) }} ºC'
            icon: >-
              {% set state=states('sensor.bagno_piccolo_temperature')|float(0)
              %} {% if state<20 %} mdi:thermometer-low {% elif state<24 %}
              mdi:thermometer {% else %} mdi:thermometer-high {% endif %}
            icon_color: >-
              {% set state=states('sensor.bagno_piccolo_temperature')|float(0)
              %} {% if state<20 %} blue {% elif state<24 %} green {% elif
              state<27 %} amber {% else %} red {% endif %}
            tap_action:
              action: navigate
              navigation_path: bagno_piccolo
            card_mod:
              style: |
                ha-card {
                 --chip-box-shadow: none;
                 --chip-background: none;
                 --chip-spacing: 0px; 
                 margin-top: -10px;
                  padding-top: 0px;
                 --chip-height: 55px;
                  border: none;
          - type: template
            entity: sensor.bagno_piccolo_humidity
            content: '{{ states(''sensor.bagno_piccolo_humidity'') | round(1) }} %'
            icon: mdi:water-percent
            icon_color: >-
              {% set state=states('sensor.bagno_piccolo_humidity')|float(0) %}
              {% if state<30 %} blue {% elif state<60 %} green {% elif state<80
              %} amber {% else %} red {% endif %}
            tap_action:
              action: navigate
              navigation_path: bagno_piccolo
            card_mod:
              style: |
                ha-card {
                 --chip-box-shadow: none;
                 --chip-background: none;
                 --chip-spacing: 0px; 
                 margin-top: -10px;
                  padding-top: 0px;
                 --chip-height: 55px;
                  border: none;
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            icon: mdi:lightbulb
            entity: light.bagno_ale
            icon_color: '{% if is_state(''light.bagno_ale'',''on'') %} orange {% endif %}'
            tap_action:
              action: toggle
            card_mod:
              style: |
                ha-card {
                  padding-top: 5px !important;
                  padding-bottom: 0px !important;
                  box-shadow: none;
                  margin-right: 50px !important;
                  padding-right: 50px !important;
                 background: none;
                   border: none;
                }
  - type: vertical-stack
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:fire
        entity: climate.bagno_piccolo
        icon_color: >-
          {% set state=states('climate.bagno_piccolo') %}  {% if state=='heat'%}
          amber {% else %} grey {% endif %}
        tap_action:
          action: navigate
          navigation_path: '#bagno_ale-hvac'
        card_mod:
          style: |
            ha-card {
              padding-top: 5px !important;
              padding-bottom: 0px !important;
              box-shadow: none;
              margin-left: 100px;
              padding-right: 50px !important;
              background: none;
               border: none;
            }
      - type: custom:mushroom-template-card
        primary: null
        icon: mdi:robot-vacuum
        entity: vacuum.gregorio
        icon_color: >-
          {% set state=states('vacuum.gregorio')  %}  {% set
          stanza=states('input_text.gregorio_stanza_pulizia')  %}  {% if state
          == "cleaning" and stanza=='4'%} green   {% elif state == "returning"
          and stanza=='4' %} yellow   {% else  %} grey {% endif %}
        tap_action:
          action: call-service
          service: script.DO_Gregorio_pulisci_stanza
          service_data:
            rooms: 4
        card_mod:
          style: |
            ha-card {
              padding-top: 5px !important;
              padding-bottom: 0px !important;
              box-shadow: none;
              margin-left: 100px;
              padding-right: 50px !important;
             background: none;
              border: none;
            }
            {% if is_state('vacuum.gregorio','cleaning') and
            is_state('input_text.gregorio_stanza_pulizia','4') %}
              ha-card { animation: blink 2s linear infinite; }
              @keyframes blink { 50% {opacity: 0;} }
            {%- endif %}

[president75 (Fabio)]

This is how it works,

thank you so much.

But I can’t enter code into my chip card (I attach code).

Thanks again for the help.

type: custom:button-card
name: SOGGIORNO
icon: mdi:sofa
entity: light.luci_soggiorno
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:
  btn:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          tap_action:
            action: none
          entity: light.luci_soggiorno
          icon: |
            {% if is_state(entity, 'on') %}
              mdi:lightbulb-on
            {% else %}
              mdi:lightbulb-outline
            {% endif %}
          icon_color: |
            {% if is_state(entity, 'on') %}
              black
            {% else %}
              white
            {% endif %}
        - type: template
          tap_action:
            action: none
          entity: switch.interruttori_soggiorno
          icon: |
            {% if is_state(entity, 'on') %}
              mdi:power-socket-eu
            {% else %}
              mdi:power-socket-eu
            {% endif %}
          icon_color: |
            {% if is_state(entity, 'on') %}
              red
            {% else %}
              white
            {% endif %} 
      card_mod:
        style:
          mushroom-template-chip:nth-child(1)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{'rgba(235, 204, 52, 1)' if is_state('light.luci_soggiorno', 'on') else 'rgba(199, 239, 207, 0.3)' }};
                animation: {{ 'ping 2s ease-out infinite' if is_state('light.luci_soggiorno', 'on') }};
                padding: 5px !important;
                border-radius: 100px !important;
                justify-content: center;
                --chip-icon-size: 34px;
                --chip-height: 40px;
                width: var(--chip-height) !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
                }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
            .: |
              ha-state-icon {
                animation: {{ 'illumination 2s infinite' if is_state('light.luci_soggiorno', 'on') }};
              }
              @keyframes illumination {
                0%, 100% { clip-path: inset(0 0 0 0); }
                95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
              }
          mushroom-template-chip:nth-child(2)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{'rgba(140, 199, 161, 1)' if is_state('switch.interruttori_soggiorno', 'on') else 'rgba(140, 199, 161, 0.3)' }};
                animation: {{ 'ping 2s ease-out infinite' if is_state('switch.interruttori_soggiorno', '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(var(--rgb-amber), 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
                }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
            .: |
              ha-state-icon {
                {% if is_state('switch.interruttori_soggiorno', 'on') %}
                animation: tilt 4s steps(1) infinite, blink 4s infinite; 
                transform-origin: 50% 92%;
                {% else %}
                {% endif %}
              }
              @keyframes tilt {
                0%, 100% { transform: rotate(0deg); }
                33% { transform: rotate(8deg); }
                66% { transform: rotate(-8deg); }
              }
              @keyframes blink {
                0%, 20%, 30%, 45%, 55%, 70%, 80%, 100% { clip-path: inset(0 0 0 0); }
                25% { clip-path: polygon(0 0, 100% 0, 100% 53%, 25% 52%, 24% 77%, 75% 77%, 76% 52%, 100% 52%, 100% 100%, 0 100%); }
                50%  { clip-path: polygon(0 0, 100% 0, 100% 53%, 51% 54%, 51% 76%, 76% 77%, 75% 53%, 100% 52%, 100% 100%, 0 100%); }
                75%  { clip-path: polygon(0 0, 100% 0, 100% 53%, 24% 53%, 24% 77%, 47% 77%, 47% 52%, 100% 52%, 100% 100%, 0 100%); }
              }
  btn1:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          tap_action:
            action: none
          entity: climate.soggiorno
          icon: |
            {% if (states["climate.soggiorno"].attributes["hvac_action"] ==
            "heating") %}
              mdi:fire
            {% else %}
              mdi:thermostat
            {% endif %}
          icon_color: |
            {% if (states["climate.soggiorno"].attributes["hvac_action"] ==
            "heating") %}
              black
            {% else %}
              white
            {% endif %}
        - type: template
          tap_action:
            action: none
          entity: media_player.tv_samsung_58
          icon: |
            {% if is_state(entity, 'on') %}
              mdi:television
            {% else %}
              mdi:television
            {% endif %}
          icon_color: |
            {% if is_state(entity, 'on') %}
              blue
            {% else %}
              white  
            {% endif %}
      card_mod:
        style:
          mushroom-template-chip:nth-child(1)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{'rgba(186, 233, 234, 1)' if (states["climate.soggiorno"].attributes["hvac_action"] == "heating") else 'rgba(186, 233, 234, 0.3)' }};
                animation: {{ 'ping 2s ease-out infinite' if (states["climate.soggiorno"].attributes["hvac_action"] == "heating") }};
                padding: 5px !important;
                border-radius: 100px !important;
               justify-content: center;
                --chip-icon-size: 34px;
                --chip-height: 40px;
                width: var(--chip-height) !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
                }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
            .: |
              ha-state-icon {
                {% if (states["climate.soggiorno"].attributes["hvac_action"] == "heating") %}
                animation: fire 1.5s infinite;
                transform-origin: 50% 85%;
                {% else %}
                {% endif %}
              }
              @keyframes fire {
                  0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              }
          mushroom-template-chip:nth-child(2)$:
            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-state-icon {
                {% if is_state('media_player.tv_samsung_58', 'on') %}
                {{ '--icon-animation: tube-on 1s linear, flicker 1s linear 1s infinite alternate;' if is_state(config.entity, 'on') else '--icon-animation: tube-off 2s linear forwards;' }}
              }
              @keyframes tube-off {
                1%, 15% { transform: scale(1, 0.2); }
                40%  { transform: scale(0.2); opacity: 1; }
                100%  { transform: scale(0.2); opacity: 0; }
              }
              @keyframes tube-on {
                0% { transform: scale(0.2); opacity: 0; }
                5%  { transform: scale(1, 0.2); opacity: 0.3; }
                15%  { transform: scale(1); opacity: 0.4; }
                100%  { transform: scale(1); opacity: 1; }
              }
              @keyframes flicker {
                0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { opacity: 0.6; }
                32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { opacity: 1; }
              }
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: '#72F3CD'
    - border-radius: 200px
  icon:
    - width: 35px
    - color: black
    - opacity: '0.6'
    - margin: 0 0 18px 15px
  card:
    - padding: 10px 20px 10px 10px
    - border: solid 2px rgba(114, 243, 205, 1)
  custom_fields:
    btn:
      - justify-content: end
      - align-self: start
    btn1:
      - justify-content: end
      - align-self: start
  name:
    - justify-self: start
    - align-self: start
    - font-size: 18px
    - font-weight: 500
    - color: '#72F3CD'
    - margin-bottom: 5px
  label:
    - justify-self: start
    - align-self: start
    - font-size: 16px
    - font-weight: 500
    - margin-bottom: 50px
    - color: '#fff'
type or paste code here

[LiQuid_cOOled]

This will add what you are looking.

type: custom:button-card
name: SOGGIORNO
icon: mdi:sofa
entity: light.luci_soggiorno
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:
  btn:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          tap_action:
            action: none
          entity: light.luci_soggiorno
          icon: |
            {% if is_state(entity, 'on') %}
              mdi:lightbulb-on
            {% else %}
              mdi:lightbulb-outline
            {% endif %}
          icon_color: |
            {% if is_state(entity, 'on') %}
              black
            {% else %}
              white
            {% endif %}
        - type: template
          tap_action:
            action: none
          entity: switch.interruttori_soggiorno
          icon: |
            {% if is_state(entity, 'on') %}
              mdi:power-socket-eu
            {% else %}
              mdi:power-socket-eu
            {% endif %}
          icon_color: |
            {% if is_state(entity, 'on') %}
              red
            {% else %}
              white
            {% endif %} 
      card_mod:
        style:
          mushroom-template-chip:nth-child(1)$:
            mushroom-chip$: |
              ha-card:after {
                    content: " {{ states.light | rejectattr('attributes.entity_id', 'defined') | selectattr('state', 'eq', 'on') | list | count }}";
                    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% 50%;
                    top: -5px;
                    right: -10px;
                    width: 20px;
                    height: 20px;
                    font-size: 10px;
                    z-index: 1;
                                  }
              ha-card {
                --chip-background: {{'rgba(235, 204, 52, 1)' if is_state('light.luci_soggiorno', 'on') else 'rgba(199, 239, 207, 0.3)' }};
                animation: {{ 'ping 2s ease-out infinite' if is_state('light.luci_soggiorno', 'on') }};
                padding: 5px !important;
                border-radius: 100px !important;
                justify-content: center;
                --chip-icon-size: 34px;
                --chip-height: 40px;
                width: var(--chip-height) !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
                }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
            .: |
              ha-state-icon {
                animation: {{ 'illumination 2s infinite' if is_state('light.luci_soggiorno', 'on') }};
              }
              @keyframes illumination {
                0%, 100% { clip-path: inset(0 0 0 0); }
                95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
              }
          mushroom-template-chip:nth-child(2)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{'rgba(140, 199, 161, 1)' if is_state('switch.interruttori_soggiorno', 'on') else 'rgba(140, 199, 161, 0.3)' }};
                animation: {{ 'ping 2s ease-out infinite' if is_state('switch.interruttori_soggiorno', '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(var(--rgb-amber), 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
                }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
            .: |
              ha-state-icon {
                {% if is_state('switch.interruttori_soggiorno', 'on') %}
                animation: tilt 4s steps(1) infinite, blink 4s infinite; 
                transform-origin: 50% 92%;
                {% else %}
                {% endif %}
              }
              @keyframes tilt {
                0%, 100% { transform: rotate(0deg); }
                33% { transform: rotate(8deg); }
                66% { transform: rotate(-8deg); }
              }
              @keyframes blink {
                0%, 20%, 30%, 45%, 55%, 70%, 80%, 100% { clip-path: inset(0 0 0 0); }
                25% { clip-path: polygon(0 0, 100% 0, 100% 53%, 25% 52%, 24% 77%, 75% 77%, 76% 52%, 100% 52%, 100% 100%, 0 100%); }
                50%  { clip-path: polygon(0 0, 100% 0, 100% 53%, 51% 54%, 51% 76%, 76% 77%, 75% 53%, 100% 52%, 100% 100%, 0 100%); }
                75%  { clip-path: polygon(0 0, 100% 0, 100% 53%, 24% 53%, 24% 77%, 47% 77%, 47% 52%, 100% 52%, 100% 100%, 0 100%); }
              }
  btn1:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          tap_action:
            action: none
          entity: climate.soggiorno
          icon: |
            {% if (states["climate.soggiorno"].attributes["hvac_action"] ==
            "heating") %}
              mdi:fire
            {% else %}
              mdi:thermostat
            {% endif %}
          icon_color: |
            {% if (states["climate.soggiorno"].attributes["hvac_action"] ==
            "heating") %}
              black
            {% else %}
              white
            {% endif %}
        - type: template
          tap_action:
            action: none
          entity: media_player.tv_samsung_58
          icon: |
            {% if is_state(entity, 'on') %}
              mdi:television
            {% else %}
              mdi:television
            {% endif %}
          icon_color: |
            {% if is_state(entity, 'on') %}
              blue
            {% else %}
              white  
            {% endif %}
      card_mod:
        style:
          mushroom-template-chip:nth-child(1)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{'rgba(186, 233, 234, 1)' if (states["climate.soggiorno"].attributes["hvac_action"] == "heating") else 'rgba(186, 233, 234, 0.3)' }};
                animation: {{ 'ping 2s ease-out infinite' if (states["climate.soggiorno"].attributes["hvac_action"] == "heating") }};
                padding: 5px !important;
                border-radius: 100px !important;
               justify-content: center;
                --chip-icon-size: 34px;
                --chip-height: 40px;
                width: var(--chip-height) !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
                }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
            .: |
              ha-state-icon {
                {% if (states["climate.soggiorno"].attributes["hvac_action"] == "heating") %}
                animation: fire 1.5s infinite;
                transform-origin: 50% 85%;
                {% else %}
                {% endif %}
              }
              @keyframes fire {
                  0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                  95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                  100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              }
          mushroom-template-chip:nth-child(2)$:
            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-state-icon {
                {% if is_state('media_player.tv_samsung_58', 'on') %}
                {{ '--icon-animation: tube-on 1s linear, flicker 1s linear 1s infinite alternate;' if is_state(config.entity, 'on') else '--icon-animation: tube-off 2s linear forwards;' }}
              }
              @keyframes tube-off {
                1%, 15% { transform: scale(1, 0.2); }
                40%  { transform: scale(0.2); opacity: 1; }
                100%  { transform: scale(0.2); opacity: 0; }
              }
              @keyframes tube-on {
                0% { transform: scale(0.2); opacity: 0; }
                5%  { transform: scale(1, 0.2); opacity: 0.3; }
                15%  { transform: scale(1); opacity: 0.4; }
                100%  { transform: scale(1); opacity: 1; }
              }
              @keyframes flicker {
                0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { opacity: 0.6; }
                32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { opacity: 1; }
              }
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: '#72F3CD'
    - border-radius: 200px
  icon:
    - width: 35px
    - color: black
    - opacity: '0.6'
    - margin: 0 0 18px 15px
  card:
    - padding: 10px 20px 10px 10px
    - border: solid 2px rgba(114, 243, 205, 1)
  custom_fields:
    btn:
      - justify-content: end
      - align-self: start
    btn1:
      - justify-content: end
      - align-self: start
  name:
    - justify-self: start
    - align-self: start
    - font-size: 18px
    - font-weight: 500
    - color: '#72F3CD'
    - margin-bottom: 5px
  label:
    - justify-self: start
    - align-self: start
    - font-size: 16px
    - font-weight: 500
    - margin-bottom: 50px
    - color: '#fff'

[president75 (Fabio)]

Thank you so much, you are the best.

[berkans (Berkan Sezer)]

@LiQuid_cOOled

@Ildar_Gabdullin

Thank you very much for providing this information. I convey my gratitude to the friend who shares it. @Ildar_Gabdullin

This was very important for me because there were some inconsistencies in the last dashboard I made. Even though I tried this method before, I couldn’t get any results, but now that I did it properly, it worked. Thank you very much again

By the way this is my last dashboard. I am still working on it. A strava app inspired dashboard.

[roydestroy]

Hello, I am trying to have a chip at the bottom right of a template card using the stack-in card. I been successful in doing that part but trying to animate the chip card has been impossible for me. Can someone help? Here is the code:

  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_opening
            state: 'off'
        chip:
          type: template
          icon_color: red
          icon: mdi:door-open
    alignment: end
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            {% if binary_sensor.lumi_lumi_sensor_magnet_aq2_opening', 'off') %}
              animation: pulse 2s ease-in-out infinite;
            {% endif %}
          }
        .: |
          ha-card {
            top: -42px;
            z-index: 0;                
          }
          :host {
            --ha-card-border-width: 0px;
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

[LiQuid_cOOled]

Here you go. Several issues.

1. Chips require more complex mod code

card_mod:
  style:
    mushroom-conditional-chip:nth-child(1):
      mushroom-template-chip$: |

2. Your IF statement was incorrect. This is the corrected statement.
   {% if states('binary_sensor.lumi_lumi_sensor_magnet_aq2_opening') == 'off' %}

3. The animation required @keyframes

type: custom:mushroom-chips-card
chips:
      - type: conditional
        conditions:
          - entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_opening
            state: 'off'
        chip:
          type: template
          icon_color: red
          icon: mdi:door-open
alignment: end
card_mod:
  style:
    mushroom-conditional-chip:nth-child(1):
      mushroom-template-chip$: |
        ha-state-icon {
        {% if states('binary_sensor.lumi_lumi_sensor_magnet_aq2_opening') == 'off' %}
          animation: pulse 2s ease-in-out infinite;
        {% endif %}
          }
        @keyframes pulse {
        0%  {pacity: 1}     
        50% {opacity: 0}
        100% {opacity: 1}
            }

       
    .: |
          ha-card {
            top: -42px;
            z-index: 0;                
          }
          :host {
            --ha-card-border-width: 0px;
          }

[Kixx (Sjoerd)]

Hi all,

This evening i’m struggling with the alignment of 3 mushroom cards in a horizontal stack. I searched and tried some options from this forum, but still didn’t find a solution yet.

Could somebody give me a bump in the correct direction on how to get my buttons centered horizontally (on the green line)?

My code:

type: horizontal-stack
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: action
        tap_action:
          action: navigate
          navigation_path: /dashboard-mobile/home
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon: mdi:arrow-left
  - type: custom:mushroom-title-card
    title: Woonkamer
    alignment: center
    title_tap_action:
      action: none
    subtitle_tap_action:
      action: none
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.time
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
    card_mod:
      style: |
        ha-card {
        background: none;
        box-shadow: none;
        text-align: center
        }
    alignment: end

[LiQuid_cOOled]

I’m not sure I understand where you want the chips. Between the orange lines?

[roydestroy]

Thank you so much! I am trying to understand but I guess I am missing something. Can you explain what is the mistake in this one?

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: Home Control
    secondary: '{{ states(''sensor.temp_avg'') }}°C - {{ states(''sensor.hum_avg'') }}%'
    icon: >-
      {% if is_state('climate.living_room_ac', 'heat') or
      (state_attr('climate.living_room', 'temperature') > 15) or
      is_state('climate.bedroom_ac', 'heat') or
      (is_state('binary_sensor.temperature_determiner', 'on') and
      (is_state('input_boolean.living_room_ac_toggle', 'on') or
      is_state('input_boolean.bedroom_ac_toggle', 'on'))) %}
        mdi:fire
      {% elif (is_state('climate.living_room_ac', 'cool') or
      is_state('climate.bedroom_ac', 'cool') or
      (is_state('binary_sensor.temperature_determiner', 'off') and
      (is_state('input_boolean.living_room_ac_toggle', 'on') or
      is_state('input_boolean.bedroom_ac_toggle', 'on')))) and
      (state_attr('climate.living_room', 'temperature') < 15) %}
        mdi:snowflake
      {% else %}
        mdi:home
      {% endif %}
    icon_color: >-
      {% if is_state('climate.living_room_ac', 'heat') or
      (state_attr('climate.living_room', 'temperature') > 15) or
      is_state('climate.bedroom_ac', 'heat') or
      (is_state('binary_sensor.temperature_determiner', 'on') and
      (is_state('input_boolean.living_room_ac_toggle', 'on') or
      is_state('input_boolean.bedroom_ac_toggle', 'on'))) %}
        red
      {% elif (is_state('climate.living_room_ac', 'cool') or
      is_state('climate.bedroom_ac', 'cool') or
      (is_state('binary_sensor.temperature_determiner', 'off') and
      (is_state('input_boolean.living_room_ac_toggle', 'on') or
      is_state('input_boolean.bedroom_ac_toggle', 'on')))) and
      (state_attr('climate.living_room', 'temperature') < 15) %}
        blue
      {% else %}
        yellow
      {% endif %}
    layout: vertical
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: fire 1.5s infinite;
            transform-origin: 50% 85%;
          }
          @keyframes fire {
              0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
              5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
              15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
              30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
              35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
              45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
              60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
              70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
              85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
              90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
              100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          }

Thank you!