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

[dimitri.landerloos]

You are right. i was just saying that using the chip card as a base will ensure it works on all screen sizes. but you still need to figure out how to size the width chips themselves dynamically. the height being set shouldnt matter at all.

i found that this code works courtesy of @eMeF

Code

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: mdi:home
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:arrow-up
        card_mod:
          style: |
            ha-card {
              justify-content: center;
              border: 1 !important;
              box-shadow: none !important;
              transition: 1s;
              border-radius: 10px !important;
              background: rgba(var(--rgb-disabled), 0.2) !important;
            }
            ha-card:hover {
              background: red !important;
            }
      - type: template
        icon: mdi:square
        card_mod:
          style: |
            ha-card {
              justify-content: center;
              border: 1 !important;
              box-shadow: none !important;
              transition: 1s;
              border-radius: 10px !important;
              background: rgba(var(--rgb-disabled), 0.2) !important;
            }
            ha-card:hover {
              background: red !important;
            }
      - type: template
        icon: mdi:arrow-down
        card_mod:
          style: |
            ha-card {
              justify-content: center;
              border: 1 !important;
              box-shadow: none !important;
              transition: 1s;
              border-radius: 10px !important;
              background: rgba(var(--rgb-disabled), 0.2) !important;
            }
            ha-card:hover {
              background: red !important;
            }
    alignment: justify
    card_mod:
      style: |
        mushroom-template-chip {
          width: 100%; 
        }
        div.chip-container {
          justify-content: space-evenly;
          flex-wrap: nowrap;
        }
        ha-card {
          margin: 0px 12px 12px;
          --chip-spacing: 12px !important;
        }

Card-mod - Add css styles to any lovelace card

Awesome, thanks @Roderik! Looks only slightly better but it is much safer in terms of the reusability of the card. Buttons now adjust the width % automatically! [image]

Code

type: custom:stack-in-card cards: - type: custom:mushroom-template-card primary: Notify Michal when Away icon: mdi:message-badge entity: input_select.doorbell_notification_away_michal icon_color: blue - type: custom:mushroom-chips-card chips: - type: template entity: input_select.do…

[Stevengerrard08]

Hello!

I have just updated to the latest version. But now my navigation bar is up top instead of at the bottom.
Can someone help me with what I should write in the theme file to move it back down again?

[dimitri.landerloos]

first thing i would do is see if there is a card-mod update for you to install as well. install it, then clear your browser/apps cache and see if that helps

[filikun]

The first card you got there looks really nice with that black information bar. Can you share your code?

[tw0ce]

Is there a way to adjust the spaxing between primary and secondary information of a template card uaing card_mod? Thanks in advance and best regards

[dimitri.landerloos]

in my guide:

Mushroom Cards Card Mod Styling/Config Guide

Template Card

Sections are split: Main Icon Styling You can style the main icon like this: Change the icon type/mdi. [image] Of course for the template card you could also just use the visual editor… card_mod: style: | ha-state-icon { --card-mod-icon: mdi:mushroom; } Change the icon color. [image] Of course for the template card you could also just use the visual editor… card_mod: style: | ha-state-icon { color: orange; } Change icon size. [image] car…

@dimitri.landerloos

Change Alligment

Different allignment options can be found here .

card_mod:
  style:
    mushroom-state-info$: |
      .container {
        align-items: end;
      }

Change Rows.

You can find the different types of flex direction here . yaml courtesy of @zanixmechanix

card_mod:
  style:
    mushroom-state-info$: |
      .container {
        flex-direction: row !important;
        align-items: baseline;
        gap: 10px;
      }

doesnt tell you exactly what you want, but you could always just do:

    card_mod:
      style:
        mushroom-state-info$: |
          .container {
            gap: 20px;
          }

[GTunney]

I just wanted to pass on a big thanks to Dimitri and Rhys for their numerous examples and code. I decided to redesign my entire dashboard and have made good progress so far on the homepage. Still a long way to go but I’m happy. Room cards change picture based on light status so if lights are off it will show picture of room with lights off.

[berkans (Berkan Sezer)]

I will when I have some spare time. Writing a manual takes hours. But with the manual you can easily configure the dashboard to your needs.

[drashish87]

Nice can you share how did you do your welcome card with chips please?

[Mess (M. van den Braak)]

Hi,

First, Lovely mushroom card! Bravo!

Second, Is there a way to change the dimming method on the light cards?

Instead of adjusting immediately while sliding, sending the adjust only after you release the slider. Like the others.

I notice that some dimmers prefer that.

Thanks!

[filikun]

Nice card, mind sharing the code?

[Stoyan_Dimitrov]

Hey guys!

It might be a stupid question, however, I think I am facing some slow respond to taps on the mushroom cards. I do feel there is one second or smth like that of a delay when I click on a switch/light/any-actionable thing. Is it only me?

I tried searching the thread but didnt find anything similar? Anyone aware of how I can reduce this ‘delay’?

[Greg.o (Greg)]

Hello,

I’m trying to create a card with my temperature and humidity sensors. I try to put a title on the card, by using the area_name of the area where my sensor is :

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: {{ area_name('Temp_Hum_1') }}    
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Température
        icon: mdi:home-thermometer-outline
        secondary: '{{ states.sensor.temp_hum_1_temperature.state_with_unit }}'
      - type: custom:mushroom-template-card
        primary: Humidité
        icon: mdi:home-thermometer-outline
        secondary: '{{ states.sensor.temp_hum_1_humidity.state_with_unit }}'

Unfortunately, it’s not working : I’ve got no title :

An idea how to sort it out ?

[berkans (Berkan Sezer)]

I was previously using a birthday card on my dashboard. This card showed only one person’s birthday. For a long time, I wanted to design a card where I could visually see the upcoming birthdays of several people at the same time. I was able to do this with the list calendar events feature that comes in Home Assistant 2023.9 ​​version.

This card currently lists 4 people who have birthdays in the coming days. The cards also work in a dynamic structure and shows the time left until the birthday. When the birthday is over, it renews itself and moves on to the next person’s birthday card. I will also put a button on the cards so that it will activate an automation that will give me an extra reminder. By the way, the card shows only 4 people, but this number can be increased if desired. As far as I know, there is no card or integration that visually displays birthdays on the Home assistant. I will also use these cards in the tablet interface that can be controlled with Alexa, which I will build in the coming weeks.

Similarly, I created a card to follow football matches.

[GTunney]

Its just a combination of different stack in cards.

Here’s the code.

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: masonry
    layout: {}
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: alarm_control_panel.yale_smart_alarm
            content_info: none
            icon: >-
              {{ 'mdi:shield-off' if
              is_state('alarm_control_panel.yale_smart_alarm', 'disarmed') else
              'mdi:shield-check' }}
            icon_color: >-
              {{ 'red' if is_state('alarm_control_panel.yale_smart_alarm',
              'disarmed') else 'green' }}
            name: Alarm
          - type: template
            entity: lock.front_door
            icon: >-
              {{ 'mdi:lock' if is_state('lock.front_door', 'locked') else
              'mdi:lock-open-variant' }}
            icon_color: '{{ ''green'' if is_state(''lock.front_door'', ''locked'') else ''red'' }}'
            content: null
            hold_action:
              action: call-service
              service: lock.unlock
              data:
                code: 'XXXX'
              target:
                entity_id: lock.front_door
            tap_action:
              action: more-info
          - type: spacer
          - type: weather
            entity: weather.winshields_way
            show_conditions: true
            show_temperature: true
      - type: custom:mushroom-title-card
        title: |-
          {% set time = now().hour %}
          {% if (time >= 18) %} 
           Good Evening, {{user}}!
          {% elif (time >= 12) %}
           Good Afternoon, {{user}}!
          {% elif (time >= 5) %}
           Good Morning, {{user}}!
          {% else %}
           Hello, {{user}}
          {% endif %}
        subtitle: ''
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              background: none;
              border-radius: 0px;
              margin-left: auto;
              margin-right: auto;
              margin-bottom: -25px;
              margin-top: -25px;
            }
      - type: horizontal-stack
        cards:
          - type: custom:stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: >-
                  {{ states('person.greg').replace('not_home',
                  'Away').title() }}
                hold_action:
                  action: toggle
                tap_action:
                  action: navigate
                  navigation_path: /home-v2/hallway
                fill_container: true
                layout: vertical
                multiline_secondary: false
                card_mod:
                  style:
                    mushroom-state-info$: |
                      .primary {
                        text-shadow: 1px 0px 2px black;
                        --card-primary-font-weight: 400;
                        --primary-text-color: white;
                        --card-primary-font-size: 12px;
                        #align-items: end;
                        margin-top: 70px;
                        inline-size: 75px;
                        margin-left: auto;
                        text-transform: capitalize;
                        text-align: left;
                        text-indent: 7px;
                      }
                      .secondary {
                        --card-secondary-font-size: 13px;
                          text-shadow: 0px 0px 5px black;
                        --secondary-text-color: white;
                        --card-secondary-font-weight: 350;
                          margin-top: -5px;
                          margin-left: -35px;
                          text-transform: capitalize;
                      } 
                    .: |
                      :host {
                      {% if is_state('person.greg', 'home') %}
                        background: url('/local/images/persons/greg.JPG') center;
                        background-size: contain;
                        background-position-y: -30px;
                        #filter: grayscale(70%);
                        #background-color: rgba(var(--rgb-card-background-color), 0.0);
                      {%- else -%}
                        background: url('/local/images/persons/greg.JPG') center;
                        background-size: contain;
                        background-position-y: -30px;
                        #background-blend-mode: overlay;
                        filter: grayscale(100%);
                        #background-color: rgba(var(--rgb-card-background-color), 0.0);
                      {% endif %}
                        --mush-icon-size: 0px;
                        height: 200px;
                        margin-left: -15px !important;
                        margin-top: -70px !important;
                      }
                      mushroom-shape-icon {
                        --shape-color: rgba(var(--rgb-{{ 'orange' if is_state('light.hallway_lamp', 'on') else 'disabled' }}), 0.4) !important;
                      }
            card_mod:
              style: |
                ha-card {
                  height: 75px;
                  width: 75px;
                  border-radius: 7.5px;
                  margin-left: auto;
                  margin-right: auto;
                }
          - type: custom:stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: >-
                  {{ states('person.sarah').replace('not_home',
                  'Away').title() }}
                hold_action:
                  action: toggle
                tap_action:
                  action: navigate
                  navigation_path: /home-v2/hallway
                fill_container: true
                layout: vertical
                multiline_secondary: false
                card_mod:
                  style:
                    mushroom-state-info$: |
                      .primary {
                        text-shadow: 1px 0px 2px black;
                        --card-primary-font-weight: 400;
                        --primary-text-color: white;
                        --card-primary-font-size: 12px;
                        #align-items: end;
                        margin-top: 70px;
                        inline-size: 75px;
                        margin-left: auto;
                        text-transform: capitalize;
                        text-align: left;
                        text-indent: 7px;
                      }
                      .secondary {
                        --card-secondary-font-size: 13px;
                          text-shadow: 0px 0px 5px black;
                        --secondary-text-color: white;
                        --card-secondary-font-weight: 350;
                          margin-top: -5px;
                          margin-left: -35px;
                          text-transform: capitalize;
                      } 
                    .: |
                      :host {
                      {% if is_state('person.sarah', 'home') %}
                        background: url('/local/images/persons/sarah.JPG') center;
                        background-size: contain;
                        background-position-y: -30px;
                        #filter: grayscale(70%);
                        #background-color: rgba(var(--rgb-card-background-color), 0.0);
                      {%- else -%}
                        background: url('/local/images/persons/sarah.JPG') center;
                        background-size: contain;
                        background-position-y: -30px;
                        #background-blend-mode: overlay;
                        filter: grayscale(100%);
                        #background-color: rgba(var(--rgb-card-background-color), 0.0);
                      {% endif %}
                        --mush-icon-size: 0px;
                        height: 200px;
                        margin-left: -15px !important;
                        margin-top: -70px !important;
                      }
                      mushroom-shape-icon {
                        --shape-color: rgba(var(--rgb-{{ 'orange' if is_state('light.hallway_lamp', 'on') else 'disabled' }}), 0.4) !important;
                      }
            card_mod:
              style: |
                ha-card {
                  height: 75px;
                  width: 75px;
                  border-radius: 7.5px;
                  margin-left: auto;
                  margin-right: auto;
                }
          - type: custom:stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: >-
                  {{ states('person.cameron').replace('not_home',
                  'Away').title() }}
                hold_action:
                  action: toggle
                tap_action:
                  action: navigate
                  navigation_path: /home-v2/hallway
                fill_container: true
                layout: vertical
                multiline_secondary: false
                card_mod:
                  style:
                    mushroom-state-info$: |
                      .primary {
                        text-shadow: 1px 0px 2px black;
                        --card-primary-font-weight: 400;
                        --primary-text-color: white;
                        --card-primary-font-size: 12px;
                        #align-items: end;
                        margin-top: 70px;
                        inline-size: 75px;
                        margin-left: auto;
                        text-transform: capitalize;
                        text-align: left;
                        text-indent: 7px;
                      }
                      .secondary {
                        --card-secondary-font-size: 13px;
                          text-shadow: 0px 0px 5px black;
                        --secondary-text-color: white;
                        --card-secondary-font-weight: 350;
                          margin-top: -5px;
                          margin-left: -35px;
                          text-transform: capitalize;
                      } 
                    .: |
                      :host {
                      {% if is_state('person.cameron', 'home') %}
                        background: url('/local/images/persons/cameron.JPG') center;
                        background-size: contain;
                        background-position-y: -20px;
                        #filter: grayscale(70%);
                        #background-color: rgba(var(--rgb-card-background-color), 0.0);
                      {%- else -%}
                        background: url('/local/images/persons/cameron.JPG') center;
                        background-size: contain;
                        background-position-y: -20px;
                        #background-blend-mode: overlay;
                        filter: grayscale(100%);
                        #background-color: rgba(var(--rgb-card-background-color), 0.0);
                      {% endif %}
                        --mush-icon-size: 0px;
                        height: 200px;
                        margin-left: -15px !important;
                        margin-top: -70px !important;
                      }
                      mushroom-shape-icon {
                        --shape-color: rgba(var(--rgb-{{ 'orange' if is_state('light.hallway_lamp', 'on') else 'disabled' }}), 0.4) !important;
                      }
            card_mod:
              style: |
                ha-card {
                  height: 75px;
                  width: 75px;
                  border-radius: 7.5px;
                  margin-left: auto;
                  margin-right: auto;
                }
          - type: custom:stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: >-
                  {{ states('person.rhys').replace('not_home',
                  'Away').title() }}
                hold_action:
                  action: toggle
                tap_action:
                  action: navigate
                  navigation_path: /home-v2/hallway
                fill_container: true
                layout: vertical
                multiline_secondary: false
                card_mod:
                  style:
                    mushroom-state-info$: |
                      .primary {
                        text-shadow: 1px 0px 2px black;
                        --card-primary-font-weight: 400;
                        --primary-text-color: white;
                        --card-primary-font-size: 12px;
                        #align-items: end;
                        margin-top: 70px;
                        inline-size: 75px;
                        margin-left: auto;
                        text-transform: capitalize;
                        text-align: left;
                        text-indent: 7px;
                      }
                      .secondary {
                        --card-secondary-font-size: 13px;
                          text-shadow: 0px 0px 5px black;
                        --secondary-text-color: white;
                        --card-secondary-font-weight: 350;
                          margin-top: -5px;
                          margin-left: -35px;
                          text-transform: capitalize;
                      } 
                    .: |
                      :host {
                      {% if is_state('person.rhys', 'home') %}
                        background: url('/local/images/persons/rhys.JPG') center;
                        background-size: contain;
                        background-position-y: -20px;
                        #filter: grayscale(70%);
                        #background-color: rgba(var(--rgb-card-background-color), 0.0);
                      {%- else -%}
                        background: url('/local/images/persons/rhys.JPG') center;
                        background-size: contain;
                        background-position-y: -20px;
                        #background-blend-mode: overlay;
                        filter: grayscale(100%);
                        #background-color: rgba(var(--rgb-card-background-color), 0.0);
                      {% endif %}
                        --mush-icon-size: 0px;
                        height: 200px;
                        margin-left: -15px !important;
                        margin-top: -70px !important;
                      }
                      mushroom-shape-icon {
                        --shape-color: rgba(var(--rgb-{{ 'orange' if is_state('light.hallway_lamp', 'on') else 'disabled' }}), 0.4) !important;
                      }
            card_mod:
              style: |
                ha-card {
                  height: 75px;
                  width: 75px;
                  border-radius: 7.5px;
                  margin-left: auto;
                  margin-right: auto;
      - type: custom:stack-in-card
        cards:
          - type: custom:layout-card
            layout_type: horizontal
            layout: {}
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: menu
                  - type: back
                  - type: alarm-control-panel
                    entity: alarm_control_panel.yale_smart_alarm
                    content_info: none
                    name: Alarm
                  - type: template
                    entity: lock.front_door
                    icon: >-
                      {{ 'mdi:lock' if is_state('lock.front_door', 'locked')
                      else 'mdi:lock-open' }}
                    icon_color: >-
                      {{ 'green' if is_state('lock.front_door', 'locked') else
                      'red' }}
                    content: null
                    tap_action:
                      action: more-info
                  - type: conditional
                    conditions:
                      - entity: light.all_lights
                        state: 'on'
                    chip:
                      type: template
                      icon: mdi:lightbulb
                      content: >-
                        {{ expand(states.light.all_lights) | selectattr(
                        'state', 'eq', 'on') | list | count }}
                      tap_action:
                        action: more-info
                      entity: light.all_lights
                      icon_color: grey
                  - type: conditional
                    conditions:
                      - entity: media_player.livingroomtv
                        state: 'on'
                    chip:
                      type: template
                      icon_color: grey
                      icon: mdi:cast
                      content: |-
                        {{ expand(states.media_player.all_media_players) 
                         | rejectattr( 'state', 'in', ['idle']) 
                         | rejectattr( 'state', 'in', ['standby'])
                         | rejectattr( 'state', 'in', ['off'])
                         | rejectattr( 'state', 'in', ['paused'])
                         | list | count }}
                      tap_action:
                        action: more-info
                      entity: media_player.all_media_players
                  - type: conditional
                    conditions:
                      - entity: binary_sensor.garage
                        state: 'on'
                    chip:
                      type: template
                      icon_color: grey
                      icon: mdi:garage-open
                      tap_action:
                        action: more-info
                      entity: binary_sensor.garage
        card_mod:
          style: |
            ha-card {
              #padding: 0px;
              box-shadow: none;
              border-radius: none;
              background-color: white;
              margin-left: auto;
              margins-right: auto;
              border: none;
            }
card_mod:
  style: |
    ha-card {
      padding: 2px;
      background: rgba(var(--rgb-primary-text-color), 0.00);
      box-shadow: 1px;
      border-radius: 15px;
      background-color: white;
    }

[GTunney]

Thanks, sure here is the code for a room tile.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Hallway
    secondary: >-
      {{ states('sensor.sonoff_a44001d0c1_temperature') | round (1) }}°C - {{
      states('sensor.sonoff_a44001d0c1_humidity') | round (0) }}%
    icon: none
    entity: light.hallway_lamp
    hold_action:
      action: toggle
    tap_action:
      action: navigate
      navigation_path: /home-v2/hallway
    icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            text-shadow: 0px 0px 5px black;
            --card-primary-font-weight: 400;
            --primary-text-color: white;
            --card-primary-font-size: 20px;
            align-items: end;
            margin-top: 170px;
            inline-size: 180px;
          }
          .secondary {
            --card-secondary-font-size: 13px;
              text-shadow: 0px 0px 5px black;
            --secondary-text-color: white;
            --card-secondary-font-weight: 350;
              margin-top: -4px;
          } 
        .: |
          :host {
          {% if is_state('light.hallway_lamp', 'on') %}
            background: url('/local/images/areas/hallway.PNG') center;
            background-size: cover;
            background-blend-mode: overlay;
            #filter: grayscale(70%);
            background-color: rgba(var(--rgb-card-background-color), 0.0);
          {% else %}
            background: url('/local/images/areas/hallwayoff.jpeg') center;
            background-size: cover;
            background-blend-mode: overlay;
            background-color: rgba(var(--rgb-card-background-color), 0.0);
          {% endif %}
             --mush-icon-size: 0px;
            height: 220px;
            margin-left: -15px !important;
            margin-top: -70px !important;
          }
          mushroom-shape-icon {
            --shape-color: rgba(var(--rgb-{{ 'orange' if is_state('light.hallway_lamp', 'on') else 'disabled' }}), 0.4) !important;
          }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: binary_sensor.front_door
            state: 'on'
        chip:
          type: template
          entity: binary_sensor.front_door
          icon_color: red
          icon: mdi:door-open
          tap_action:
            action: more-info
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: lock.front_door
            state: unlocked
        chip:
          type: template
          entity: lock.front_door
          icon_color: red
          icon: mdi:lock-open-variant
          tap_action:
            action: more-info
          hold_action:
            action: none
      - type: template
        entity: light.hallway_lamp
        icon: >-
          {{ 'mdi:lightbulb' if is_state('light.hallway_lamp', 'on') else
          'mdi:lightbulb-outline' }}
        icon_color: '{{ ''orange'' if is_state(''light.hallway_lamp'', ''on'') else ''grey'' }}'
        content: >-
          {{ expand(states.light.hallway_lamp) | selectattr( 'state', 'eq',
          'on') | list | count }}
        tap_action:
          action: call-service
          service: light.toggle
          target:
            area_id: hallway
        hold_action:
          action: more-info
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: -15px;
          margin-top: -4px;
        } 
card_mod:
  style: |
    ha-card {
      height: 180px;
      width: 180px;
      margin-left: auto;
      margin-right: auto;
      {% if is_state('light.hallway_lamp', 'on') %}
          #box-shadow: 0 0 20px rgba(245, 173, 66, 0.5);
          #border-radius: 10px;
          #background: rgba(245, 173, 66, 0.3);      {% endif %}
    }

[ketoha]

Hello,

I am experiencing an issue with styling the mushroom-chips-card using card-mod. I’m trying to achieve two things:

1. Set a background style for the entire card.
2. Apply an animation to a specific state icon.

Here’s the working animation code I have:

card_mod:
  style:
    mushroom-template-chip:nth-child(3)$: |
      ha-state-icon {
        {{ 'animation: eureka 1.8s infinite;' if is_state('switch.0x540f57fffed36109_l2', 'on') }}
      }

When I try to incorporate the background styling:

card_mod:
  style: |
    .chip-container {
      background-color: #1c1c1c;
      border-radius: 10px;
      padding-top: 10px;
      padding-left: 10px;
    }
    mushroom-template-chip:nth-child(3) ha-state-icon {
      {{ 'animation: eureka 1.8s infinite;' if is_state('switch.0x540f57fffed36109_l2', 'on') else '' }}
    }

The issue arises where the card background styling works, but the animation does not.

If I bypass card-mod and directly use:

- type: custom:mushroom-chips-card
  style: |
    .chip-container {
      background-color: #1c1c1c;
      border-radius: 10px;
      padding-top: 10px;
      padding-left: 10px;
    }

The background styling works perfectly, but I need the animations provided by card-mod.

Any guidance or solutions would be greatly appreciated!

[dimitri.landerloos]

What does this code do when you put it in the template editor:

[dimitri.landerloos]

This should work, but i didnt see your keyframes anywhere, so just put them where i have put the placeholder.

card_mod:
  style:
    mushroom-template-chip:nth-child(3)$: |
      ha-state-icon {
        {{ 'animation: eureka 1.8s infinite;' if is_state('switch.office_screens', 'on') else '' }}
      }
      @keyframes eureka {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    .: |
      .chip-container {
        background-color: #1c1c1c;
        border-radius: 10px;
        padding-top: 10px;
        padding-left: 10px;
      }

[Greg.o (Greg)]

Hi,

However, Temp_Hum_1 is in a room : “Chambre Parentale” :