I saw that in the docs, and tried it for entity, but it didn’t display anything.
type: custom:mushroom-template-card
entity: sensor.aqi
primary: '{{ states('sensor.aqi') }}'
secondary: ''
icon: mdi:chip
icon_color: |-
{% set aqi = states('sensor.aqi') | int %}
{% if aqi < 50 %}
green
{% else %}
yellow
{% endif %}
This is the error I get. I see it says bad indentation, but that doesn’t make a whole lot of sense to me.
Configuration errors detected:
bad indentation of a mapping entry (3:22)
1 | type: custom:mushroom-template-card
2 | entity: sensor.austin_webberville_rd_austin_texas_air ...
3 | primary: '{{ states('sensor.austin_webberville_rd_aus ...
--------------------------^
4 | secondary: ''
5 | icon: mdi:chip
Should work with this:
type: custom:mushroom-template-card
entity: sensor.aqi
primary: |-
{{ states('sensor.aqi') }}
secondary: ''
icon: mdi:chip
icon_color: |-
{% set aqi = states('sensor.aqi') | int %}
{% if aqi < 50 %}
green
{% else %}
yellow
{% endif %}
1 Like
Thanks guys!
Hey everyone! So, I’ve got a bit of a weird one that I’ve been trying to diagnose for a bit. I’m in the middle of creating a Universal Remote dashboard and have been trying to configure the various media cards. However, when I attempt to resize the buttons for easier use, they get cropped in very unusual ways. Below is an example:
Here is the code I’ve tried using so far:
card_mod:
style:
mushroom-state-info$: |
.container {
margin-bottom: 00px !important;
}
mushroom-state-icon$: |
.container {
margin-bottom: 00px !important;
}
mushroom-media-player-media-control$:
mushroom-button$: |
.button {
margin-bottom: 00px !important;
height: 100px !important;
width: 100px !important;
}
mushroom-media-player-volume-control$:
mushroom-button$: |
.button {
height: 100px !important;
width: 100px !important;
}
mushroom-button$: |
.button {
height: 100px !important;
width: 100px !important;
}
.: |
ha-card{
margin-bottom: 0px !important;
padding-bottom: 120px !important;
}
Any suggestions would be greatly appreciated! (Ignore the state info and icon sections. I’m just experimenting with these right now.)
Great solution. Thanks. Again, is there somewhere I can learn more about coding these cards?
you can try.
mushroom-media-player-media-control$:
mushroom-button$: |
.button {
margin-top: -20px !important;
height: 100px !important;
width: 100px !important;
}
Here’s what I ended up with when implementing it:
It’s still significantly cut off and when I try to make the button bigger, it vanishes into the aether. Resizing the card does not work either.
This code does not work, can you tell me where I am going wrong, please?
Since I added the shape-color**, the cards are no longer transparent.**
- type: custom:mushroom-entity-card
entity: sensor.homepod_soggiorno_power
name: HomePod Soggiorno
icon: cil:apple-homepod-mini
icon_color: red
layout: vertical
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: yellow !important; /* Blu per HomePod Soggiorno */
}
ha-card |
background-color: rgba(0, 0, 0, 0.0); /* Trasparenza totale nella
scheda */
look in the first post with the section called what the $ and .: | symbols do
1 Like
Thank you!! now is ok!
Need help with state text, i have musroom-climate-card with secondary . i want to change the text of the state If heat_cool then On.
this is my decluttering-card template for musroom-climate-card. Any help please?
climate_zone_h:
card:
type: custom:mushroom-climate-card
entity: '[[entity]]'
name: '[[name]]'
primary_info: name
secondary_info: state
icon_type: icon
fill_container: false
layout: '[[layout]]'
show_temperature_control: '[[show_temperature_control]]'
background_color: '[[background]]'
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-color: {{ '#ffffff !important' if is_state('[[entity]]', 'off') else 'var(--gray000) !important' }};
--shape-color: {{ 'var(--gray000) !important' if is_state('[[entity]]', 'off') else 'rgba(40, 40, 42,0.0) !important' }};
--icon-size: 42px;
}
.shape:before {
content: '';
position: absolute;
width: inherit;
height: inherit;
border-radius: {{ '50%' if is_state('[[entity]]', 'heat_cool') }};
border: {{ '2.5px outset var(--gray000) !important' if is_state('[[entity]]', 'heat_cool') }};
animation: {{ 'circle 1s linear infinite !important' if is_state('[[entity]]', 'heat_cool') }};
}
@keyframes circle {
0% {transform: rotate(0deg);}
100% {transform:rotate(360deg);}
}
mushroom-climate-temperature-control$:
mushroom-input-number$: |
#container {
background: transparent !important;
}
#container .button:nth-child(1) {
--control-icon-size: 24px;
}
#container .button:nth-child(3) {
--control-icon-size: 24px;
}
mushroom-state-info$: |
.container {
--card-primary-color: {% if is_state('[[entity]]', 'heat_cool') %}var(--gray800) !important{% else %}var(--gray800) !important{% endif %};
--card-secondary-color: {% if is_state('[[entity]]', 'heat_cool') %}var(--black) !important{% else %}var(--gray800) !important{% endif %};
--card-secondary-font-size: 14px!important;
--card-primary-font-size: 14px;
--card-primary-font-weight: 300!important;
}
.: |
ha-card {
{% if is_state('[[entity]]', 'heat_cool') %}
background-image: linear-gradient(145deg, rgba(194,89,33,1) 1%, rgba(194,89,33,1) 50%, rgba(40,40,42,0.8) 100%) ;
opacity: 0.7;
{% else %}
background-color: [[background]] !important;
{% endif %}
}
ha-state-icon {
{% if is_state('[[entity]]', 'heat_cool') %}
--card-mod-icon: [[on-icon]];
animation: wobbling 0.7s linear infinite ;
}
{% else %}
--card-mod-icon: [[off-icon]];
{% endif %}
@keyframes wobbling {
0% {transform: rotate(-90deg);}
100% {transform: rotate(180deg);}
}
Little help here! using mushroom and card-mod but can’t seem to get this working!
**This works great!**
type: custom:mushroom-template-card
icon: mdi:wifi
icon_color: green
primary: Signal
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: clip 2s steps(1) infinite;
}
@keyframes clip {
0% { clip-path: circle(0% at 50% 85%); }
20% { clip-path: circle(30% at 50% 85%); }
40% { clip-path: circle(55% at 50% 85%); }
60% { clip-path: circle(80% at 50% 85%); }
}
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
60% { box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
This doesn’t…
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Jess' Office
secondary: |-
{{ states('climate.main_floor') }}
{{ states('sensor.main_floor_current_temperature') }} °F
icon: mdi:office-building-outline
icon_color: |-
{% if is_state('light.jess_office_lights','on') %}
orange
{%endif%}
tap_action:
action: navigate
navigation_path: /dashboard-test/jess-office
card_mod:
style: |
{% if is_state('binary_sensor.jess_office_presence_occupancy','on') %}
mushroom-shape-icon$:
ha-icon {
--icon-animation: clip 2s steps(1) infinite;
}
@keyframes clip {
0% { clip-path: circle(0% at 50% 85%); }
20% { clip-path: circle(30% at 50% 85%); }
40% { clip-path: circle(55% at 50% 85%); }
60% { clip-path: circle(80% at 50% 85%); }
}
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
60% { box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
{% endif %}
Any help where I am going wrong?
check this for reference to see what might be different.
1 Like
Thank you for this! It works fine if its not encapsulated in a state test for presence.
As soon as I introduce:
{% if is_state('binary_sensor.office_2nd_presence_occupancy','on') %}
....
{% endif %}
it doesn’t animate
alot of the animation changed in the link @dimitri.landerloos posted.
I believe the best way to add statements is like this.
type: custom:mushroom-template-card
icon: mdi:wifi
icon_color: green
primary: Signal
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state('sensor.xxxx','on') %}
--shape-animation: ping 2s infinite;
{% endif %}
}
@keyframes ping {
60% { box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
.: |
ha-state-icon {
{% if is_state('sensor.xxxx','on') %}
animation: clip 2s steps(1) infinite;
{% endif %}
}
@keyframes clip {
0% { clip-path: circle(0% at 50% 85%); }
20% { clip-path: circle(30% at 50% 85%); }
40% { clip-path: circle(55% at 50% 85%); }
60% { clip-path: circle(80% at 50% 85%); }
}
1 Like
Correct. @jimmyp123, keyframes should always be kept entirely seperate. Dont add stuff like if statements to them.
Thanks all, this worked! Appreciate the assist!