Hi,
Iāve got a problem with your top sticky card:
It covers up the top bar, so I cannot edit the dashboard:
without:
And covers any popup\edit windows:
Any idea whatās wrong?
1 Like
Can you give an example how to use the monitor animation in a āconditionalā code, meaning, I want to have the icon animated when the power of my tv plug is above 200W
I am struggling for days with this code, but having trouble to understand how it works.
- type: custom:mushroom-template-card
icon_color: '{{ ''green'' if is_state(entity,''on'') else ''red'' }}'
icon: mdi:monitor
card_mod:
# class: hki
style:
mushroom-shape-icon$: |
{% set state = states('sensor.power_26') % }
{% if state | float > 200 %}
ha-icon: before {
content: "";
position: absolute;
width: 40%;
height: 30%;
margin: 6%;
animation: refresh 300ms linear infinite;
}
{% endif %}
@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%); }
}
# mushroom-card {
# {% if is_state(switch.smart_plug_8,'off') %}
# filter:grayscale(80%);
# {% endif %}
# }
layout: vertical
entity: switch.smart_plug_8
primary: TV Living
secondary: |
{{ states('sensor.power_26') | round(0) }} W
tap_action:
action: toggle
I thought there was a possibility to add a ālockā to critical buttons in order to prevent unintentional pressesā¦ can anyone point me in the right direction ?
Restriction card, I use it just for that
See here for an example
i have explained this to you earlier. but really bad idea to do what you are doing with your if statements. put them inside the CSS element that you are styling.
furthermore you need to use ha-state-icon instead of ha-icon. this was changed a few months back now.
you also cant refer to ha-state-icon under mushroom-shape-icon$ anymore. you have to refer to it seperately.
You need an entity defined in your card as you code is asking for an entity
icon_color: '{{ ''green'' if is_state(entity,''on'') else ''red'' }}'
this on its own works:
type: custom:mushroom-template-card
icon_color: '{{ ''green'' if is_state(entity,''on'') else ''red'' }}'
entity: switch.office_screens
icon: mdi:monitor
card_mod:
style: |
ha-state-icon::before {
content: "";
position: absolute;
width: 40%;
height: 30%;
margin: 6%;
{% if states('sensor.total_energy_kwh') | float > 200 %}
animation: refresh 300ms linear infinite;
{% endif %}
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(var(--rgb-green), 0.2) 0%, transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-green), 0.2) 25%, transparent 100%); }
50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-green), 0.2) 50%, transparent 100%); }
75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-green), 0.2) 75%, transparent 100%); }
100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-green), 0.2) 100%); }
}
hello everyone, iām trying to achieve a dynamic url in mushroom-template-card right now.
type: custom:mushroom-template-card
primary: '{{ states(''sensor.film_01'') }}'
secondary: ''
tap_action:
action: url
url_path: '{{ state_attr(''sensor.film_01'', ''film_url'') }}'
icon: ''
icon_color: ''
fill_container: true
multiline_secondary: true
layout: vertical
badge_icon: ''
double_tap_action:
action: none
hold_action:
action: none
badge_color: ''
picture: '{{ state_attr(''sensor.film_01'', ''picture_url'') }}'
entity: sensor.film_01
With the image it works it loads dynamically with this config, but it doesnāt want to resolve the path url. Is there a way to get redirected to the url. behind the state_attr is of course a full https:// url
How do I change this to a mushroom person card ? Having issues the indentation, thanks.
type: custom:mushroom-person-card
entity: person.steve_allam
icon_type: entity-picture
primary_info: none
secondary_info: none
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
animation: ping 2s infinite;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);
}
100% {
box-shadow: 0 0 5px 15px transparent;
}
}
.: |
ha-card {
--icon-size: 72px;
}
This should work 
type: custom:mushroom-person-card
entity: person.dimitri_landerloos
primary_info: none
secondary_info: none
icon_type: entity-picture
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
--icon-size: 72px;
}
Ive only collapsed the keyframes {} because that is my preference for how it looks visually. Both are correct already
The only thing missing was display: flex; and border-radius: 50%;
display: flex; turns everything inside the element into a flex-box element. This esentially just means that now everything inside of .picture will try and share the full space available to them within .picture and since there is only 1 element inside of .picture it will take up the full space. Then when we apply the box-shadow animation it now has an actual size to apply it to.
border-radius: 50%; just makes the shape of the container for the image round as well. By default the container is square.
My main issue here is indentation, Iāve got 1900 lines of code to that card due to using his person card as seen in the tag and I donāt know how to change the indentation for the full code
Sorry but i am really never going to get the time to help you with this. I suggest you try and sort out as much as you can yourself. And whenever you get stuck post it here. (If its related to a mushroom card) i can then try to help in those individual cases.
Is there a way to achieve the same with a mushroom chips card? Wanting the symbol in top corner showing the zone
How do I combine different effects ? I have the following (non working)
type: custom:mushroom-person-card
entity: person.tim
icon_type: entity-picture
card_mod:
style:
mushroom-shape-avatar$: |
.container:before {
content: "";
height: 100%;
width: 100%;
background: radial-gradient(rgb(var(--rgb-white)) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-green)) {{ states('sensor.sm_s911b_battery_level') }}% 0%, transparent 0% 100%);
border-radius: var(--icon-border-radius);
position: absolute;
-webkit-mask-image: radial-gradient(circle calc(var(--icon-size) / 2 - 2px) at 50% 50%, transparent 100%, black 0);
}
mushroom-shape-avatar {
{{ 'filter: grayscale(100%);' if is_state('person.tim', 'not_home') }}
}
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
The first stanza puts a nice arc around the profile photo to denote battery charge. But I also want the āgreyscale when awayā and the none background of the 2nd stanza. Obviously mushroom-shape-avatar is declared twice so it wont work (Iāve never understood the trailing $ and | symbols either :-/ )
Thanks.
is it true that after the lst ha update the animated cards not longer works? what its changed again?
No, but you need to update card mod as well + then clear chache on app/browser.
Here is an explanation of how these symbols work.
$ is used when we want to access the shadow-root of an object. like this here:
the .shape is within the shadow-root of mushroom-shape-icon so to access it and modify it, we would write this:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: red !important;
}
you cant just write this, as this wont access the element through the shadow root.
card_mod:
style: |
.shape {
background: red !important;
}
the | is just written to denote that you are done with going through elements and that you will now list your final element. so if i have stacked with multiple shadow-roots. it would look like this:
card_mod:
style:
mushroom-light-brightness-control$:
mushroom-slider$:
.container:
.slider: |
.slider-track-active {
background-color: red !important;
}
Notice how the last 2 in the stack dont have a $? thats because those elements dont have a shadow-root.
Ok. now that you hopefully understand how those symbols work we can look at your specific example.
card mod has a built in fuction to let you reset yourself back to style: | which is what you need for both ha-card { and mushroom-shape-avatar {
it is using .: if you use it at the right indentation (same line as anything you first place under style:
so like this:
card_mod:
style:
mushroom-shape-avatar$: |
.container:before {
content: "";
height: 100%;
width: 100%;
background: radial-gradient(rgb(var(--rgb-white)) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-green)) {{ states('sensor.sm_s991b_battery_level') }}% 0%, transparent 0% 100%);
border-radius: var(--icon-border-radius);
position: absolute;
-webkit-mask-image: radial-gradient(circle calc(var(--icon-size) / 2 - 2px) at 50% 50%, transparent 100%, black 0);
}
.: |
mushroom-shape-avatar {
{{ 'filter: grayscale(100%);' if is_state(config.entity, 'not_home') }}
}
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
note where the .: starts is the exact same place as where you initial mushroom-shape-avatar$: | starts. basically treat writing .: | as writting a whole new style: | again.
you can also use it like this (this gets more complex, so feel free to ignore if you dont fully understand it ):
card_mod:
style:
mushroom-state-info$:
.container: |
.primary {
--primary-text-color: #001eff;
}
.secondary {
--secondary-text-color: #00ddff;
}
.: |
.container {
display: flex;
flex-direction: row !important;
align-items: baseline;
gap: 10px;
}
here my .: doesnt start at the same indentation as the first entry under style. it starts at the same entry as under when i declared .container: | reason being is if i wanted to access stuff under .container (like .primary and .secondary) then i cant also access .container (there are other ways to do it, but for illustration purposes this is true), so i put the .: | underneath the mushroom-state-info$: | as i still want to be in the shadow-root of the element as otherwise i cant access .container at all. then i just style the container the way i want.
6 Likes
Thank you so Much its work
Thanks for the detailed explanation Dimitri. I appreciate it. I donāt completely understand it (the card works though) but I have a slightly better understanding of $ and | (something I found pretty much impossible to google without hitting a CSS text book at page 1)
Thats quite alright, we all tend to learn piece by piece
something you might be interested to look a bit more into as well is the ::before that you are using in your css. it is what is called a pseudo element. basically you are creating another element that inherits its placement from what you used before the ::before. there is also ::after and many others, but before and after as the most common. and as you might expect, they may render before or after the element that you base it off
Achieve what exactly? Can you send a screenshot of exactly what you want?