Wonderful, thank you! Especially the template.
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:
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.
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.
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
- 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
- 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?
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 
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. 
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!
