Hi danwooller,
thanks, found the wrong bracket!
But this also changes the icon and the shape. Looks then like that:
Is there a way without resize the icon?
Thanks!
- type: custom:mushroom-chips-card
chips:
- type: template
entity: cover.screenlinks
icon: |-
{{ iif(is_state(entity, 'open'), 'mdi:blinds-open', 'mdi:roller-shade-closed') }}
icon_color: |-
{{ iif(is_state(entity, 'open'), 'white', 'grey') }}
How can I set the position of the cover to 80 when opening ?
You have to put @ in front of their name so they get a notification.
Try
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: calc(var(--icon-size) * 2) !important;
}
.: |
ha-card {
# margin-top: -12px;
--icon-border-radius: 12px;
#--icon-size: 50px;
#margin-top: -12px;
#margin-left: -52px;
}
I have been trying to create a heating card for each room using some of the great examples in here. I have gotten this far, but am stuck on how to close the gaps between the cards, and also how to make the font size of the temperature and when the automation was last triggered
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-climate-card
entity: climate.living_room_radiator
show_temperature_control: false
layout: vertical
name: Living Room
icon: mdi:sofa
primary_info: none
secondary_info: none
double_tap_action:
action: more-info
- type: custom:mushroom-chips-card
chips:
- type: template
icon: ''
icon_color: ''
content: >-
{{ states('sensor.living_room_temperature_sensor_temperature')
}}°C
- type: entity
entity: automation.trv_valve_living_room_radiator
content_info: last-updated
icon: ''
use_entity_picture: false
icon_color: red
alignment: center
- type: custom:stack-in-card
cards:
- type: custom:mushroom-climate-card
entity: climate.living_room_radiator
show_temperature_control: true
layout: vertical
name: Living Room
icon_type: none
primary_info: none
secondary_info: none
double_tap_action:
action: more-info
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:pipe-valve
icon_color: blue
content: '{{ states(''sensor.living_room_trv_battery_level'') }}'
- type: template
icon: mdi:battery
icon_color: green
content: '{{ states(''sensor.living_room_temperature_sensor_battery'') }}%'
- type: template
icon: mdi:battery-bluetooth
icon_color: green
content: '{{ states(''sensor.living_room_trv_battery_level'') }}%'
alignment: center
3 Likes
Im not the best person for that, but essentially it creates a new group and it calls card mod to implement the styles
Not an answer to your question but I have been using this same room card config and it causes my tablet to lag or become unresponsive after a few mins. Works great on phone and PC, have you experienced the same issue?
Here is how I make my light flash if a light is on.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state(config.entity, 'on') %}
{% if state_attr(config.entity, 'rgb_color') == none %}
--icon-color: rgb(255,190,137) !important;
--shape-color: rgb(255,190,137, 0.2 ) !important;
--icon-animation: illumination 1s infinite;
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
{% else %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
--icon-color: rgb( {{r}}, {{g}}, {{b}} ) !important;
--shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ) !important;
{% endif %}
{% endif %}
Here is a link to my discussion form on my issue if anyone can help.
1 Like
Good evening, tell me how to make the icon blink when the motion sensor detects
type: custom:mushroom-template-card
icon: none
icon_color: blue
primary: Зал
secondary: |-
{% set temperature = "sensor.ms_zal_temperature" %}
{% set humidity = "sensor.ms_zal_humidity" %}
{{ states(temperature) | round(1) }}°c
{{ states(humidity) | round(1) }}%
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
font-size: 21px;
content: '📺';
animation: boing 3s ease infinite;
transform-origin: 50% 90%;
}
ha-icon {
width: 0px !important;
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: HTML content
content:
type: entities
entities:
- entity: automation.distantsiia_test
- entity: automation.zavesti_dvigatel_mazda_v_3_00
- entity: automation.zavesti_dvigatel_mazda_v_6_00
- entity: switch.kalitka_relay2
name: Открытие ворот
icon: mdi:garage
- entity: sensor.time_to_work
title: Автомобиль
show_header_toggle: false
state_color: true
Hi, is anyone able to help please? I’m hoping to have the icon change colour based on the temperature range of a sensor…I’ve got this so far but it only changes the icon to green? Basically I’d like to change the colour if the temp is over say 15 degrees, then 20 then 25 for example?
icon_color: |
{% if states(entity) | float > 15 %}
green
{% elif states(entity) | float > 20 %}
yellow
{% elif states(entity) | float > 25 %}
orange
{% elif states(entity) | float > 30 %}
red
{% else %}
black
{% endif %}
entity: sensor.bedroom_temperature_sensor_temperature
Just start with the high numbers. And it should work
icon_color: |
{% if states(entity) | float > 30 %}
red
{% elif states(entity) | float > 25 %}
orange
{% elif states(entity) | float > 20 %}
yellow
{% elif states(entity) | float > 15 %}
green
{% else %}
black
{% endif %}
3 Likes
“I like your approach! Are the colors for the background and cards specified in certain theme files? If so, could you please share them with me?”
For ex card-mod: background-color: rgba(var(–rgb-card-background-color)
@rhysb is there a way to decrease the spacing between the chips ? The Bottom row has 5 chips, can I decrease the spacing between them ? Kindly guide
Just using it for the AC
Thanks so much, that worked!
@danwooler
Thank you, that worked!!!
Firstly, this is very nice, thank you.
I am having trouble with a couple of elements however:
The radial progress bar is not displaying correctly.
The zoom buttons are not obeying their custom positioning.
The latter isn’t really an issue to me. But I wonder if something has changed since you shared this code for the battery card to not render correctly (or perhaps my removing of ‘distance to x’ card has altered behaviour in some way?)
Thank you again. One last question. It looks great on my PC, but when I view it on the tablet the two bottom icons you helped me adjust are stacked vertically (I’m assuming because it runs out of “horizontal” space). Any idea of something I can do to fix that?
Could you please share your code?
Wondering if someone can help me, I’m new to this YAML stuff 
I’m hoping to make a mushroom person card, like @Mosher with a Memoji-style image and the red/green home and away badges.
However, I want to use a binary presence sensor entity to control the Home/Away state, not a person entity. I was able to change the entity to the binary sensor, and change the icon type to “entity-picture” with the code editor, but I can’t figure out how to set the actual Memoji picture I want to use.
Here’s what I have so far:
type: custom:mushroom-person-card
entity: binary_sensor.nick_presence
layout: vertical
name: Nick
fill_container: false
icon_type: entity-picture
Any help would be appreciated, or if there is a better way to do it with a different card, please let me know!
I have a velux window
- type: custom:mushroom-chips-card
chips:
- type: template
entity: cover.raamlinks
icon: |-
{{ iif(is_state(entity, 'open'), 'mdi:window-open-variant', 'mdi:window-closed-variant') }}
icon_color: disable
If I open it, I want it always on position 78. I found some code, but don’t know how to use it…
- service: cover.set_cover_position
data:
entity_id: X
position: 78
and as long as it isn’t on position 0 or 78 I want the icon blinking…
type: entity-button
entity: light.bed_light
style: |
@keyframes blink {
50% {
background: red;
}
}
ha-card {
animation: blink 2s linear infinite;
}
How can I manage this ?
Does this work?
{{ 'animation: blink 2s linear infinite;' if not is_state(config.entity, '0') and not is_state(config.entity, '78') }}