Hoping you figured out your card but by total accident I came upon this and you fixed my height issue 
Trying to figure out how to make the icon blink when it’s red… suggestions? I’ve tried a couple things but no success yet!
- type: custom:mushroom-template-card
layout: vertical
card_mod:
style: |
ha-card {
background-color: {{ 'rgba(255, 255, 255, .1)' if is_state('lock.front_door_lock_2', 'unlocked') else 'rgba(147, 227, 215, 0.5)' }};
height:125px !important;
}
secondary: 'Battery: {{ state_attr("lock.front_door_lock_2", "battery") }}%'
entity: lock.front_door_lock_2
primary: |
{% if is_state('lock.front_door_lock_2', 'unlocked') %}
Door is Unlocked
{% else %}
Door is Locked
{% endif %}
icon_color: |
{% if is_state('lock.front_door_lock_2', 'unlocked') %}
red
{% else %}
green
{% endif %}
icon: |
{% if is_state('lock.front_door_lock_2', 'unlocked') %}
mdi:lock-open
{% else %}
mdi:lock
{% endif %}
Thank you all!
On my iphone I have a problem with the color that is outside the card but not on my browser. How can i remove this?
One other thing, when I scale the icon naturally the badge is outside the card. How can I adjust the badge “down”?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Oppe
secondary: '{{ states(''sensor.temperature_18'') }} °C'
icon: mdi:sofa-outline
entity: light.lysgruppe_stuekjokken
icon_color: |-
{% if is_state('light.lysgruppe_stuekjokken', 'on') %}
orange
{% else %}
cyan
{% endif %}
hold_action:
action: navigate
navigation_path: stue
tap_action:
action: navigate
navigation_path: stue
badge_icon: |-
{% if is_state('sensor.template_lights_on_counter_oppe', '0') %}
{% elif is_state('sensor.template_lights_on_counter_oppe', '1') %}
mdi:numeric-1
{% elif is_state('sensor.template_lights_on_counter_oppe', '2') %}
mdi:numeric-2
{% elif is_state('sensor.template_lights_on_counter_oppe', '3') %}
mdi:numeric-3
{% elif is_state('sensor.template_lights_on_counter_oppe', '4') %}
mdi:numeric-4
{% elif is_state('sensor.template_lights_on_counter_oppe', '5') %}
mdi:numeric-5
{% elif is_state('sensor.template_lights_on_counter_oppe', '6') %}
mdi:numeric-6
{% elif is_state('sensor.template_lights_on_counter_oppe', '7') %}
mdi:numeric-7
{% elif is_state('sensor.template_lights_on_counter_oppe', '8') %}
mdi:numeric-8
{% elif is_state('sensor.template_lights_on_counter_oppe', '9') %}
mdi:numeric-9
{% else %}
mdi:numeric-9-plus
{% endif %}
badge_color: orange
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host {
z-index: 1;
}
:host {
--mush-icon-size: 100px;
height: 66px;
margin-left: -22px !important;
margin-top: -4px !important;
}
ha-card {
box-shadow: none;
--card-primary-font-size: 16px;
--card-secondary-font-size: 20px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.vindugruppe_stuekjokken
state: 'on'
chip:
type: template
icon_color: green
icon: mdi:window-open-variant
- type: conditional
conditions:
- entity: group.bevegelse_stue_kjokken
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:motion-sensor
- type: conditional
conditions:
- entity: binary_sensor.openclose_33
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:door-open
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
top: -36px;
z-index: 0;
}
ha-card {
animation: blink 1s ease-in-out infinite;
}
@keyframes blink {
50% {opacity: 0.5;}
}
card_mod:
style: |
ha-card {
height: 66px;
}
Hi, is it possible to download the icons from some place?
Yup, I have this same issue on iOS. It’s not even just Safari, it’s any browser on iOS. It’s only when there’s an animated chip on the screen.
I couldn’t figure it out so on my main page I just moved it over.
hello all I have seen the following above: “last used > zuletzt verwendet”
does anyone know how to implement this?
I did some digging and found line-height I assume that would allow me to move up the line closer to the font? Does anyone know how would I use that?
Where do you put these pictures? What size do you resize them too?
Most of my pictures are located in a folder inside HA. Most of them are being used with css but I also do have some pictures entered straight into config. I downloaded them from png egg website. The site lets you to resize the pictures before downloading.
I saw the resize part but I’m curious what size you’re resizing to.
Your roomcard, can you share that?
I tried putting that in the mushroom.yaml and clearing cache but it didn’t change anything.
Can this be applied as a style with card-mod?
mush-title-padding: 12px 12px 6px
mush-title-spacing: 6px
min 500x. You can resize at the site too.
1 Like
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Half Bath
secondary: Bathroom
icon: mdi:toilet
fill_container: true
layout: horizontal
multiline_secondary: false
tap_action:
action: navigate
navigation_path: half-bath
icon_color: teal
hold_action:
action: none
double_tap_action:
action: none
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: 76px;
height: 56px;
margin-left: -2px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
- type: conditional
conditions:
- entity: light.vanity_light
state: 'on'
chip:
type: entity
entity: light.vanity_light
icon_color: amber
tap_action:
action: call-service
service: light.turn_off
service_data: {}
target:
entity_id: light.vanity_light
content_info: none
icon: mdi:lightbulb
- type: conditional
conditions:
- entity: fan.exhaust_fan
state: 'on'
chip:
type: entity
entity: fan.exhaust_fan
icon_color: green
card_mod: null
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
animation: rotation linear infinite;
{% if states('fan.exhaust_fan') == 'on' %}
animation-duration: 1s;
{%- else -%}
{%- endif %}
}
tap_action:
action: call-service
service: fan.turn_off
service_data: {}
target:
entity_id: fan.exhaust_fan
content_info: none
icon: mdi:fan
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-right: 6px;
}
card_mod:
style: |
ha-card {
height: 92px;
{% if is_state('light.vanity_light', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
2 Likes
Do anyone know how i can show a whole picture?
i.e remove the round frame around an entity picture? - It cuts of a lot of essential information about a state…
(Two cards on the bottom)
Hi. I’m curious if anyone has managed to get a timer entity to display the timer countdown in a mushroom card or maybe we could have a “light timer” card in the future?
Previously I used the top card to visualize the lights I have on timers and would like to move this functionality to a mushroom card where the icon illuminates when the light is on and the countdown of the timer displays below the name. Currently, I’m using the template card and have only been able to get the state of the timer (idle/active). Is it possible to get the timer countdown via a template?
2 Likes
Can you use state_attr to get the time remaining?