Had this same issue as well. Try adding margin-bottom and change -XXpx to adjust the height. See example below.
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;
margin-bottom: -XXpx !important; <---------- Add this to change the height
}
- 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 %}
}
1 Like
possibly width: var(--chip-height) !important;
Remove it temporarily and see what changes///
Sorry, its not clear what the issue is?
The animation is working based off the state of the TV and the tap action on the TV icon is disable.
tvds
March 23, 2024, 7:28am
213
Many thanks for your reply.
Sections is limited by total width and you are trying to fit too many entities into one row. I’d recommend three and then start a second row.
1 Like
4 in a row will work
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
margin: 0px 0px 0px 0px
layout:
grid-template-columns: 1fr 1fr 1fr 1fr
cards:
- type: custom:mushroom-template-card
primary: Woonkamer
layout: vertical
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: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;
}
- type: custom:mushroom-template-card
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
exclude:
- domain: light
attributes:
device_class: DNDMode
card:
type: custom:layout-card
layout:
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: red
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 {
border: none;
}
- type: custom:mushroom-template-card
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: 35px;
position: relative;
top: 4px;
}
ha-card {
border: none;
}
- type: custom:mushroom-template-card
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 {
border: none;
}
1umnyy
March 23, 2024, 1:09pm
217
Can I please get your code?
1umnyy
March 23, 2024, 1:16pm
218
can you please send the code without a black background? to have a regular theme
joachi
March 23, 2024, 2:01pm
219
Hi i love the looks of the mushroom cards and use it for most of things except for lights… and thats because i often wanto to tim my lights down to 1% but then if i use mushroom lights sliders they often go down to 0% and turn off… is it possible to add a value that the lowest value on the slider is 1%?
1umnyy
March 23, 2024, 4:42pm
220
and can you please share the scripts for the timer?
Can you specify a specific post or a visual of the card?
HI,
Thanks for the reply.
The icon does not function as a button but with the animation it should let me know that the TV is on.
I would like to remove the animation that is there now and put that of the monitor but using the TV icon.
It’s possible!?
tvds
March 23, 2024, 8:41pm
224
Hi, many thanks for the insights!
tvds:
Hi, many thanks for the insights!
Very nice. You could share the code. Thank you
tvds
March 23, 2024, 10:30pm
227
Hi sure … here you go
Graph of the room temperature for the last 24h on the left side
Climate card with the actual temperature. The color changes depending on the hvac action state: orange when heating, blue when cooling, grey when idle. The green badge on top is the valve % opening of the floor heating in the room. The badge is removed when the action state is idle.
Nr of active lights in the room. Color yellow >= 1 light active, else color is grey (no active lights). Tap action: : pop-up of al lights in the room.
The last one is the state of the covers. The color and icon change depending on state of all cover in the room. In this example I have 5 covers in the room (living area). When all covers are open → blue icon: open cover. When all covers are closed → blue icon: closed cover. When mixed open/closed covers → grey icon: alert cover
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;
top: 5px;
}
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: 14px;
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: 0;
width: 100%;
height: 100%;
font-size: 0.7em;
}
ha-card {
border: none !important;
margin-left: -10px;
margin-right: 0px;
}
- type: custom:mushroom-template-card
primary: null
icon: mdi:lightbulb
icon_color: >-
{%if expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' ,
'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count > 0 %}
amber {% else %} grey {% 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: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
ha-card {
--ha-card-border-width: 0;
margin-left: -10px;
margin-right: 0px;
}
- type: custom:mushroom-template-card
primary: null
icon: >-
{%if expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list |
count == 5 %} mdi:window-shutter-open {%elif
expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' ,
'cover' ) | selectattr ( 'state' , 'eq' , 'closed' ) | list | count ==
5 %} mdi:window-shutter {% else %} mdi:window-shutter-alert {% endif
%}
icon_color: >-
{%if expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list |
count == 5 or expand(area_entities('woonkamer')) | selectattr (
'domain' , 'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'closed' )
| list | count == 5 %} 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;
right: 0px;
width: 100%;
height: 100%;
font-size: 0.8em;
}
mushroom-badge-icon:before {
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: 30px;
right: 0px;
width: 100%;
height: 100%;
font-size: 0.8em;
}
ha-card {
--ha-card-border-width: 0;
margin-left: -10px;
margin-right: 0px;
}
1 Like
Good evening guys,
I still need you.
Through your invaluable help I have managed to create my counter of lights on.
The entity is “sensor.luci_accese_soggiorno”.
However, now I should insert the counter into my icon with animation in a chip card but I can’t.
Can you please help me.
Thank you
Here is the 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: light.luci_soggiorno
icon: |
{% if is_state(entity, 'on') %}
mdi:lightbulb-on
{% else %}
mdi:lightbulb-outline
{% endif %}
icon_color: |
{% if is_state(entity, 'on') %}
black
{% else %}
white
{% endif %}
card_mod:
style:
mushroom-template-chip:nth-child(1)$:
mushroom-chip$: |
ha-card {
--chip-background: {{'rgba(235, 204, 52, 1)' if is_state('light.luci_soggiorno', 'on') else 'rgba(199, 239, 207, 0.3)' }};
animation: {{ 'ping 2s ease-out infinite' if is_state('light.luci_soggiorno', 'on') }};
padding: 5px !important;
border-radius: 100px !important;
justify-content: center;
--chip-icon-size: 34px;
--chip-height: 40px;
width: var(--chip-height) !important;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
}
100% {
box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
}
}
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
.: |
ha-state-icon {
animation: {{ 'illumination 2s infinite' if is_state('light.luci_soggiorno', 'on') }};
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 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
type or paste code here
So something like this?
type: custom:mushroom-template-card
tap_action:
action: none
entity: light.luci_soggiorno
icon: |
{% if is_state(entity, 'on') %}
mdi:lightbulb-on
{% else %}
mdi:lightbulb-outline
{% endif %}
icon_color: |
{% if is_state(entity, 'on') %}
black
{% else %}
white
{% endif %}
card_mod:
style: |
ha-card:after {
content: " {{ states.light | rejectattr('attributes.entity_id', 'defined') | selectattr('state', 'eq', 'on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50% 50%;
top: -5px;
right: -15px;
width: 20px;
height: 20px;
font-size: 10px;
}
ha-card {
background: {{'rgba(235, 204, 52, 1)' if is_state('light.luci_soggiorno', 'on') else 'rgba(199, 239, 207, 0.3)' }};
animation: {{ 'ping 2s ease-out infinite' if is_state('light.luci_soggiorno', 'on') }};
padding: 0px !important;
border-radius: 50% !important;
justify-content: center;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
}
100% {
box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
}
}
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
.: |
ha-state-icon {
animation: {{ 'illumination 2s infinite' if is_state(light.luci_soggiorno', 'on') }};
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
4 Likes
