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

Hello all,

First of all i wishing a very good 2025 to all of you.
I have a tinkering somewhat with a card but canā€™t work it out.

bijkeuken

In this room is a dimmer, i try to place the slider but i canā€™t fix this. Wrong code, wrong card type?
Can someone give me a hand?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Garage
    secondary: "{{ states('sensor.bijkeuken_pth_temperature') }}"
    icon: mdi:garage
    entity: input_boolean.garage_light
    tap_action:
      action: navigate
      navigation_path: garage
    hold_action:
      action: toggle
    icon_color: "{{ 'orange' if is_state(entity, 'on') else 'disabled' }}"
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          background: rgba(var(--rgb-primary-text-color), 0.025);
          --mush-icon-size: 56px;
          height: 66px;
          margin-left: -22px !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:washing-machine
        icon_color: |2-
            {% if is_state(entity, 'off') %}
            grey
            {% else %}
            blue
            {% endif %}
        entity: sensor.washer
        tap_action:
          action: more-info
      - type: template
        icon: mdi:tumble-dryer
        icon_color: |2-
            {% if is_state(entity, 'off') %}
            grey
            {% else %}
            red
            {% endif %}
        entity: sensor.dryer
        tap_action:
          action: more-info
    card_mod:
      style:
        mushroom-template-chip:nth-child(1)$: |
          {% if is_state('sensor.washer','on') %}
          ha-icon {
            animation: shake 800ms ease-in-out infinite, drum 2s ease infinite;
          }
          @keyframes shake {
            0%, 100% { transform: translate(0, 0) rotate(0); }
            20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
            40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
            60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
            80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
          }
          @keyframes drum {
            50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
          }  
          {% else %}

          {% endif %}
          }
        mushroom-template-chip:nth-child(2)$: |
          {% if is_state('sensor.dryer','on') %}
          ha-icon {
            animation: shake 800ms ease-in-out infinite, drum 1s infinite;
            transform-origin: 100% 100%;
          }
          @keyframes shake {
            0%, 100% { transform: rotate(4deg); }
            50%  { transform: rotate(-4deg); }
          }
          @keyframes drum {
            50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
          }
          {% else %}

          {% endif %}
          }
        .: |
          ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: 0;
          }
    alignment: end
card_mod:
  style: |
    ha-card {
      height: 120px;
      {% if is_state('input_boolean.garage_light', 'on') %}
         background: rgba(255, 152, 0, 0.1);
      {% endif %}
    }

Hey Guys, I just put a post together in regards to using Mushroom Template and Person Cards. Thought I would share in here, just in case anyone can use it.

MUSHROOM TEMPLATE CARD CODE

image

                    - type: conditional
                      conditions:
                        - condition: state
                          entity: binary_sensor.middle_floor_sensor_group
                          state: 'on'
                        - condition: state
                          entity: binary_sensor.front_door_sensor_group
                          state: 'on'
                      card:
                        type: horizontal-stack
                        cards:
                          - type: custom:mushroom-template-card
                            entity: binary_sensor.door_red_contact_contact
                            primary: >
                              {%- if
                              is_state("binary_sensor.door_red_contact_contact",
                              'on') %}
                                OPEN
                              {%- elif
                              is_state("binary_sensor.door_red_contact_contact",
                              'off') %}
                                CLOSED
                              {%- endif -%}
                            secondary: Red Door
                            icon: >
                              {% set
                              door_state=states("binary_sensor.door_red_contact_contact")
                              %} {% if door_state=='on'%}
                                mdi:door-open
                              {% elif door_state=='off'%}
                                mdi:door
                              {% endif %}
                            icon_color: >-
                              {% set
                              door_state=states("binary_sensor.door_red_contact_contact")
                              %}

                              {% if door_state=='on'%}
                                red
                              {% elif door_state=='off'%}
                                green
                              {% endif %}
                            badge_icon: >
                              {% set
                              door_state=states("binary_sensor.door_red_contact_contact")
                              %} {% if door_state=='on'%}
                                mdi:weather-windy
                              {% elif door_state=='off'%}
                                mdi:lock
                              {% endif %}
                            badge_color: >
                              {% set
                              door_state=states("binary_sensor.door_red_contact_contact")
                              %} {% if door_state=='on'%}
                                blue
                              {% elif door_state=='off'%}
                                transparent
                              {% endif %}
                            layout: horizontal
                            fill_container: false
                          - type: custom:mushroom-template-card
                            entity: binary_sensor.door_kitchen_contact_contact
                            primary: >
                              {%- if
                              is_state('binary_sensor.door_kitchen_contact_contact',
                              'on') %}
                                OPEN
                              {%- elif
                              is_state('binary_sensor.door_kitchen_contact_contact',
                              'off') %}
                                CLOSED
                              {%- endif -%}
                            secondary: Kitchen Door
                            icon: >
                              {% set
                              door_state=states("binary_sensor.door_kitchen_contact_contact")
                              %} {% if door_state=='on'%}
                                mdi:door-open
                              {% elif door_state=='off'%}
                                mdi:door
                              {% endif %}
                            icon_color: >
                              {% set
                              door_state=states("binary_sensor.door_kitchen_contact_contact")
                              %} {% if door_state=='on'%}
                                red
                              {% elif door_state=='off'%}
                                green
                              {% endif %}
                            badge_icon: >
                              {% set
                              door_state=states("binary_sensor.door_kitchen_contact_contact")
                              %} {% if door_state=='on'%}
                                mdi:weather-windy
                              {% elif door_state=='off'%}
                                mdi:lock
                              {% endif %}
                            badge_color: >
                              {% set
                              door_state=states("binary_sensor.door_kitchen_contact_contact")
                              %} {% if door_state=='on'%}
                                blue
                              {% elif door_state=='off'%}
                                transparent
                              {% endif %}
                            layout: horizontal
                            fill_container: false
                    - type: conditional
                      conditions:
                        - condition: state
                          entity: binary_sensor.middle_floor_sensor_group
                          state: 'on'
                        - condition: state
                          entity: binary_sensor.front_door_sensor_group
                          state: 'on'
                      card:
                        type: horizontal-stack
                        cards:
                          - type: custom:mushroom-template-card
                            entity: binary_sensor.door_main_deck_contact_contact
                            primary: >
                              {%- if
                              is_state('binary_sensor.door_main_deck_contact_contact',
                              'on') %}
                                OPEN
                              {%- elif
                              is_state('binary_sensor.door_main_deck_contact_contact',
                              'off') %}
                                CLOSED
                              {%- endif -%}
                            secondary: Main Deck
                            icon: >
                              {% set
                              door_state=states("binary_sensor.door_main_deck_contact_contact")
                              %} {% if door_state=='on'%}
                                mdi:door-sliding-open
                              {% elif door_state=='off'%}
                                mdi:door-sliding
                              {% endif %}
                            icon_color: >
                              {% set
                              door_state=states("binary_sensor.door_main_deck_contact_contact")
                              %} {% if door_state=='on'%}
                                red
                              {% elif door_state=='off'%}
                                green
                              {% endif %}
                            badge_icon: >
                              {% set
                              door_state=states("binary_sensor.door_main_deck_contact_contact")
                              %} {% if door_state=='on'%}
                                mdi:weather-windy
                              {% elif door_state=='off'%}
                                mdi:lock
                              {% endif %}
                            badge_color: >
                              {% set
                              door_state=states("binary_sensor.door_main_deck_contact_contact")
                              %} {% if door_state=='on'%}
                                blue
                              {% elif door_state=='off'%}
                                transparent
                              {% endif %}
                            layout: horizontal
                            fill_container: false
                          - type: custom:mushroom-template-card
                            entity: binary_sensor.door_side_deck_contact_contact
                            primary: >
                              {%- if
                              is_state('binary_sensor.door_side_deck_contact_contact',
                              'on') %}
                                OPEN
                              {%- elif
                              is_state('binary_sensor.door_side_deck_contact_contact',
                              'off') %}
                                CLOSED
                              {%- endif -%}
                            secondary: Side Deck
                            icon: >
                              {% set
                              door_state=states("binary_sensor.door_side_deck_contact_contact")
                              %} {% if door_state=='on'%}
                                mdi:door-sliding-open
                              {% elif door_state=='off'%}
                                mdi:door-sliding
                              {% endif %}
                            icon_color: >
                              {% set
                              door_state=states("binary_sensor.door_side_deck_contact_contact")
                              %} {% if door_state=='on'%}
                                red
                              {% elif door_state=='off'%}
                                green
                              {% endif %}
                            badge_icon: >
                              {% set
                              door_state=states("binary_sensor.door_side_deck_contact_contact")
                              %} {% if door_state=='on'%}
                                mdi:weather-windy
                              {% elif door_state=='off'%}
                                mdi:lock
                              {% endif %}
                            badge_color: >
                              {% set
                              door_state=states("binary_sensor.door_side_deck_contact_contact")
                              %} {% if door_state=='on'%}
                                blue
                              {% elif door_state=='off'%}
                                transparent
                              {% endif %}
                            layout: horizontal
                            fill_container: false
                    - type: conditional
                      conditions:
                        - condition: state
                          entity: binary_sensor.middle_floor_sensor_group
                          state: 'on'
                        - condition: state
                          entity: binary_sensor.front_door_sensor_group
                          state: 'on'
                      card:
                        type: horizontal-stack
                        cards:
                          - type: custom:mushroom-template-card
                            entity: binary_sensor.window_roof_1_contact_contact
                            primary: >
                              {%- if
                              is_state('binary_sensor.window_roof_1_contact_contact',
                              'on') %}
                                OPEN
                              {%- elif
                              is_state('binary_sensor.window_roof_1_contact_contact',
                              'off') %}
                                CLOSED
                              {%- endif -%}
                            secondary: Top Window 1
                            icon: >
                              {% set
                              door_state=states("binary_sensor.window_roof_1_contact_contact")
                              %} {% if door_state=='on'%}
                                mdi:window-open-variant
                              {% elif door_state=='off'%}
                                mdi:window-closed-variant
                              {% endif %}
                            icon_color: >
                              {% set
                              door_state=states("binary_sensor.window_roof_1_contact_contact")
                              %} {% if door_state=='on'%}
                                red
                              {% elif door_state=='off'%}
                                green
                              {% endif %}
                            badge_icon: >
                              {% set
                              door_state=states("binary_sensor.window_roof_1_contact_contact")
                              %} {% if door_state=='on'%}
                                mdi:weather-windy
                              {% elif door_state=='off'%}
                                mdi:lock
                              {% endif %}
                            badge_color: >
                              {% set
                              door_state=states("binary_sensor.window_roof_1_contact_contact")
                              %} {% if door_state=='on'%}
                                blue
                              {% elif door_state=='off'%}
                                transparent
                              {% endif %}
                            layout: horizontal
                            fill_container: false
                          - type: custom:mushroom-template-card
                            entity: binary_sensor.window_roof_2_contact
                            primary: >
                              {%- if
                              is_state('binary_sensor.window_roof_2_contact',
                              'on') %}
                                OPEN
                              {%- elif
                              is_state('binary_sensor.window_roof_2_contact',
                              'off') %}
                                CLOSED
                              {%- endif -%}
                            secondary: Top Window 2
                            icon: >
                              {% set
                              door_state=states("binary_sensor.window_roof_2_contact")
                              %} {% if door_state=='on'%}
                                mdi:window-open-variant
                              {% elif door_state=='off'%}
                                mdi:window-closed-variant
                              {% endif %}
                            icon_color: >
                              {% set
                              door_state=states("binary_sensor.window_roof_2_contact")
                              %} {% if door_state=='on'%}
                                red
                              {% elif door_state=='off'%}
                                green
                              {% endif %}
                            badge_icon: >
                              {% set
                              door_state=states("binary_sensor.window_roof_2_contact")
                              %} {% if door_state=='on'%}
                                mdi:weather-windy
                              {% elif door_state=='off'%}
                                mdi:lock
                              {% endif %}
                            badge_color: >
                              {% set
                              door_state=states("binary_sensor.window_roof_2_contact")
                              %} {% if door_state=='on'%}
                                blue
                              {% elif door_state=='off'%}
                                transparent
                              {% endif %}
                            layout: horizontal
                            fill_container: false

MUSHROOM PERSON CARD CODE

image

                    - type: horizontal-stack
                      cards:
                        - type: custom:mushroom-person-card
                          entity: person.andrew_hunter
                          layout: vertical
                          fill_container: true
                          name: Hunter
                          icon_type: entity-picture
                          primary_info: none
                          secondary_info: none
                          tap_action:
                            action: none
                          hold_action:
                            action: none
                          double_tap_action:
                            action: none
                        - type: custom:mushroom-person-card
                          entity: person.alli_wells
                          layout: vertical
                          fill_container: true
                          name: Alli
                          icon_type: entity-picture
                          primary_info: none
                          secondary_info: none
1 Like

Please refer to the correct thread

1 Like

So it seems the latest card mod update has decided to break a lot of peoples dashboards, my energy use page is pretty screwed up.

I did have some aspects that were using card: mod-card which I have now removed as it is no longer needed apparently but have lost formatting on quite a lot of stuff. Anybody else in the midst of trying to fix this mess and can offer any insight?

image

type: horizontal-stack
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:layout-card
        layout_type: masonry
        layout: {}
        cards:
          - type: custom:mushroom-title-card
            title: Yesterdays Cost
            subtitle: ""
            card_mod:
              style:
                mushroom-title-card$: |
                  .title {
                   --card-primary-color: rgb(var(--rgb-black));  
                    --title-font-size: 15px;
                    --title-font-weight: 350;
                    text-align: center;

                  }
                  .subtitle {
                   --card-secondary-color: rgb(var(--rgb-red));  
                    --subtitle-font-size: 32px;
                    --subtitle-font-weight: bolder;
                  }
                  .header {
                    --title-padding: 0px 5px 5px;
                    margin-top: -5px;
                    
                  }
          - type: custom:mushroom-template-card
            primary: "   Ā£{{ '%.2f'|format(states('sensor.yesterday_energy_cost')|float(default=0.0)|round(2)) }}"
            icon: ""
            tap_action:
              action: more-info
            entity: sensor.energy_total_cost
            card_mod:
              style:
                mushroom-state-info$: |
                  .primary {
                    text-shadow: 0px 0px 0px black;
                    --card-primary-font-weight: 400;
                    --card-primary-color: 
                      {% set demand = states('sensor.yesterday_energy_cost') | float %}
                      {% if demand < 3.00 %}
                        green;
                      {% elif 3.00 <= demand <= 4.50 %}
                        orange;
                      {% else %}
                        red;
                      {% endif %};
                    --card-primary-font-size: 35px;
                    text-align: center;
                    margin-top: -25px;
                    padding-top: 5px;
                    padding-bottom: 5px;
                  }
                .: |
                  ha-card { 
                    padding: 2px;
                    background: rgba(var(--rgb-primary-text-color), 0.00);
                    box-shadow: none;
                    border-radius: 15px;
                    background-color: white;
                  }
    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;
          height: 75px;
        }
  - type: custom:stack-in-card
    cards:
      - type: custom:layout-card
        layout_type: masonry
        layout: {}
        cards:
          - type: custom:mushroom-title-card
            title: Todays Cost
            subtitle: ""
            card_mod:
              style:
                mushroom-title-card$: |
                  .title {
                   --card-primary-color: rgb(var(--rgb-black));  
                    --title-font-size: 15px;
                    --title-font-weight: 350;
                    text-align: center;

                  }
                  .subtitle {
                   --card-secondary-color: rgb(var(--rgb-red));  
                    --subtitle-font-size: 32px;
                    --subtitle-font-weight: bolder;
                  }
                  .header {
                    --title-padding: 0px 5px 5px;
                    margin-top: -5px;
                    
                  }
          - type: custom:mushroom-template-card
            primary: "   Ā£{{ '%.2f'|format(states('sensor.energy_total_cost')|float(default=0.0)|round(2)) }}"
            icon: ""
            tap_action:
              action: more-info
            entity: sensor.energy_total_cost
            card_mod:
              style:
                mushroom-state-info$: |
                  .primary {
                    text-shadow: 0px 0px 0px black;
                    --card-primary-font-weight: 400;
                    --card-primary-color: 
                      {% set demand = states('sensor.energy_total_cost') | float %}
                      {% if demand < 3.00 %}
                        green;
                      {% elif 3.00 <= demand <= 4.50 %}
                        orange;
                      {% else %}
                        red;
                      {% endif %};
                    --card-primary-font-size: 35px;
                    text-align: center;
                    margin-top: -25px;
                    padding-top: 5px;
                    padding-bottom: 5px;
                  }
                .: |
                  ha-card { 
                    padding: 2px;
                    background: rgba(var(--rgb-primary-text-color), 0.00);
                    box-shadow: none;
                    border-radius: 15px;
                    background-color: white;
                  }
    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;
          height: 75px;
        }

Ah, the card_mod update is the reason why all my nice icon animations stopped working. Need to look into it.

1 Like

@GTunney Yes having problems.

The card mod applied with the @media queries for the whole custom:mushroom-chips-card is working

            card_mod:
              style: |
                @media (orientation: portrait) and (max-width: 768px)  {
                  ha-card {
                    z-index:1;
                    position: fixed;
                    bottom: 5px;
                    left: 5px;
                    width: calc(100% - 10px);
                    background-color: transparent !important;
                    border-radius: 100px;
                    padding: 10px;
                    --chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px!important;
                 }
                 }
                 @media (orientation: portrait) and (min-width: 769px)  {
                   ha-card {
                     z-index:1;
                     position: fixed;
                     bottom: 10px;
                     left: 50px;
                     width: calc(100% - 100px);
                     background-color: transparent !important;
                     border-radius: 100px;
                     padding: 10px;
                     --chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px !important;
                     --chip-height: 60px;
                     --chip-border-radius: 50%;
                     --chip-icon-size: 30px;
                   }
                   }
                   @media (orientation: landscape) and (min-width: 1281px)  {
                     ha-card {
                       z-index:1;
                       position: fixed;
                       bottom: 5px;
                       left: 100px;
                       width: calc(100% - 200px);
                       background-color: transparent !important;
                       border-radius: 100px;
                       padding: 10px;
                       --chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px !important;
                       --chip-height: 55px;
                       --chip-border-radius: 50%;
                       --chip-icon-size: 30px;
                     }
                     }
                     @media (orientation: landscape) and (min-height: 600px) and (max-height: 800px) and
                     (max-width: 1280px)  {
                       ha-card {
                         z-index: 1;
                         position: fixed;
                         bottom: 5px;
                         left: 50px;
                         width: calc(100% - 100px);
                         background-color: transparent !important;
                         border-radius: 100px;
                         padding: 10px;
                         --chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px !important;
                         --chip-height: 55px;
                         --chip-border-radius: 50%;
                         --chip-icon-size: 30px;
                       }
                       }

but the card mod for the individual chips is not.

              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'off'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: input_boolean.chips_menu_toggle
                  icon: mdi:unfold-more-vertical
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,225,226,1) 100%);
                      }

Managed to get some colour back to my mushroom chips cards by using mushroom theme variables, details in below post

if youā€™re moving back to card_mod 3.4.4 you would need to re-instate those mod-card config

How do you re-instate?

just re-add them :wink:

I have copied and pasted my sticky menu mushrooms chip card to a new dashboard and it still is not working.

STRANGE THING When opening the app on my phone the colours of the buttons are applied through card-mod. When on computer (Chrome & Edge) the colours are not applied.

could be it is still loading the previous config from cache?

I just deleted all cached images and files. Same behavior in both edge and chrome.

card-mod applied with the media queries is respected. card-mod applied to the individual chips is not respected.

          - type: custom:mushroom-chips-card
            chips:
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.kiosk_mode_toggle
                    state: 'on'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'off'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: input_boolean.kiosk_mode_toggle
                  icon: mdi:menu
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,194,226,1) 100%);
                      }
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: '(min-height: 801px) and (min-width: 768px)'
                  - condition: state
                    entity: input_boolean.kiosk_mode_toggle
                    state: 'on'
                chip:
                  type: back
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,194,226,1) 100%);
                      }
              - type: spacer
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.kiosk_mode_toggle
                    state: 'off'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: input_boolean.kiosk_mode_toggle
                  icon: mdi:monitor-screenshot
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,194,226,1) 100%);
                      }
              - type: spacer
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'off'
                  - condition: screen
                    media_query: '(min-height: 1920px)'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace-media/music-assistant-iframe
                  entity: null
                  icon: mdi:music
                  card_mod:
                    style: |
                      ha-card {
                        border: 2.0px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(216,226,43,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'off'
                  - condition: screen
                    media_query: '(max-height: 1919px)'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: >-
                      https://ifouiz3rfiho185v4nkjxadhyfhss651.ui.nabu.casa/d5369777_music_assistant_beta/ingress
                  entity: null
                  icon: mdi:music
                  card_mod:
                    style: |
                      ha-card {
                        border: 2.0px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(216,226,43,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.kiosk_mode_toggle
                    state: 'on'
                  - condition: state
                    entity: switch.home_and_away_switch
                    state: 'on'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'off'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: switch.home_and_away_switch
                  icon: mdi:home-account
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,226,49,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: switch.home_and_away_switch
                    state: 'off'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'off'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: switch.home_and_away_switch
                  icon: mdi:home-export-outline
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(226,43,43,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                  - condition: and
                    conditions:
                      - condition: or
                        conditions:
                          - condition: screen
                            media_query: '(orientation: landscape) and (min-width: 1281px)'
                          - condition: screen
                            media_query: '(orientation: portrait) and (min-width: 769px)'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /3d-home/3d-home
                  icon: mdi:floor-plan
                  entity: null
                  icon_color: white
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: '(orientation: portrait) and (max-width: 768px)'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /3d-home/3d-home
                  icon: mdi:floor-plan
                  entity: null
                  icon_color: white
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: >-
                      (orientation: landscape) and (max-height: 800px) and
                      (max-width: 1280px)
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: script.dash_3d_home_1080
                  hold_action:
                    action: navigate
                    navigation_path: /3d-home/3d-home
                  icon: mdi:floor-plan
                  card_mod:
                    style: |
                      ha-card {
                        border: 1.0px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                  - condition: and
                    conditions:
                      - condition: or
                        conditions:
                          - condition: screen
                            media_query: '(orientation: landscape) and (min-width: 1281px)'
                          - condition: screen
                            media_query: '(orientation: portrait) and (min-width: 769px)'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace-custom/weather-all-devices
                  icon: mdi:weather-rainy
                  entity: null
                  icon_color: white
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: '(orientation: portrait) and (max-width: 768px)'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace-custom/weather-all-devices
                  icon: mdi:weather-lightning
                  entity: null
                  icon_color: white
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: >-
                      (orientation: landscape) and (max-height: 800px) and
                      (max-width: 1280px)
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: script.weather_page
                  hold_action:
                    action: navigate
                    navigation_path: /lovelace-custom/weather-all-devices
                  icon: mdi:weather-lightning-rainy
                  card_mod:
                    style: |
                      ha-card {
                        border: 1.0px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                  - condition: and
                    conditions:
                      - condition: or
                        conditions:
                          - condition: screen
                            media_query: '(orientation: landscape) and (min-width: 1281px)'
                          - condition: screen
                            media_query: '(orientation: portrait) and (min-width: 769px)'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /garden-all-devices/garden-irrigation
                  icon: mdi:flower
                  entity: null
                  icon_color: white
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: '(orientation: portrait) and (max-width: 768px)'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /garden-all-devices/garden-irrigation
                  icon: mdi:flower
                  entity: null
                  icon_color: white
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: >-
                      (orientation: landscape) and (max-height: 800px) and
                      (max-width: 1280px)
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: script.dash_garden
                  hold_action:
                    action: navigate
                    navigation_path: /garden-all-devices/garden-irrigation
                  icon: mdi:flower
                  card_mod:
                    style: |
                      ha-card {
                        border: 1.0px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                  - condition: and
                    conditions:
                      - condition: or
                        conditions:
                          - condition: screen
                            media_query: '(orientation: landscape) and (min-width: 1281px)'
                          - condition: screen
                            media_query: '(orientation: portrait) and (min-width: 769px)'
                chip:
                  type: template
                  entity: null
                  tap_action:
                    action: navigate
                    navigation_path: /fish-tank-panel/panel
                  icon: mdi:fishbowl-outline
                  icon_color: white
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: '(orientation: portrait) and (max-width: 768px)'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  entity: null
                  tap_action:
                    action: navigate
                    navigation_path: /fish-tank-panel/mobile
                  icon: mdi:fishbowl-outline
                  icon_color: white
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: >-
                      (orientation: landscape) and (max-height: 800px) and
                      (max-width: 1280px)
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: script.fish_tank_panel
                  hold_action:
                    action: navigate
                    navigation_path: /fish-tank-panel/panel
                  icon: mdi:fishbowl-outline
                  card_mod:
                    style: |
                      ha-card {
                        border: 1.0px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                  - condition: and
                    conditions:
                      - condition: or
                        conditions:
                          - condition: screen
                            media_query: '(orientation: landscape) and (min-width: 1281px)'
                          - condition: screen
                            media_query: '(orientation: portrait) and (min-width: 769px)'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace-floorplan/CCTV-Aarlo-Panel
                  entity: null
                  icon_color: white
                  icon: mdi:cctv
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: '(orientation: portrait) and (max-width: 768px)'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace-media/all_devices
                  entity: null
                  picture: ''
                  icon_color: white
                  icon: mdi:remote-tv
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: >-
                      (orientation: landscape) and (max-height: 800px) and
                      (max-width: 1280px)
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  icon: mdi:remote-tv
                  entity: script.media_page
                  hold_action:
                    action: navigate
                    navigation_path: /lovelace-media/all_devices
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                  - condition: and
                    conditions:
                      - condition: or
                        conditions:
                          - condition: screen
                            media_query: '(orientation: landscape) and (min-width: 1281px)'
                          - condition: screen
                            media_query: '(orientation: portrait) and (min-width: 769px)'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /dashboard-bathroom/panel
                  entity: null
                  icon: mdi:bathtub-outline
                  icon_color: white
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: '(orientation: portrait) and (max-width: 768px)'
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: navigate
                    navigation_path: /dashboard-bathroom/mobile
                  entity: null
                  icon: mdi:bathtub-outline
                  icon_color: white
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: screen
                    media_query: >-
                      (orientation: landscape) and (max-height: 800px) and
                      (max-width: 1280px)
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  icon: mdi:bathtub-outline
                  entity: script.bathroom_home
                  hold_action:
                    action: navigate
                    navigation_path: /dashboard-bathroom/panel
                  card_mod:
                    style: |
                      ha-card {
                        border: 1px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
                      }
              - type: spacer
              - type: spacer
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'on'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: input_boolean.chips_menu_toggle
                  icon: mdi:unfold-less-vertical
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,226,64,1) 100%);
                      }
              - type: conditional
                conditions:
                  - condition: state
                    entity: input_boolean.chips_menu_toggle
                    state: 'off'
                chip:
                  type: template
                  tap_action:
                    action: toggle
                  entity: input_boolean.chips_menu_toggle
                  icon: mdi:unfold-more-vertical
                  card_mod:
                    style: |
                      ha-card {
                        border: 2px solid gray !important;
                        --chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,225,226,1) 100%);
                      }
            card_mod:
              style: |
                @media (orientation: portrait) and (max-width: 768px)  {
                  ha-card {
                    z-index:1;
                    position: fixed;
                    bottom: 5px;
                    left: 5px;
                    width: calc(100% - 10px);
                    background-color: transparent !important;
                    border-radius: 100px;
                    padding: 10px;
                    --chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px!important;
                 }
                 }
                 @media (orientation: portrait) and (min-width: 769px)  {
                   ha-card {
                     z-index:1;
                     position: fixed;
                     bottom: 10px;
                     left: 50px;
                     width: calc(100% - 100px);
                     background-color: transparent !important;
                     border-radius: 100px;
                     padding: 10px;
                     --chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px !important;
                     --chip-height: 60px;
                     --chip-border-radius: 50%;
                     --chip-icon-size: 30px;
                   }
                   }
                   @media (orientation: landscape) and (min-width: 1281px)  {
                     ha-card {
                       z-index:1;
                       position: fixed;
                       bottom: 5px;
                       left: 100px;
                       width: calc(100% - 200px);
                       background-color: transparent !important;
                       border-radius: 100px;
                       padding: 10px;
                       --chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px !important;
                       --chip-height: 55px;
                       --chip-border-radius: 50%;
                       --chip-icon-size: 30px;
                     }
                     }
                     @media (orientation: landscape) and (min-height: 600px) and (max-height: 800px) and
                     (max-width: 1280px)  {
                       ha-card {
                         z-index: 1;
                         position: fixed;
                         bottom: 5px;
                         left: 50px;
                         width: calc(100% - 100px);
                         background-color: transparent !important;
                         border-radius: 100px;
                         padding: 10px;
                         --chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px !important;
                         --chip-height: 55px;
                         --chip-border-radius: 50%;
                         --chip-icon-size: 30px;
                       }
                       }

seems to be an issue for some users that downgrade from card_mod 3.5.0 (which was removed) to 3.4.4.

Just read a success from another user after having downgraded to 3.4.3, and then upgraded to 3.4.4

1 Like

If someone missed this, card_mod 3.5.0 was withdrawn. I downgraded to 3.4.3, then reinstalled 3.4.4, and everything works again.

EDIT: @Mariusthvdb beat me to it with a couple of seconds. :slight_smile: So I can confirm that after installing 3.5.0, I had to go back to 3.4.3, and then updating to 3.4.4 worked for me!

I lost colours from my various cards but seems to be working once I reloaded 3.5 from hacs

Hi folks,

I was wondering if anyone was able to help me?

Iā€™m using a mushroom fan card for my air purifier in my bedroom. Itā€™s got 3 speeds. I was wondering if there was a way with mod card or something similar to get it to show buttons for low, medium, high instead of a percentage bar? Or to have the percentage bar as an indicate but also have buttons on the card also?

It currently looks like the below.

Iā€™m very much a novie when it comes to this sort of stuff so any help would be greatly appreciated!

image

@Mariusthvdb and @moelito thanks it turns out I did miss the fax on this one. I have downgraded and then upgraded again. When I am back at a computer I will check if everything is working again.

Edit: All working again.

still running card_mod 3.5 (because I had spent the night embracing the new features and hope its features will soon return, now 3.4.4 is the latest and greatestā€¦)

I have been playing with the view badges, and modding those successfully. However, I now needed a badge so show a dynamic name or label, and that is something we can not card_mod.

So I turned to mushroom-template and concocted these. left the core badge with card-mod, on the right the mushroom with native templating, and some card_mod to set the border and the icon size.

Turning to the community, because there are 2 odd differences:

the mushroom state is not respecting the native display of numbers. Is that a template thing, or do we have a mushroom setting to adjust that.

second, if you look closely, the icon-color on the mushroom is much browner than the others, heck even than its own border, which uses the exact same templateā€¦ (the other browns are in fact purple :wink: )

would appreciate if anyone could comment on this, thanks!

SchermĀ­afbeelding 2025-01-08 om 13.57.26

SchermĀ­afbeelding 2025-01-08 om 13.57.38

core badge:

# badge netto_verbruik
type: entity
entity: sensor.netto_verbruik
show_name: true
name: Netto
icon: mdi:flash
card_mod:
  style:
    ha-badge:
      $: |
        {% set netto = states('sensor.netto_verbruik')|float(0) %}
        {% set color = 'brown' if netto >= 0 else 'var(--power-color)' %}
        .badge {
          border: 2px solid {{color}} !important;
        }
    .: |
      {% set netto = states(config.entity)|float(0) %}
      ha-state-icon {
        --mdc-icon-size: 24px;
        color:
          {% if netto >= 0 %} brown
          {% else %} var(--power-color)
          {% endif %};
        --card-mod-icon:
          {% if netto >= 0 %} mdi:home-import-outline
          {% else %} mdi:home-export-outline
          {% endif %};
      }

and mushroom-template

# badge netto_verbruik template
type: custom:mushroom-template-badge
content: >
  {{states(config.entity,with_unit=true)}}
icon: |-
  {% set netto = states(config.entity)|float(0) >= 0 %}
  mdi:home-{{'import-outline' if netto else 'export-outline'}}
color: |-
  {% set netto = states(config.entity)|float(0) >= 0 %}
  {{'brown' if netto else 'var(--power-color)' }}
entity: sensor.netto_verbruik
label: |-
  {% set netto = states(config.entity)|float(0) >= 0 %}
  {{'Verbruik' if netto else 'Levering'}}
card_mod:
  style: |
    .badge {
      {% set netto = states(config.entity)|float(0) >= 0 %}
      {% set color = 'brown' if netto else 'var(--power-color)' %}
      border: 2px solid {{color}} !important;
    }
    ha-state-icon {
      --mdc-icon-size: 24px;
    }

update

I now also see that in the Dom:

SchermĀ­afbeelding 2025-01-08 om 14.42.38

is correct, and then check

SchermĀ­afbeelding 2025-01-08 om 14.42.09

it sets it to var(ā€“brown-color)ā€¦??

EDIT: found the solution, added at the end.

Hi everyone,

I am trying to left align the state icon of a light-card with card_mod.
Unfortunately, i can only align the text ā€œHue Wohnzimmerdeckeā€ (this works fine!).
But the yellow icon is unwilling to go to the left.
Iā€™ve tried for several hours to fix this, and inspected the DOM structure.
But some small bit is obviously missingā€¦

- type: custom:mushroom-light-card
  entity: light.hue_wohnzimmerdecke
  show_brightness_control: true
  grid_options:
    rows: 3
    columns: 6
  layout: vertical
  card_mod:
    style:
      mushroom-state-icon$: |
        .icon {
          align-items: flex-start !important;
        }
      mushroom-state-info$: |
        .primary {
          text-align: left !important;
        }

See result
image

If i use the mushroom-shape-icon i can only set a relative margin

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        margin-right: 200px !important; 
      }

image

But everything else seems to be failing. What am i missing?
How can i align this icon properly to the left?

Solution:

card_mod:
  style:
    mushroom-state-item$: |
      .container {
        align-items: flex-start !important;
      }

Creates finally a left aligned icon!
image

Your automation is the same as your script here @LiQuid_cOOled ?