I have stopped using the Hue Group, and created a HA light group. This indicates (with a 10s delay) properly the state of the grouped lights.
yes, but is that a card/chip? what is it.
Hello Steffen. I have tried adding the template contents containing the trigger statements to the bottom of the card code, inside configuration.yaml, and sensors.yaml. Nothing has worked. Would a template.yaml be what I need? Thank you for assistance.
Works, thank you!
1 Like
Hi,
template is a intergration and could not be in the bottom of a card. So you need add the template part in configuration or with a inlude statemant in a separat template.yaml file. Please look here:
Hi there,
does anyone know how to define the ratio of a horizontal stack with a mushroom-card and a nrmal entity card?
This does nt work for a mushroom card.
this works:
type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card $: |
hui-entity-card:nth-of-type(2) {
flex-grow: 2 !important;
}
hui-entity-card:nth-of-type(1) {
flex-grow: 1 !important;
}
card:
type: horizontal-stack
cards:
- type: entity
entity: sun.sun
- type: entity
entity: sun.sun
this doesn´t work:
type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card $: |
hui-entity-card:nth-of-type(2) {
flex-grow: 2 !important;
}
hui-entity-card:nth-of-type(1) {
flex-grow: 1 !important;
}
card:
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:lightbulb-auto-outline
entity: input_boolean.auto_kellerlicht_weekend
icon_color: '{{ ''green'' if states(entity) == ''on'' else ''red'' }}'
primary: 'Automatik:'
secondary: '{{ ''ein'' if states(entity) == ''on'' else ''aus'' }}'
tap_action:
action: toggle
navigation_path: null
- type: entity
entity: sun.sun
any idea?
Is it possible to change the primary_info font size of the mushrooms entity card? I want to show more… Or shrink the icon size a little bit?
Hello,
I need some help to make washing machine animate while its running. Can some1 (I mean you - @rhysb 
) help me to make it? Here is my code. I did similiar thing with animated weather but here i cant do this. Probably its need mushroom-template-chip:nth-child(2)$: but i don’t know how to get it work. Here is my code.
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto
grid-template-rows: auto
column-gap: 0px
row-gap: 0px
grid-template-areas: |
"1"
"2"
cards:
- type: custom:mushroom-light-card
entity: light.lazienka
fill_container: true
show_brightness_control: true
use_light_color: true
icon: mdi:shower
secondary_info: none
show_color_control: false
name: Łazienka
view_layout:
grid_areas: 1
card_mod:
style: |
:host([dark-mode]) {
--ha-card-background: #2D3033;
--mush-icon-size: 66px;
--icon-symbol-size: 0.6em;
}
ha-card {
border-radius: 15px 15px 0px 0px;
--control-height: 6px;
--control-border-radius: 2px;
--control-border-spacing: 2px;
--card-primary-font-size: 20px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
content: ' {{ states(entity) }}°C '
icon: >
{% set temperature_level = (states(entity) | int / 10) | round(0)
| int * 10 %} {% if is_state('sensor.temp_lazienka_temperature',
'on' ) %}
{% if temperature_level > 0 %}
mdi:battery-charging-{{ temperature_level }}
{% else %}
mdi:thermometer
{% endif %}
{% else %}
{% if temperature_level > 23 %}
mdi:thermometer-high
{% elif temperature_level < 22 %}
mdi:thermometer
{% elif temperature_level < 21 %}
mdi:thermometer-low
{% elif temperature_level < 20 %}
mdi:snowflake-thermometer
{% else %}
mdi:thermometer-alert
{% endif %}
{% endif %}
icon_color: |-
{% set temperature_level = states(entity) | int %}
{% if temperature_level > 23 %}
red
{% elif temperature_level > 22,5 %}
green
{% elif temperature_level > 22 %}
light-green
{% elif temperature_level > 21,5 %}
lime
{% elif temperature_level > 21 %}
light-blue
{% elif temperature_level > 20,5 %}
blue
{% else %}
white
{% endif %}
card_mod:
style: |
ha-card {
--chip-margin-top: 0px;
--chip-border-radius: 0px;
--chip-font-size: 0.4em;
--chip-padding: 0 0.3em;
--chip-spacing: 0px;
--chip-icon-size: 0.6em;
--chip-box-shadow: none;
--chip-background: none
--chip-text-color:#F1F1F2;
:host([dark-mode]) {
--text-color: #F1F1F2;
}
tap_action:
action: none
entity: sensor.temp_lazienka_temperature
- type: template
icon: mdi:washing-machine
icon_color: orange
primary: 'Washing Machine #2'
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: shake 400ms ease-in-out infinite;
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
- type: template
icon: mdi:washing-machine
icon_color: orange
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: spin 1s linear infinite;
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
alignment: center
view_layout:
grid-column: 1
grid-row: 3
card_mod:
style: |
ha-card {
color: ;
border-radius: 0px 0px 15px 15px;
height: 35px;
margin-top: -13px;
outline-color: red;
--chip-spacing: 0px;
--ha-card-background: #A57C65;
}
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
Cannot get the icon color changed depending on the state. What can be wrong here?
type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: group.lights
icon: mdi:ceiling-light
icon_color: |-
{% set state=states('group.lights') %}
{% if state=='on' %}
red
{% elif state=='off' %}
green
{% endif %}
Nice clean UI, would love to see the code when finished 
Can some one help this newbie
I try to code my phone dashboard and I can’t get it to work the way I want it to. I have managed to make the color of the icons change based on the state of the alarm. But for some reason I don’t get the shake icon when the alarm goes on.
Summary
- type: custom:mushroom-template-card
primary: Turvallisuus
secondary: ‘{{ states(’‘alarm_control_panel.alarmo’’) }}’
icon: mdi:shield
layout: vertical
icon_color: |-
{% set state=states(‘alarm_control_panel.alarmo’) %}
{% if state==‘armed_away’ %}
orange
{% elif state==‘triggered’ %}
red
{% elif state==‘arming’ %}
orange
{% else %}
teal
{% endif %}
card_mod: null
style: null
mushroom-shape-icon$: |
{% if is_state(‘alarm_control_panel.alarmo’,‘triggered’) %}
ha-icon {
–icon-animation: shake 400ms ease-in-out infinite, alert 2s ease infinite;
transform-origin: 50% 110%;
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes shake{
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
{% else %}
mdi:shield
{% endif %}
}
This could help you https://smarthomescene.com/guides/mushroom-cards-part-2-room-layout-and-card-combinations/#styling-using-mushroom-themes
1 Like
Is the input_boolean.bedroom_ac_dropdown entity something you created? I’m looking around my climate entities and don’t see anything in my build, and I would love to replicate your card
Try this
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 10% 80%
grid-template-rows: auto
cards: null
- type: custom:layout-card
layout_type: grid
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.speedtest_ping
icon: phu:nas
icon_color: null
content: Unraid
- type: template
entity: sensor.speedtest_ping
icon: null
icon_color: deep-orange
content: ''
alignment: left
- square: false
columns: 3
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.192_168_178_37_cpu_used
color: green
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 140
- type: custom:mushroom-entity-card
entity: sensor.192_168_178_37_cpu_used
primary_info: state
secondary_info: name
name: CPU
icon_color: green
icon: phu:intel-cpu
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -57px;
width: auto;
margin-left: auto;
margin-right: auto;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.192_168_178_37_ram_used_percent
color: rgb(33, 150, 243)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 140
- type: custom:mushroom-entity-card
entity: sensor.192_168_178_37_ram_used_percent
primary_info: state
secondary_info: name
name: Memory
icon_color: blue
icon: phu:ram-memory
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -57px;
width: auto;
margin-left: auto;
margin-right: auto;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.192_168_178_37_package_id_0_temperature
color: red
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 140
- type: custom:mushroom-entity-card
entity: sensor.192_168_178_37_package_id_0_temperature
primary_info: state
secondary_info: name
name: CPU
icon_color: red
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -57px;
width: auto;
margin-left: auto;
margin-right: auto;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.192_168_178_37_mnt_disk1_used_percent
color: rgb(255, 233, 0)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 140
- type: custom:mushroom-entity-card
entity: sensor.192_168_178_37_mnt_disk1_used_percent
primary_info: state
secondary_info: name
name: Storage
icon_color: yellow
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -57px;
width: auto;
margin-left: auto;
margin-right: auto;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.192_168_178_37_mnt_ssd_cache_used_percent
color: rgb(255, 233, 0)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 140
- type: custom:mushroom-entity-card
entity: sensor.192_168_178_37_mnt_ssd_cache_used_percent
primary_info: state
secondary_info: name
name: SSD Cache
icon_color: yellow
icon: phu:seagate-ssd
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -57px;
width: auto;
margin-left: auto;
margin-right: auto;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.192_168_178_37_mnt_hdd_cache_used_percent
color: rgb(255, 233, 0)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 140
- type: custom:mushroom-entity-card
entity: sensor.192_168_178_37_mnt_hdd_cache_used_percent
primary_info: state
secondary_info: name
name: HDD Cache
icon_color: yellow
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -57px;
width: auto;
margin-left: auto;
margin-right: auto;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
This is the Sonos card
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: "100%"
grid-template-areas: |
"sonos"
"group"
"media"
cards:
- view_layout:
grid-area: sonos
type: custom:sonos-groups
styles:
ha-card:
background: none
box-shadow: none
group:
background: none
title:
display: none
button-section:
border: none
background: none
button-on-section:
background: none
- view_layout:
grid-area: group
type: custom:sonos-grouping
styles:
ha-card:
background: none
box-shadow: none
group:
background: none
title:
display: none
button-section:
border: none
background: none
button-on-section:
background: none
- view_layout:
grid-area: media
type: custom:sonos-media-browser
mediaBrowserItemsAsList: false
layout:
mobileThresholdPx: 500
mediaItem:
width: 20%
mobileWidth: 33%
styles:
ha-card:
background: none
box-shadow: none
group:
background: none
title:
display: none
button-section:
border: none
background: none
button-on-section:
background: none
media-button-title:
border-radius: 20px 20px 0px 0px !important
and this my popup style on Mobile:
tap_action:
action: "fire-dom-event"
browser_mod:
service: browser_mod.popup
data:
title: Sonos
size: fullscreen
card_mod:
style:
ha-dialog$: |
@media (max-width: 800px){
div.mdc-dialog__container {
height: 560px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 290px;
--ha-dialog-border-radius: 20px;
}
}
content:
!include "popup_sonos.yaml"
1 Like
Try
style: |
:host {
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 11px;
}
1 Like
Try
{% if is_state('group.lights','off') %}
green
{% else %}
red
{% endif%}
Thank you! That works. Where can I see all the options for this kind of styling? I guess there should be --mush-card-primary-font-color too.
Yes, you will need to create a Toggle Helper. Can be found in Settings → Devices & Services → Helpers.
1 Like