is the Pollenflug Card an Auto Entities Card? Can you share them?
not, but conditional.
type: vertical-stack
cards:
- type: markdown
content: >
<h2><font color= lightgrey><ha-icon
icon="mdi:flower-pollen-outline"></ha-icon> Pollenflug</font></h2>
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
--ha-card-border-width: 0;
}
- type: horizontal-stack
cards:
- type: conditional
conditions:
- condition: state
entity: sensor.pollenflug_ambrosia_50
state_not: '0'
card:
type: custom:mushroom-entity-card
name: Ambrosia
entity: sensor.pollenflug_ambrosia_50
icon_color: grey
card_mod:
style: |
ha-state-icon {
{% if is_state('sensor.pollenflug_ambrosia_50', "0") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "0.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "1") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "1.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "2") %}
--icon-color: #83BB6A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "3") %}
--icon-color: #A0BB6A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "4") %}
--icon-color: #BDBB6A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "5") %}
--icon-color: #DABB6A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "6") %}
--icon-color: #F7BB6A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "7") %}
--icon-color: #FFA06A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "8") %}
--icon-color: #FF856A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "9") %}
--icon-color: #FF6B6A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "10") %}
--icon-color: #FF506A !important;
{% elif is_state('sensor.pollenflug_ambrosia_50', "11") %}
--icon-color: #FF366A !important;
{% endif %};
}
- type: conditional
conditions:
- condition: state
entity: sensor.pollenflug_beifuss_50
state_not: '0'
card:
type: custom:mushroom-entity-card
name: Beifuß
entity: sensor.pollenflug_beifuss_50
icon_color: grey
card_mod:
style: |
ha-state-icon {
{% if is_state('sensor.pollenflug_beifuss_50', "0") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "0.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "1") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "1.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "2") %}
--icon-color: #83BB6A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "3") %}
--icon-color: #A0BB6A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "4") %}
--icon-color: #BDBB6A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "5") %}
--icon-color: #DABB6A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "6") %}
--icon-color: #F7BB6A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "7") %}
--icon-color: #FFA06A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "8") %}
--icon-color: #FF856A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "9") %}
--icon-color: #FF6B6A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "10") %}
--icon-color: #FF506A !important;
{% elif is_state('sensor.pollenflug_beifuss_50', "11") %}
--icon-color: #FF366A !important;
{% endif %};
}
- type: horizontal-stack
cards:
- type: conditional
conditions:
- condition: state
entity: sensor.pollenflug_birke_50
state_not: '0'
card:
type: custom:mushroom-entity-card
name: Birke
entity: sensor.pollenflug_birke_50
icon_color: grey
card_mod:
style: |
ha-state-icon {
{% if is_state('sensor.pollenflug_birke_50', "0") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_birke_50', "0.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_birke_50', "1") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_birke_50', "1.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_birke_50', "2") %}
--icon-color: #83BB6A !important;
{% elif is_state('sensor.pollenflug_birke_50', "3") %}
--icon-color: #A0BB6A !important;
{% elif is_state('sensor.pollenflug_birke_50', "4") %}
--icon-color: #BDBB6A !important;
{% elif is_state('sensor.pollenflug_birke_50', "5") %}
--icon-color: #DABB6A !important;
{% elif is_state('sensor.pollenflug_birke_50', "6") %}
--icon-color: #F7BB6A !important;
{% elif is_state('sensor.pollenflug_birke_50', "7") %}
--icon-color: #FFA06A !important;
{% elif is_state('sensor.pollenflug_birke_50', "8") %}
--icon-color: #FF856A !important;
{% elif is_state('sensor.pollenflug_birke_50', "9") %}
--icon-color: #FF6B6A !important;
{% elif is_state('sensor.pollenflug_birke_50', "10") %}
--icon-color: #FF506A !important;
{% elif is_state('sensor.pollenflug_birke_50', "11") %}
--icon-color: #FF366A !important;
{% endif %};
}
- type: conditional
conditions:
- condition: state
entity: sensor.pollenflug_erle_50
state_not: '0'
card:
type: custom:mushroom-entity-card
name: Erle
entity: sensor.pollenflug_erle_50
icon_color: grey
card_mod:
style: |
ha-state-icon {
{% if is_state('sensor.pollenflug_erle_50', "0") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_erle_50', "0.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_erle_50', "1") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_erle_50', "1.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_erle_50', "2") %}
--icon-color: #83BB6A !important;
{% elif is_state('sensor.pollenflug_erle_50', "3") %}
--icon-color: #A0BB6A !important;
{% elif is_state('sensor.pollenflug_erle_50', "4") %}
--icon-color: #BDBB6A !important;
{% elif is_state('sensor.pollenflug_erle_50', "5") %}
--icon-color: #DABB6A !important;
{% elif is_state('sensor.pollenflug_erle_50', "6") %}
--icon-color: #F7BB6A !important;
{% elif is_state('sensor.pollenflug_erle_50', "7") %}
--icon-color: #FFA06A !important;
{% elif is_state('sensor.pollenflug_erle_50', "8") %}
--icon-color: #FF856A !important;
{% elif is_state('sensor.pollenflug_erle_50', "9") %}
--icon-color: #FF6B6A !important;
{% elif is_state('sensor.pollenflug_erle_50', "10") %}
--icon-color: #FF506A !important;
{% elif is_state('sensor.pollenflug_erle_50', "11") %}
--icon-color: #FF366A !important;
{% endif %};
}
- type: horizontal-stack
cards:
- type: conditional
conditions:
- condition: state
entity: sensor.pollenflug_esche_50
state_not: '0'
card:
type: custom:mushroom-entity-card
name: Esche
entity: sensor.pollenflug_esche_50
icon_color: grey
card_mod:
style: |
ha-state-icon {
{% if is_state('sensor.pollenflug_esche_50', "0") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_esche_50', "0.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_esche_50', "1") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_esche_50', "1.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_esche_50', "2") %}
--icon-color: #83BB6A !important;
{% elif is_state('sensor.pollenflug_esche_50', "3") %}
--icon-color: #A0BB6A !important;
{% elif is_state('sensor.pollenflug_esche_50', "4") %}
--icon-color: #BDBB6A !important;
{% elif is_state('sensor.pollenflug_esche_50', "5") %}
--icon-color: #DABB6A !important;
{% elif is_state('sensor.pollenflug_esche_50', "6") %}
--icon-color: #F7BB6A !important;
{% elif is_state('sensor.pollenflug_esche_50', "7") %}
--icon-color: #FFA06A !important;
{% elif is_state('sensor.pollenflug_esche_50', "8") %}
--icon-color: #FF856A !important;
{% elif is_state('sensor.pollenflug_esche_50', "9") %}
--icon-color: #FF6B6A !important;
{% elif is_state('sensor.pollenflug_esche_50', "10") %}
--icon-color: #FF506A !important;
{% elif is_state('sensor.pollenflug_esche_50', "11") %}
--icon-color: #FF366A !important;
{% endif %};
}
- type: conditional
conditions:
- condition: state
entity: sensor.pollenflug_graeser_50
state_not: '0'
card:
type: custom:mushroom-entity-card
name: Gräser
entity: sensor.pollenflug_graeser_50
icon_color: grey
card_mod:
style: |
ha-state-icon {
{% if is_state('sensor.pollenflug_graeser_50', "0") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "0.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "1") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "1.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "2") %}
--icon-color: #83BB6A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "3") %}
--icon-color: #A0BB6A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "4") %}
--icon-color: #BDBB6A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "5") %}
--icon-color: #DABB6A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "6") %}
--icon-color: #F7BB6A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "7") %}
--icon-color: #FFA06A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "8") %}
--icon-color: #FF856A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "9") %}
--icon-color: #FF6B6A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "10") %}
--icon-color: #FF506A !important;
{% elif is_state('sensor.pollenflug_graeser_50', "11") %}
--icon-color: #FF366A !important;
{% endif %};
}
- type: horizontal-stack
cards:
- type: conditional
conditions:
- condition: state
entity: sensor.pollenflug_hasel_50
state_not: '0'
card:
type: custom:mushroom-entity-card
name: Hasel
entity: sensor.pollenflug_hasel_50
icon_color: grey
card_mod:
style: |
ha-state-icon {
{% if is_state('sensor.pollenflug_hasel_50', "0") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "0.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "1") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "1.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "2") %}
--icon-color: #83BB6A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "3") %}
--icon-color: #A0BB6A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "4") %}
--icon-color: #BDBB6A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "5") %}
--icon-color: #DABB6A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "6") %}
--icon-color: #F7BB6A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "7") %}
--icon-color: #FFA06A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "8") %}
--icon-color: #FF856A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "9") %}
--icon-color: #FF6B6A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "10") %}
--icon-color: #FF506A !important;
{% elif is_state('sensor.pollenflug_hasel_50', "11") %}
--icon-color: #FF366A !important;
{% endif %};
}
- type: conditional
conditions:
- condition: state
entity: sensor.pollenflug_roggen_50
state_not: '0'
card:
type: custom:mushroom-entity-card
name: Roggen
entity: sensor.pollenflug_roggen_50
icon_color: grey
card_mod:
style: |
ha-state-icon {
{% if is_state('sensor.pollenflug_roggen_50', "0") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "0.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "1") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "1.5") %}
--icon-color: #66BB6A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "2") %}
--icon-color: #83BB6A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "3") %}
--icon-color: #A0BB6A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "4") %}
--icon-color: #BDBB6A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "5") %}
--icon-color: #DABB6A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "6") %}
--icon-color: #F7BB6A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "7") %}
--icon-color: #FFA06A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "8") %}
--icon-color: #FF856A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "9") %}
--icon-color: #FF6B6A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "10") %}
--icon-color: #FF506A !important;
{% elif is_state('sensor.pollenflug_roggen_50', "11") %}
--icon-color: #FF366A !important;
{% endif %};
}
i will provide a github-link, because the first page/dashboard has over 1600 lines of code 
https://github.com/b1ackbyte/HomeAssistant/tree/f0166fa91f9ead7d7030f0a3a52f8b5cdf361de5
Just ask, if i forgot something.
Hello, does anyone have examples of animation of icons for heating, humidification and air conditioning? I’ve been leafing through the forum all day, but I haven’t found any suitable examples. I would appreciate any code example. I found one example on heating, I’ll attach it, maybe it will be useful to someone. 
type: custom:mushroom-template-card
icon: mdi:radiator
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''disabled'' }}'
primary: heater
secondary: ''
entity: input_boolean.vkliuchenie_rozetok_kukhnia
tap_action:
action: toggle
fill_container: true
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: clip 1s linear infinite;' if is_state(config.entity, 'on') }}
transform-origin: 29% 88%;
}
@keyframes clip {
0% {
clip-path: inset(50% 0 0 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}
.shape {
{{ '--shape-animation: ping 2s infinite;' if is_state(config.entity, 'on') }}
transform-origin: 29% 88%;
}
@keyframes ping {
0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-red), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
.: |
ha-card {
background: none;
box-shadow: none;
margin-left: -0px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
#width: 75%;
}
You did find “Part 1” I assume?
Because in there, there are tons of anitmation examples. You can start (approx.) here:
1 Like
Hi!
Is there a way to put text on an action chip card?
Guys, after a long time without any issue…
Some update broken my dashboard.
The space between the chips is too big.
I already tried to adjust “–chip-spacing:” property but no success.
See below how it was before:
After the update, the space is too big that a second line is being showed 
Does someone knows how to fix this space between the icons?
This is the code:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Sala
icon: mdi:sofa-outline
layout: hotizontal
multiline_secondary: false
fill_container: true
entity: light.luzes_sala
tap_action:
action: navigate
navigation_path: sala
hold_action:
action: none
double_tap_action:
action: toggle
icon_color: |-
{% if is_state('light.luzes_sala', 'on') %}
amber
{% else %}
blue
{% endif %}
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
alignment: end
chips:
- type: template
entity: media_player.tv_da_sala
icon: |-
{% set state=states(entity) %}
{% if state=='on' %}
mdi:television-play
{% elif state=='off' %}
mdi:television-off
{% else %}
mdi:television-off
{% endif %}
tap_action:
action: none
icon_color: |-
{% set state=states(entity) %}
{% if state=='on' %}
blue
{% elif state=='off' %}
grey
{% else %}
grey
{% endif %}
- type: template
entity: switch.porta_virtual
icon: |-
{% set state=states(entity) %}
{% if state=='on' %}
mdi:door-open
{% elif state=='off' %}
mdi:door-closed
{% else %}
mdi:door
{% endif %}
icon_color: |-
{% set state=states(entity) %}
{% if state=='on' %}
blue
{% elif state=='off' %}
grey
{% else %}
grey
{% endif %}
tap_action:
action: none
- type: template
entity: binary_sensor.janela_da_sala_contact
icon: |-
{% set state=states(entity) %}
{% if state=='on' %}
mdi:window-open-variant
{% elif state=='off' %}
mdi:window-closed-variant
{% else %}
mdi:window-closed-variant
{% endif %}
tap_action:
action: none
icon_color: |-
{% set state=states(entity) %}
{% if state=='on' %}
blue
{% elif state=='off' %}
grey
{% else %}
grey
{% endif %}
- type: template
entity: binary_sensor.pir_da_sala_occupancy
icon: |-
{% set state=states(entity) %}
{% if state=='on' %}
mdi:motion-sensor
{% elif state=='off' %}
mdi:motion-sensor-off
{% else %}
mdi:motion-sensor
{% endif %}
tap_action:
action: none
icon_color: |-
{% set state=states(entity) %}
{% if state=='on' %}
blue
{% elif state=='off' %}
grey
{% else %}
grey
{% endif %}
- type: conditional
conditions:
- entity: fan.ventilador
state: 'on'
chip:
type: template
icon_color: blue
entity: fan.ventilador
icon: mdi:fan
tap_action:
action: toggle
- type: conditional
conditions:
- entity: media_player.echo_show_da_sala
state: playing
chip:
type: template
icon_color: blue
entity: media_player.echo_show_da_sala
icon: mdi:music
tap_action: none
style: |
ha-card {
height: 102px;
}
1 Like
Hello friends, please tell me, this code contains the animation I need, but when I insert an icon into the code, it starts to rotate along with the animation. Is there any way to stop the icon from rotating but still have the animation around the icon continue to rotate? is this even real?
type: custom:mushroom-template-card
icon: none
primary: Dual
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: spin 1s ease infinite;
border: 4px solid transparent;
border-top-color: rgb(var(--rgb-deep-orange));
border-bottom-color: rgb(var(--rgb-deep-orange));
--shape-color: none !important;
--icon-size: 34px;
}
I have been playing around with the different options you have helped me with.
This last one is the best in terms of supporting different devices/orientations but I much prefer two separate entitities (with a border/gap between - so they look normal in my dashboard).
Overall, I like the following design the most and I think I can build on this concept for a number of my dashboard views.
I would like to develop this idea so that any cell in the grid can have a stack in card and the chips can be aligned to either the cell or the entity card in the cell. Do you think this is possible.
Below is my fav design and yaml.
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr
grid-template-rows: 75px 75px
margin: 5px 0px -10px 0px
cards:
- type: custom:mushroom-template-card
primary: Watering Setup
secondary: |
Profile: {{ states ('input_select.watering_schedule') }}
icon: mdi:sprinkler-variant
tap_action:
action: call-service
service: script.set_watering_schedule
target: {}
hold_action:
action: none
multiline_secondary: true
fill_container: false
double_tap_action:
action: none
entity: script.set_watering_schedule
icon_color: >-
{% if state_attr ('script.set_watering_schedule', 'last_triggered') +
timedelta (hours = 24) < now() %} red {% else %} green {% endif %}
- type: custom:mushroom-entity-card
entity: input_boolean.watering_smart
name: Smart Watering
icon: mdi:toggle-switch
layout: horizontal
tap_action:
action: toggle
double_tap_action:
action: none
- type: custom:mushroom-entity-card
entity: switch.linktap_tap_front
name: Front
fill_container: true
- type: custom:mushroom-entity-card
entity: switch.linktap_tap_back
name: Back
fill_container: true
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.linktap_tap_front_battery
icon: mdi:battery-charging
icon_color: >-
{% if states ('sensor.linktap_tap_front_battery') | int(0) < 30 %}
red {% elif states ('sensor.linktap_tap_front_battery') | int(0)
< 50 %} orange {% else %} green {% endif %}
content: '{{ states (''sensor.linktap_tap_front_battery'') }}%'
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: template
entity: sensor.linktap_tap_front_signal
icon: mdi:wifi
icon_color: >-
{% if states ('sensor.linktap_tap_front_signal') | int < 30 %}
red {% elif states ('sensor.linktap_tap_front_signal') | int < 50
%} orange {% else %} green {% endif %}
content: '{{ states (''sensor.linktap_tap_front_signal'') }}%'
tap_action:
action: more-info
alignment: justify
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
card_mod:
style: |
ha-card {
position: absolute;
top: 87px;
left: 170px;
width: 60px;
--chip-spacing: -12px;
--chip-background: none;
}
@media screen and (max-width: 400px) {
ha-card {
position: absolute;
top: 87px;
left: 120px;
width: 60px;
--chip-spacing: -12px;
--chip-background: none;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.linktap_tap_back_battery
icon: mdi:battery-charging
icon_color: >-
{% if states ('sensor.linktap_tap_back_battery') | int(0) < 30 %}
red {% elif states ('sensor.linktap_tap_back_battery') | int(0) <
50 %} orange {% else %} green {% endif %}
content: '{{ states (''sensor.linktap_tap_back_battery'') }}%'
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: template
entity: sensor.linktap_tap_back_signal
icon: mdi:wifi
icon_color: >-
{% if states ('sensor.linktap_tap_back_signal') | int < 30 %} red
{% elif states ('sensor.linktap_tap_back_signal') | int < 50 %}
orange {% else %} green {% endif %}
content: '{{ states (''sensor.linktap_tap_back_signal'') }}%'
tap_action:
action: more-info
alignment: justify
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
card_mod:
style: |
ha-card {
position: absolute;
top: 87px;
right: 10px;
width: 60px;
--chip-spacing: -12px;
--chip-background: none;
}
@media screen and (max-width: 400px) {
ha-card {
position: absolute;
top: 87px;
right: 10px;
width: 60px;
--chip-spacing: -12px;
--chip-background: none;
}
5 Likes
May I ask something. Is there a way to extend the clickable area of “tap_actions” ? Whenever I play with the height of the card I see tap actions has a limited area where we can click and activate the service. Playing with the height causes the bottom part of any card to become unclickable.
I haven’t tested it, but reducing padding may resolve what you are describing.
This is what your card layout looks like
Can you give me an example of the card you are working with? With so many different designs, I imagine it will be different based on individual cards.
2 Likes
type: custom:mushroom-template-card
entity: entity.entity
icon: null
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.secret_main_screen_lights_page
primary: TELEVİZYON
secondary: |
{{ states('sensor.tv_group_count') }}
fill_container: false
multiline_secondary: false
layout: vertical
picture: null
card_mod:
style: |
ha-card {
cursor: pointer;
height: 180px !important;
}
Ok. This is a simple example. The bottom of the card is not clikable.
Guys someone had a deal with timer bar card over mushrooms style?
I wonder if there is any way to move the timer somewhere in the center or position it to the right? I tried several options for the card mod, but other than changing the text style, nothing else worked.
This will increase your tap _action area. Credit goes to @Ildar_Gabdullin for an educating example that I converted to a Mushroom card…
**Please do not like this post.
type: custom:mushroom-template-card
entity: entity.entity
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.sprinklers_on
primary: TELEVİZYON
secondary: |
{{ states('sensor.tv_group_count') }}
fill_container: false
multiline_secondary: false
layout: vertical
card_mod:
style: |
mushroom-state-item {
background: green;
height: 140px;
padding-left: 100px !important;
display: flex;
align-items: center;
padding-right: 100px !important;
}
ha-card {
cursor: pointer;
align-items: center;
}
Hello!!!
Somebody can help out here?
Please post your code to expedite a solution.
Here we go:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Sala
icon: mdi:sofa-outline
layout: hotizontal
multiline_secondary: false
fill_container: true
entity: light.luzes_sala
tap_action:
action: navigate
navigation_path: sala
hold_action:
action: none
double_tap_action:
action: toggle
icon_color: |-
{% if is_state('light.luzes_sala', 'on') %}
amber
{% else %}
blue
{% endif %}
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
alignment: end
chips:
- type: template
entity: media_player.tv_da_sala
icon: |-
{% set state=states(entity) %}
{% if state=='on' %}
mdi:television-play
{% elif state=='off' %}
mdi:television-off
{% else %}
mdi:television-off
{% endif %}
tap_action:
action: none
icon_color: |-
{% set state=states(entity) %}
{% if state=='on' %}
blue
{% elif state=='off' %}
grey
{% else %}
grey
{% endif %}
- type: template
entity: switch.porta_virtual
icon: |-
{% set state=states(entity) %}
{% if state=='on' %}
mdi:door-open
{% elif state=='off' %}
mdi:door-closed
{% else %}
mdi:door
{% endif %}
icon_color: |-
{% set state=states(entity) %}
{% if state=='on' %}
blue
{% elif state=='off' %}
grey
{% else %}
grey
{% endif %}
tap_action:
action: none
- type: template
entity: binary_sensor.janela_da_sala_contact
icon: |-
{% set state=states(entity) %}
{% if state=='on' %}
mdi:window-open-variant
{% elif state=='off' %}
mdi:window-closed-variant
{% else %}
mdi:window-closed-variant
{% endif %}
tap_action:
action: none
icon_color: |-
{% set state=states(entity) %}
{% if state=='on' %}
blue
{% elif state=='off' %}
grey
{% else %}
grey
{% endif %}
- type: template
entity: binary_sensor.pir_da_sala_occupancy
icon: |-
{% set state=states(entity) %}
{% if state=='on' %}
mdi:motion-sensor
{% elif state=='off' %}
mdi:motion-sensor-off
{% else %}
mdi:motion-sensor
{% endif %}
tap_action:
action: none
icon_color: |-
{% set state=states(entity) %}
{% if state=='on' %}
blue
{% elif state=='off' %}
grey
{% else %}
grey
{% endif %}
- type: conditional
conditions:
- entity: fan.ventilador
state: 'on'
chip:
type: template
icon_color: blue
entity: fan.ventilador
icon: mdi:fan
tap_action:
action: toggle
- type: conditional
conditions:
- entity: media_player.echo_show_da_sala
state: playing
chip:
type: template
icon_color: blue
entity: media_player.echo_show_da_sala
icon: mdi:music
tap_action: none
style: |
ha-card {
height: 102px;
}
You cannot just have style: | That changed several months ago. It must include card_mod:
That will apply to all instances of style: | in this card
Lines 24 -31
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: -5px;
}