Hi.
How have you added 4 entity in 1 card. Im not getting it to workā¦
put them in a grid card, or layout card, or any of the stack cards, etc.
type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
- type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
- type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
- type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
Trying to find the code how to do this card? Found it on āMushroom Inspirationā page but there is no code availableā¦ Anyone having this and could share? 
Could someone help me please? feel like Iām being ignored for some reason.
Nice, ir works, its possĆble to change the color icon based no changeā¦ likeā¦ ir is off dont have Motion and have a grey color?
You should really try and ask your questions in 1 postā¦
but its a template chip - so you can do whatever you want with the color of the icon:
type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.lxc_pialert_106_status
icon: mdi:eye
icon_color: |-
{% if is_state(config.entity, 'on') %}
red
{% else %}
grey
{% endif %}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{{'animation: wink 4s ease-in-out infinite;' if is_state('binary_sensor.lxc_pialert_106_status', 'on')}}
}
@keyframes wink {
0%, 100% { transform: scale(1, 1); }
19% { transform: scale(1.05, 0.6); }
20% { clip-path: polygon(0 100%, 100% 100%, 100% 49%, 86% 51%, 79% 59%, 70% 66%, 57% 71%, 43% 71%, 29% 65%, 21% 57%, 13% 49%, 0 49%); }
25% { transform: scale(1, 1); }
28% { transform: scale(0.95, 1.05); }
30% { clip-path: inset(0 0 0 0); }
}
You arent being ignored. your question just requires a bit more thought.
basically you want to index the states, but you dont want to iterate over them to achieve your colors. i think you would need to do something via your theme if that is the case, but since i dont use themes much i am not sure if its possbible to set a color based on state via theme.
2 Likes
Ok, i Will dig intoā¦ tranks for your help in the other caseā¦ 
I gave you the code that changes the color of the chip icon already 
I need some help with the code below. Entities that are unavailable should be showing with a blue bar and a bug icon, but are not.
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: null
icon: mdi:battery
icon_color: green
content: Batteries
card_mod:
style: |
ha-card {
background: transparent;
border-style: none;
}
- type: custom:auto-entities
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding-top: 5px;
padding-bottom: 0px;
border-width: 0px;
background: none;
--ha-card-box-shadow: 0px;
}
filter:
include:
- entity_id: sensor.*battery
options:
type: custom:bar-card
card_mod:
style: |
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 12px !important;
height: 41px !important;
margin-top: -8px !important;
width: 101%;
right: 0.5%;
}
ha-icon {
position: relative;
padding: 11px;
border-radius: 50%;
--mdc-icon-size: 21px;
margin-top: -15px;
right: 4px;
}
bar-card-row, ha-icon {
color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
background: color-mix(in srgb, var(--bar-color) 20%, transparent);
}
bar-card-indicator {
color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
top: -8px;
}
bar-card-name {
margin-top: -27px !important;
left: 0px;
color: black;
}
bar-card-value {
margin-top: 8px !important;
font-size: 11px;
right: 96.9%;
width: 0px;
color: black;
}
ha-card {
margin: -4px 0px !important;
height: 60px;
}
bar-card-row bar-card-currentbar,
ha-icon, bar-card-backgroundbar {
--bar-color:
{% if states(config.entity) | int <= 10 %}
#ff0026 !important;
--card-mod-icon: mdi:battery-10 !important;
{% elif states(config.entity) | int <= 20 %}
#ff4d00 !important;
--card-mod-icon: mdi:battery-20 !important;
{% elif states(config.entity) | int <= 30 %}
#ff9900 !important;
--card-mod-icon: mdi:battery-30 !important;
{% elif states(config.entity) | int <= 40 %}
#ffcc00 !important;
--card-mod-icon: mdi:battery-40 !important;
{% elif states(config.entity) | int <= 50 %}
#e7fc03 !important;
--card-mod-icon: mdi:battery-50 !important;
{% elif states(config.entity) | int <= 60 %}
#aaff00 !important;
--card-mod-icon: mdi:battery-60 !important;
{% elif states(config.entity) | int <= 70 %}
#aaff00 !important;
--card-mod-icon: mdi:battery-70 !important;
{% elif states(config.entity) | int <= 80 %}
#22c402 !important;
--card-mod-icon: mdi:battery-80 !important;
{% elif states(config.entity) | int <= 90 %}
#22c402 !important;
--card-mod-icon: mdi:battery-90 !important;
{% elif states(config.entity) | int <= 100 %}
#22c402 !important;
--card-mod-icon: mdi:battery !important;
{% else %}
blue
mdi:bug
{% endif %}
}
bar-card-row ha-icon {
color: color-mix(in srgb, var(--bar-color) 100%, transparent);
background: color-mix(in srgb, var(--bar-color) 20%, transparent);
}
ha-card {
padding: 0px !important;
margin: -3px !important;
height: 60px;
border-width: 0px;
background: none;
--ha-card-box-shadow: 0px;
}
sort:
method: state
numeric: true
ip: false
ignore_case: false
reverse: false
show_empty: true
card_param: cards
1 Like
@Apolitosz As a feature request in my opinion. You can switch to a mushroom template card with a vertical stack ( I prefer stack- in-card) and achieve what you are looking for.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:air-humidifier
icon_color: purple
entity: humidifier.hoval_homevent_humidity
primary: Hoval HomeVent Humidity
secondary: |
{{ state_attr('humidifier.hoval_homevent_humidity','humidity') }}%
- type: custom:mushroom-humidifier-card
entity: humidifier.hoval_homevent_humidity
icon_type: none
primary_info: none
secondary_info: none
show_target_humidity_control: true
Didnāt test it, but shouldāt your {%else%} be
{% else %}
#0000FF !important;
--card-mod-icon: mdi:bug !important;
Here you go!
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: null
icon: mdi:battery
icon_color: green
content: Batteries
card_mod:
style: |
ha-card {
background: transparent;
border-style: none;
}
- type: custom:auto-entities
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding-top: 5px;
padding-bottom: 0px;
border-width: 0px;
background: none;
--ha-card-box-shadow: 0px;
}
filter:
include:
- entity_id: sensor.*battery
options:
type: custom:bar-card
card_mod:
style: |
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 12px !important;
height: 41px !important;
margin-top: -8px !important;
width: 101%;
right: 0.5%;
}
ha-icon {
position: relative;
padding: 11px;
border-radius: 50%;
--mdc-icon-size: 21px;
margin-top: -15px;
right: 4px;
}
bar-card-row, ha-icon {
color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
background: color-mix(in srgb, var(--bar-color) 20%, transparent);
}
bar-card-indicator {
color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
top: -8px;
}
bar-card-name {
margin-top: -27px !important;
left: 0px;
color: black;
}
bar-card-value {
margin-top: 8px !important;
font-size: 11px;
right: 96.9%;
width: 0px;
color: black;
}
ha-card {
margin: -4px 0px !important;
height: 60px;
}
bar-card-row bar-card-currentbar,
ha-icon, bar-card-backgroundbar {
--bar-color:
{% if states(config.entity) == 'unavailable' or states(config.entity) == 'none' %}
blue !important;
--card-mod-icon: mdi:bug !
blue !important;
--card-mod-icon: mdi:bug !important;
{% elif states(config.entity) | int <= 10 %}
#ff0026 !important;
--card-mod-icon: mdi:battery-10 !important;
{% elif states(config.entity) | int <= 20 %}
#ff4d00 !important;
--card-mod-icon: mdi:battery-20 !important;
{% elif states(config.entity) | int <= 30 %}
#ff9900 !important;
--card-mod-icon: mdi:battery-30 !important;
{% elif states(config.entity) | int <= 40 %}
#ffcc00 !important;
--card-mod-icon: mdi:battery-40 !important;
{% elif states(config.entity) | int <= 50 %}
#e7fc03 !important;
--card-mod-icon: mdi:battery-50 !important;
{% elif states(config.entity) | int <= 60 %}
#aaff00 !important;
--card-mod-icon: mdi:battery-60 !important;
{% elif states(config.entity) | int <= 70 %}
#aaff00 !important;
--card-mod-icon: mdi:battery-70 !important;
{% elif states(config.entity) | int <= 80 %}
#22c402 !important;
--card-mod-icon: mdi:battery-80 !important;
{% elif states(config.entity) | int <= 90 %}
#22c402 !important;
--card-mod-icon: mdi:battery-90 !important;
{% elif states(config.entity) | int <= 100 %}
#22c402 !important;
--card-mod-icon: mdi:battery !important;
{% endif %}
}
bar-card-row ha-icon {
color: color-mix(in srgb, var(--bar-color) 100%, transparent);
background: color-mix(in srgb, var(--bar-color) 20%, transparent);
}
ha-card {
padding: 0px !important;
margin: -3px !important;
height: 60px;
border-width: 0px;
background: none;
--ha-card-box-shadow: 0px;
}
sort:
method: state
numeric: true
ip: false
ignore_case: false
reverse: false
show_empty: true
card_param: cards
This doesnāt look right.
{% if states(config.entity) == 'unavailable' or states(config.entity) == 'none' %}
blue !important;
--card-mod-icon: mdi:bug !
blue !important;
--card-mod-icon: mdi:bug !important;
shouldnāt it be
{% if states(config.entity) == 'unavailable' or states(config.entity) == 'none' %}
blue !important;
--card-mod-icon: mdi:bug !important;
1 Like
Yes! Sorry things went a bit fast. Here is the corrected code:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: null
icon: mdi:battery
icon_color: green
content: Batteries
card_mod:
style: |
ha-card {
background: transparent;
border-style: none;
}
- type: custom:auto-entities
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding-top: 5px;
padding-bottom: 0px;
border-width: 0px;
background: none;
--ha-card-box-shadow: 0px;
}
filter:
include:
- entity_id: sensor.*battery
options:
type: custom:bar-card
card_mod:
style: |
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 12px !important;
height: 41px !important;
margin-top: -8px !important;
width: 101%;
right: 0.5%;
}
ha-icon {
position: relative;
padding: 11px;
border-radius: 50%;
--mdc-icon-size: 21px;
margin-top: -15px;
right: 4px;
}
bar-card-row, ha-icon {
color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
background: color-mix(in srgb, var(--bar-color) 20%, transparent);
}
bar-card-indicator {
color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
top: -8px;
}
bar-card-name {
margin-top: -27px !important;
left: 0px;
color: black;
}
bar-card-value {
margin-top: 8px !important;
font-size: 11px;
right: 96.9%;
width: 0px;
color: black;
}
ha-card {
margin: -4px 0px !important;
height: 60px;
}
bar-card-row bar-card-currentbar,
ha-icon, bar-card-backgroundbar {
--bar-color:
{% if states(config.entity) == 'unavailable' or states(config.entity) == 'none' %}
blue !important;
--card-mod-icon: mdi:bug !important;
{% elif states(config.entity) | int <= 10 %}
#ff0026 !important;
--card-mod-icon: mdi:battery-10 !important;
{% elif states(config.entity) | int <= 20 %}
#ff4d00 !important;
--card-mod-icon: mdi:battery-20 !important;
{% elif states(config.entity) | int <= 30 %}
#ff9900 !important;
--card-mod-icon: mdi:battery-30 !important;
{% elif states(config.entity) | int <= 40 %}
#ffcc00 !important;
--card-mod-icon: mdi:battery-40 !important;
{% elif states(config.entity) | int <= 50 %}
#e7fc03 !important;
--card-mod-icon: mdi:battery-50 !important;
{% elif states(config.entity) | int <= 60 %}
#aaff00 !important;
--card-mod-icon: mdi:battery-60 !important;
{% elif states(config.entity) | int <= 70 %}
#aaff00 !important;
--card-mod-icon: mdi:battery-70 !important;
{% elif states(config.entity) | int <= 80 %}
#22c402 !important;
--card-mod-icon: mdi:battery-80 !important;
{% elif states(config.entity) | int <= 90 %}
#22c402 !important;
--card-mod-icon: mdi:battery-90 !important;
{% elif states(config.entity) | int <= 100 %}
#22c402 !important;
--card-mod-icon: mdi:battery !important;
{% endif %}
}
bar-card-row ha-icon {
color: color-mix(in srgb, var(--bar-color) 100%, transparent);
background: color-mix(in srgb, var(--bar-color) 20%, transparent);
}
ha-card {
padding: 0px !important;
margin: -3px !important;
height: 60px;
border-width: 0px;
background: none;
--ha-card-box-shadow: 0px;
}
sort:
method: state
numeric: true
ip: false
ignore_case: false
reverse: false
show_empty: true
card_param: cards
1 Like
Has anyone a nice visual to manipulate the fan speed of a climate module?
I have the option to put the speed from 1-5, but I donāt know how to make it visual actractive for an mobile appā¦
Hi All,
Someone could help me?
Thanks in advance