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;
}
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.
Many thanks for your reply.
Do you mean removing it from the code (but that line isnāt used)?
Or do you mean I should add it?
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;
}
thank you!
Can I please get your code?
can you please send the code without a black background? to have a regular theme
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%?
and can you please share the scripts for the timer?
Can you specify a specific post or a visual of the card?