Hi, is there a possibility of adding PIR Sensors, Contact Sensors, Vibration Sensors and Water Sensors. These would really make this project complete.
Can you change the Mushroom Cover Card from open to Up and closed to down?
Try thisā¦
icon: >-
{% if states('sensor.sensore_ingresso_illuminance_lux') | int >= 20 %}
mdi:brightness-5
{% else %}
mdi:brightness-4
{% endif %}
icon_color: >-
{% if states('sensor.sensore_ingresso_illuminance_lux') | int >= 20 %}
yellow
{% else %}
grey
{% endif %}
1 Like
The Mushroom template card can handle the sensors you listed. Check it out, itās extremely customizable especially with card mod installed.
Looks really nice! I try to merge two codes but I do not know how. May somebody help me please?!
Both codes are working independantly but I would like to get both together 
Many thanks in advance!!!
Code for animation
- type: custom:mushroom-entity-card
entity: binary_sensor.balkontur_battery
name: BalkontĆ¼r
icon: ''
tap_action:
action: more-info
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% if is_state(config.entity, 'on')%}
animation: blink 2s linear infinite;
{% endif %}
}
@keyframes blink {
50% {opacity: 0;}
}
Code for removing background + changing color
- type: custom:mushroom-entity-card
entity: binary_sensor.balkontur_battery
name: BalkontĆ¼r
icon: ''
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
.: |
ha-state-icon {
color:
{% if is_state(config.entity, 'on') %}
var(--error-color)
{% else %}
{% endif %};
}
This should get you what you are looking for
type: custom:mushroom-entity-card
entity: binary_sensor.balkontur_battery
name: BalkontĆ¼r
icon: ''
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
.: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
color: var(--error-color) !important;
animation: blink 2s linear infinite;
{% else %}
{% endif %}
}
@keyframes blink {
50% {opacity: 0;}
1 Like
It works, many thanks for the fast solution!!!
1 Like
Any idea why I cant have space between word in my mushroom card? It also shows in the power chip card in the bottom right where it seems to be a space between Value and Unitā¦
No, it should not be Kitchen Roomā¦ its just an example of my problem.
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:knife
icon_color: |
{% if is_state(entity, 'on') %}
amber
{% else %}
#03A9F4
{% endif %}
primary: Kitchen Room
secondary: '{{ states(''sensor.aqara_vardagsrum_temperature'')|round(2) }}Ā°C'
layout: horizontal
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/kitchen
double_tap_action:
action: toggle
hold_action:
action: none
badge_icon: >
#{% if
is_state('binary_sensor.lumi_lumi_sensor_motion_aq2_occupancy_2',
'on') %}
# mdi:motion-sensor
#{% else %}
# mdi:motion-sensor-off
#{% endif %}
badge_color: >
#{% if
is_state('binary_sensor.lumi_lumi_sensor_motion_aq2_occupancy_2',
'on') %}
# blue
#{% else %}
# grey
#{% endif %}
fill_container: false
multiline_secondary: false
entity: light.takbelysning_kok
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
top: -50px;
left: -155px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -52px;
left: -155px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -43px;
top: 55px;
}
.: |
:host {
--mush-icon-size: 146px;
}
ha-card {
background: none;
}
style: |
mushroom-badge-icon {
left: 135px;
top: 8px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
card_mod:
style: |
ha-card {
--chip-background: none;
--chip-box-shadow: none;
--chip-border-width: 0;
--chip-height: 2px;
--chip-padding: 5em
}
- type: light
entity: light.kitchen_group
card_mod:
style: |
ha-card {
--chip-background: none;
--chip-box-shadow: none;
--chip-border-width: 0;
--chip-icon-size: 35px;
--chip-font-size: 0;
}
- type: template
card_mod:
style: |
ha-card {
--chip-background: none;
--chip-box-shadow: none;
--chip-border-width: 0;
--chip-height: 70px;
}
- type: entity
entity: sensor.varmepump_garage_power
icon: mdi:lightning-bolt
alignment: end
card_mod:
style:
.: |
ha-card {
width: 40%;
margin-left: 59%;
top: -165px;
--chip-background: none;
--chip-box-shadow: none;
--chip-border-width: 0;
--chip-icon-size: 25px;
}
card_mod:
style: |
ha-card {
height: 178px;
margin-left: auto;
margin-right: auto;
border-style: none;
box-shadow: none;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:sofa
icon_color: |
{% if is_state(entity, 'on') %}
amber
{% else %}
#03A9F4
{% endif %}
primary: Vardagsrum
secondary: '{{ states(''sensor.aqara_vardagsrum_temperature'')|round(2) }}Ā°C'
layout: horizontal
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/living-room
double_tap_action:
action: toggle
hold_action:
action: none
badge_icon: >
{% if
is_state('binary_sensor.lumi_lumi_sensor_motion_aq2_occupancy_2',
'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
badge_color: >
{% if
is_state('binary_sensor.lumi_lumi_sensor_motion_aq2_occupancy_2',
'on') %}
blue
{% else %}
grey
{% endif %}
fill_container: false
multiline_secondary: false
entity: light.takbelysning_vardagsrum
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
top: -50px;
left: -155px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -52px;
left: -155px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -43px;
top: 55px;
}
.: |
:host {
--mush-icon-size: 146px;
}
ha-card {
background: none;
}
style: |
mushroom-badge-icon {
left: 135px;
top: 8px;
}
- type: custom:mushroom-chips-card
chips: []
alignment: end
card_mod:
style:
.: |
ha-card {
width: 40%;
margin-left: 60%;
top: -35px;
background: none;
--chip-background: none;
--chip-box-shadow: none;
--chip-border-width: thin;
--chip-icon-size: 25px;
}
card_mod:
style: |
ha-card {
height: 178px;
margin-left: auto;
margin-right: auto;
border-style: none;
box-shadow: none;
}
1 Like
Thank you very much, Iām grateful
in all my trials I had never come to this āintā
| int >= 20 %}
int simply refers to integers (whole numbers), without decimals, such as 123 or -123.
Check out Java Variables hereā¦
1 Like
Thank you very much! I love it! 
Hi all. I just discovered in this thread the possibility to animate icons. That looks great and thought Iād start with a āsimpleā example of one of the media players. However, even when copying the basic config it doesnāt animate. Possible that I am missing a prerequisite?
type: custom:mushroom-template-card
icon: mdi:speaker
icon_color: '{{ ''primary'' if is_state(entity, ''playing'') }}'
entity: media_player.living_room_speaker
layout: vertical
secondary: ''
primary: ''
badge_icon: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-animation: beat 1.3s ease-out infinite both;
transform-origin: 50% 60%;
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
look at the updated animations that i have linked to many times in this thread 
1 Like
- type: template
entity: light.bureau_verlichting_kast
icon: mdi:led-strip-variant
icon_color: >
{% if is_state("light.bureau_verlichting_kast", 'on') %}
[86,86,86]
{% else %}
[36,36,36]
{% endif %}
card_mod:
style: |
ha-card {
pointer-events: none;
}
It looks like the card mod is not working because I still can point the icon. What is wrong here ?
try like this:
type: custom:mushroom-chips-card
chips:
- type: template
entity: light.office_desk_lamp
icon: mdi:led-strip-variant
icon_color: |
{% if is_state("light.bureau_verlichting_kast", 'on') %}
[86,86,86]
{% else %}
[36,36,36]
{% endif %}
- type: template
entity: light.office_desk_lamp
icon: mdi:led-strip-variant
icon_color: |
{% if is_state("light.bureau_verlichting_kast", 'on') %}
[86,86,86]
{% else %}
[36,36,36]
{% endif %}
card_mod:
style: |
mushroom-template-chip:nth-child(1) {
pointer-events: none;
}
i added a second chip just to show that it applies only to the first chip because of the nth-child(1) if you need to apply to multiple chips add the same bit of code and increment the number.
1 Like
Many thanks!!! I will have a look later on and see how I can integrate that in my card(s). Thank you!
- type: custom:mushroom-template-card
entity: input_boolean.airco_tvruimte_krachtig
icon: >
{% if is_state("input_boolean.airco_tvruimte_krachtig", 'on') %}
mdi:toggle-switch
{% else %}
mdi:toggle-switch-off
{% endif %}
icon_color: >
{% if is_state("input_boolean.airco_tvruimte_krachtig", 'on') %}
[102, 204, 0]
{% else %}
[200, 62, 77]
{% endif %}
fill_container: true
multiline_secondary: false
tap_action:
action: call-service
service: script.airco_tvhoek_krachtig
service_data:
entity_id: script.airco_tvhoek_krachtig
card_mod:
style: |
ha-card {
padding-top: 15px;
padding-right: 4px;
}
this is the script when the button is pressed
alias: Airco_tvhoek_krachtig
sequence:
- service: input_boolean.turn_on
target:
entity_id:
- input_boolean.tvruimte_airco_krachtig
data: {}
- service: climate.set_preset_mode
target:
entity_id:
- climate.tv_ruimte
data:
preset_mode: boost
- service: input_boolean.turn_off
data: {}
target:
entity_id: input_boolean.tvruimte_airco_vraagbesturing
- delay:
hours: 0
minutes: 2
seconds: 0
milliseconds: 0
- service: input_boolean.turn_off
target:
entity_id:
- input_boolean.tvruimte_airco_krachtig
data: {}
- service: climate.set_preset_mode
target:
entity_id:
- climate.tv_ruimte
data:
preset_mode: none
mode: single
icon: mdi:fan
if I look at my input_boolean.airco_tvruimte_krachtig, it never gets on. What is wrong ? The boost function works, but my icon does not change colourā¦
Hi,
I wantt to have on the top a bar of chips for state icons. If they are on, you see de icon. I have that working only I want to have the every chip on his same position when the state is active. I have this and the icons. Now the position changes of the other icons when another becomes active. The only thing I can think about is setting the color when itās off to the same as the background. Any other ideas?
type: custom:mushroom-chips-card
alignment: center
card_mod:
style: |
ha-card {
--chip-font-size: 25px;
--chip-icon-size: 25px;
}
chips:
- type: template
entity: binary_sensor.garage2
icon: mdi:garage-open
card_mod:
style: |
ha-card {
background: none !important;
border: none !important;
{% if not is_state('binary_sensor.garage2', 'on') %}
display: none !important;
{% endif %}
}
- type: template
entity: lock.schuurdeur
icon: mdi:door-closed-lock
card_mod:
style: |
ha-card {
background: none !important;
border: none !important;
{% if not is_state('binary_sensor.schuurdeur2', 'on') %}
display: none !important;
{% endif %}
}
- type: template
icon: mdi:monitor
icon_color: gray
card_mod:
style: |
ha-card {
background: none !important;
border: none !important;
{% if not is_state('binary_sensor.tv_on', 'on') %}
display: none !important;
{% endif %}
}
- type: template
icon: mdi:speaker
icon_color: gray
card_mod:
style: |
ha-card {
background: none !important;
border: none !important;
{% if not is_state('binary_sensor.radio_on', 'on') %}
display: none !important;
{% endif %}
}
1 Like
@kroonen You can define the type of positioning method used for an element . I think this is what you are trying to accomplish.
I added
position: absolute; left: 20px;
and then added 40px to each element to space them out. Adjust the px value to space them out the way you want.
Card code
type: custom:mushroom-chips-card
alignment: center
card_mod:
style: |
ha-card {
--chip-font-size: 25px;
--chip-icon-size: 25px;
}
chips:
- type: template
entity: binary_sensor.garage2
icon: mdi:garage-open
card_mod:
style: |
ha-card {
background: none !important;
border: none !important;
position: absolute;
left: 20px;
{% if not is_state('binary_sensor.garage2', 'on') %}
display: none !important;
{% endif %}
}
- type: template
entity: lock.schuurdeur
icon: mdi:door-closed-lock
card_mod:
style: |
ha-card {
background: none !important;
border: none !important;
position: absolute;
left: 60px;
{% if not is_state('binary_sensor.schuurdeur2', 'on') %}
display: none !important;
{% endif %}
}
- type: template
icon: mdi:monitor
icon_color: gray
card_mod:
style: |
ha-card {
background: none !important;
border: none !important;
position: absolute;
left: 100px;
{% if not is_state('binary_sensor.tv_on', 'on') %}
display: none !important;
{% endif %}
}
- type: template
icon: mdi:speaker
icon_color: gray
card_mod:
style: |
ha-card {
background: none !important;
border: none !important;
position: absolute;
left: 160px;
{% if not is_state('binary_sensor.radio_on', 'on') %}
display: none !important;
{% endif %}
}
1 Like
- type: template
entity: light.bureau_verlichting_kast
icon: mdi:led-strip-variant
icon_color: >
{% if is_state("light.bureau_verlichting_kast", 'on') %}
[86,86,86]
{% else %}
[36,36,36]
{% endif %}
I want the icon in the color of the attribute of the entity. How do I it ?
brightness: 255
rgb_color: 255, 0, 128