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;
}
Hello, can anyone give me some advice? Is it possible for the icon inside the animation not to rotate? and the animation itself continued its action, thank you
hi there,
I tried different ways, but I dont understand where is my problem…
I want a simple card what show the current timer and name of the entity if the entity is active…
can anybody tell me what could be a correct yaml?
The only way I know is to place a pseudo element behind the icon. The pseudo element spins and the icon does not .
type: custom:mushroom-template-card
icon: mdi:radiator
primary: Dual
secondary: ''
icon_color: blue
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.shape:after {
content: '';
position: absolute;
width: inherit;
height: inherit;
border: 4px solid transparent;
border-top-color: rgb(var(--rgb-deep-orange));
border-bottom-color: rgb(var(--rgb-deep-orange));
border-radius:50%;
animation: spin 2s ease infinite;
}
@keyframes circle {
0% {transform: rotate(0deg);}
100% {transform:rotate(360deg);}
}
4 Likes
Thank you very much friend!!! This solution works!
1 Like
Happy to assist!!
Hello,
i have the following issue since the last update for my room card:
The chips are not alligned in the middle anymore. Can anyone help to fix this?
Code
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Wohnzimmer
secondary: >-
🌡️ {{ states('sensor.wohnzimmer_raumthermostat_temperature') | round(1)
}} °C
icon: mdi:sofa
entity: light.wohnzimmer
tap_action:
action: navigate
navigation_path: wohnzimmer
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
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: 66px;
margin-left: -18px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: climate.wohnzimmer_thermostat
state_not: 'off'
chip:
type: template
entity: climate.wohnzimmer_thermostat
icon: |-
{% if is_state(entity, 'heat') %}
mdi:fire
{% endif %}
icon_color: red
- type: conditional
conditions:
- entity: binary_sensor.wohnzimmer_balkontur
state: 'on'
chip:
type: template
icon_color: amber
icon: mdi:door-open
entity: binary_sensor.wohnzimmer_balkontur
tap_action:
action: more-info
- type: light
entity: light.wohnzimmer
content_info: none
use_light_color: true
icon: mdi:lightbulb
tap_action:
action: toggle
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('light.wohnzimmer', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
if you mean centered like this
then change alignment:end to alignment:center
sorry i mean the vertical alignment
Good morning everyone,
I created a card with a TV status icon. I only need the icon to understand if the TV is on or off but not to turn it on and off.
I would like to use the monitor animation, which is this:
but using the TV icon.
I’m not good with code. I’m trying but I can’t.
Can anyone help me!?
I attach my code.
type: custom:button-card
name: SOGGIORNO
icon: mdi:sofa
show_state: false
show_label: true
label: |
[[[
return Math.round(states['sensor.weather_station_temperature'].state) + "°C" + "  " + Math.round(states['sensor.weather_station_humidity'].state) + " %";
]]]
tap_action:
action: navigate
navigation_path: '#soggiorno'
custom_fields:
btn1:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: none
entity: media_player.tv_samsung_58
icon: mdi:television
card_mod:
style:
mushroom-template-chip:nth-child(1)$:
mushroom-chip$: |
ha-card {
--chip-background: {{ 'rgba(199, 239, 207, 0.8)' if is_state('media_player.tv_samsung_58', 'on') else 'rgba(199, 239, 207, 0.3)' }};
animation: {{ 'ping 2s ease-out infinite' if is_state('media_player.tv_samsung_58', 'on') }};
padding: 5px !important;
border-radius: 100px !important;
justify-content: center;
--chip-icon-size: 30px;
--chip-height: 40px;
width: var(--chip-height) !important;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(199, 239, 207, 1);
}
100% {
box-shadow: 0 0 5px 10px rgba(199, 239, 207, 0);
}
}
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
.: |
ha-icon {
{{ 'animation: refresh 300ms linear infinite;' if is_state('media_player.tv_samsung_58', 'on') }}
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 0%, transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 25%, transparent 100%); }
50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 50%, transparent 100%); }
75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 75%, transparent 100%); }
100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 100%); }
}
styles:
grid:
- grid-template-areas: '"n btn btn1" "l btn btn1" "i btn btn1"'
- grid-template-columns: 1fr min-content min-content
- grid-template-rows: min-content min-content 1fr
img_cell:
- justify-content: center
- position: absolute
- width: 80px
- height: 80px
- left: 0
- bottom: 0
- margin: 0 0 -25px -25px
- background: '#FFF'
- border-radius: 200px
icon:
- width: 35px
- color: black
- opacity: '0.6'
- margin: 0 0 18px 15px
card:
- padding: 10px 20px 10px 10px
Using this in the new sections layout … I’m trying many things to get the alignment correctly … but unfortunately I don’t succeed 
Anyone has an idea what could be wrong in the code?
Code
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
border: none !important;
--ha-card-border-width: 0;
}
cards:
- type: custom:mushroom-template-card
primary: Woonkamer
secondary: ' '
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: null
icon_color: blue
multiline_secondary: true
card_mod:
style: |
ha-card {
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
z-index: 1;
}
:host {
--mush-icon-border-radius: 12px;
}
- type: custom:mini-graph-card
entities:
- entity: climate.living
attribute: current_temperature
name: null
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
color: orange
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 25%, transparent);
}
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
border: none !important;
--ha-card-border-width: 0;
margin-left: -10px;
margin-right: 0px;
}
cards:
- type: custom:mushroom-climate-card
entity: climate.living
icon: none
show_temperature_control: false
primary_info: none
secondary_info: none
layout: horizontal
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
content: "{{ state_attr(config.entity, 'current_temperature')|replace('.', ',') }}°";
font-size: 12px;
font-weight: bolder;
color: white;
position: absolute;
}
.shape {
{% set mode = state_attr(config.entity, 'hvac_action') %}
--shape-color: rgba(var(--rgb-
{%- if mode == 'heating' -%}
orange
{%- elif mode == 'cooling' -%}
blue
{%- else -%}
grey
{% endif %}));
}
mushroom-badge-icon$: |
.badge {
{{ 'display: none !important;' if state_attr(config.entity, 'hvac_action') == 'idle' }}
}
.: |
mushroom-badge-icon:after {
content: "{{ states('sensor.alpha2_heat_control_ezr012b5_glv_1_valve_opening') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-green));
color: rgb(var(--rgb-white));
border-radius: 50%;
border-width: 0;
top: 0px;
width: 100%;
height: 100%;
font-size: 0.6em;
}
mushroom-shape-icon {
--icon-size: 34px;
position: relative;
top: 4px;
ha-card {
border: none !important;
}
- type: custom:mushroom-template-card
primary: null
icon: mdi:lightbulb
icon_color: >-
{%if is_state('sensor.lichten_aan_woonkamer', '0') %} grey {% else %}
amber {% endif %}
entity: light.all_lights
badge_icon: none
badge_color: transparent
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lichten
style: |
--popup-border-radius: 12px;
content:
type: custom:auto-entities
filter:
include:
- area: Woonkamer
domain: light
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
--ha-card-border-width: 0;
}
exclude:
- domain: light
attributes:
device_class: DNDMode
card:
type: custom:layout-card
layout:
margin: 0px 10px 10px 10px
border-radius: 12px
cards: []
layout_type: masonry
sort:
method: friendly_name
target: {}
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' ,'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | rejectattr ('attributes.device_class','eq','DNDMode') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
border-radius: 50%;
top: 0px;
width: 100%;
height: 100%;
font-size: 0.7em;
}
mushroom-shape-icon {
--icon-size: 34px;
position: relative;
top: 4px;
ha-card {
--ha-card-border-width: 0;
margin-left: -10px;
margin-right: 0px;
}
- type: custom:mushroom-template-card
primary: null
icon: mdi:window-shutter-open
icon_color: >-
{%if expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list |
count > 0 %} blue {% else %} grey {% endif %}
entity: cover.alle_rolluiken
badge_icon: none
badge_color: transparent
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Rolluiken
style: |
--popup-border-radius: 12px
content:
type: custom:auto-entities
filter:
include:
- area: Woonkamer
domain: cover
options:
type: custom:mushroom-cover-card
show_buttons_control: true
layout: horizontal
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
--ha-card-border-width: 0;
}
exclude:
- domain: cover
attributes:
types: browser_mod
card:
type: custom:layout-card
layout:
margin: 0px 10px 10px 10px
border-radius: 12px
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list | count}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
border-radius: 50%;
top: 0px;
width: 100%;
height: 100%;
font-size: 0.7em;
}
mushroom-shape-icon {
--icon-size: 34px;
position: relative;
top: 4px;
ha-card {
--ha-card-border-width: 0;
margin-left: -10px;
margin-right: 0px;
}
- type: custom:mushroom-template-card
primary: null
icon: mdi:window-shutter
icon_color: >-
{%if expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'closed' ) | list |
count > 0 %} blue {% else %} grey {% endif %}
entity: cover.alle_rolluiken
badge_icon: none
badge_color: transparent
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Rolluiken
style: |
--popup-border-radius: 12px
content:
type: custom:auto-entities
filter:
include:
- area: Woonkamer
domain: cover
options:
type: custom:mushroom-cover-card
show_buttons_control: true
layout: horizontal
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
--ha-card-border-width: 0;
}
exclude:
- domain: cover
attributes:
types: browser_mod
card:
type: custom:layout-card
layout:
margin: 0px 10px 10px 10px
border-radius: 12px
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'closed' ) | list | count}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
border-radius: 50%;
top: 0px;
width: 100%;
height: 100%;
font-size: 0.7em;
}
mushroom-shape-icon {
--icon-size: 34px;
position: relative;
top: 4px;
ha-card {
--ha-card-border-width: 0;
margin-left: -10px;
margin-right: 0px;
}
1 Like