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

Hi! The Mushroom Light Card is exactly what I need to control the brightness and color temperature of a lamp group (with a neat switch between the 2 slider modes). The only thing I’m missing is a numeric display of the color temperature next to the brightness state (which is the secondary information), like in this mock-up:
image

Would that be possible with some card-mod CSS? The “Slider button Card” plugin does that, but it’s bugged (the color temperature slider controls the brightness instead - the Mushroom plugin has no problem with it) and the slider design isn’t great, so I would very much prefer using the Mushroom plugin for that.

I strongly recommend everyone to use Mushroom cards together with Bubble cards.

1 Like

Here you go, I switched to dark mode theme though (Graphite):

type: custom:stack-in-card
mode: horizontal
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Living Room
        secondary: >-
          {{ states('sensor.living_room_temperature')|round(2) }}°F | {{
          states('sensor.living_room_humidity')|round(2) }}%
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                display: none !important;
              }
            .: |
              ha-card {
                border: 0px;
                padding-left: 10px;
                padding-top: 10px;
                width: 500px;
              }
      - type: custom:mushroom-template-card
        entity: light.family_light
        layout: horizontal
        icon: mdi:sofa
        hold_action:
          action: more-info
        icon_color: >-
          {% if is_state('light.family_light', 'on') %} #bfdafe {% else %}
          #7F7A7A {% endif %}
        primary_info: none
        secondary_info: none
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --icon-size: 135px;
              }
            .: |
              ha-card {
                border: 0px;
                margin-left: -30px;
                margin-top: -20px;
               
              }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: light.black_lamp
        tap_action:
          action: toggle
        hold_action:
          action: more-info
        double_tap_action:
          action: more-info
        icon: mdi:floor-lamp-dual-outline
        card_mod:
          style: |
            ha-card {
              --chip-background: {% if is_state('light.black_lamp', 'on') %} #433752 {% else %} #353535 {% endif %};
              --color: {% if is_state('light.black_lamp', 'on') %} #E3C8C4 {% else %} #777777 {% endif %};
              justify-content: center;
              height: 35px !important;
              width: 35px !important;
              border: 0 !important;
              box-shadow: none !important;
              border-radius: 22px !important;
            }
      - type: template
        entity: switch.black_cabinet_plug_zb
        tap_action:
          action: toggle
        hold_action:
          action: more-info
        double_tap_action:
          action: more-info
        icon: mdi:leaf
        card_mod:
          style: |
            ha-card {
              --chip-background: {% if is_state('switch.black_cabinet_plug_zb', 'on') %} #435B44 {% else %} #353535 {% endif %};
              --color: {% if is_state('switch.black_cabinet_plug_zb', 'on') %} #8A9B84 {% else %} #777777 {% endif %};
              justify-content: center;
              height: 35px !important;
              width: 35px !important;
              border: 0 !important;
              box-shadow: none !important;
              border-radius: 22px !important;
            }
      - type: template
        entity: light.fish_tank_bulb_zb
        tap_action:
          action: toggle
        hold_action:
          action: more-info
        double_tap_action:
          action: more-info
        icon: mdi:fish
        card_mod:
          style: |
            ha-card {
              --chip-background: {% if is_state('light.fish_tank_bulb_zb', 'on') %} #3A507B {% else %} #353535 {% endif %};
              --color: {% if is_state('light.fish_tank_bulb_zb', 'on') %} #97B4C2 {% else %} #777777 {% endif %};
              justify-content: center;
              height: 35px !important;
              width: 35px !important;
              border: 0 !important;
              box-shadow: none !important;
              border-radius: 22px !important;
            }
      - type: template
        entity: media_player.sony_kd_85x80ck_2
        tap_action:
          action: toggle
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon: mdi:monitor
        card_mod:
          style: |
            ha-card {
              --chip-background: {% if is_state('media_player.sony_kd_85x80ck_2', 'on') %} #793C3C {% else %} #353535 {% endif %};
              --color: {% if is_state('media_player.sony_kd_85x80ck_2', 'on') %} #EE817A {% else %} #777777 {% endif %};
              justify-content: center;
              height: 35px !important;
              width: 35px !important;
              border: 0 !important;
              box-shadow: none !important;
              border-radius: 22px !important;
            }
    card_mod:
      style: |
        .chip-container {
          flex-flow: column wrap-reverse !important;
          display: flex !important;
          --chip-spacing: 8px;
          margin: 12px;
        }
        .: |
        .container {
          align: end;
        }
card_mod:
  style: |
    ha-card {
      max-width: 100%;
      min-width: 50%;
      height: 186px;
    }

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.