Unfortunately, once we use position: absolute; it takes it out of the bounds of the card. We’d need to do it a different way. I’ll have a think…
I have played around with some Mushroom based Weather Cards, but it is was very specific to my Weatherflow Weather Station.
Thanks for the help. This will cause the badge icon to lose all the other zones that i’ve configured, correct? If possible, i’d like to keep all my zone badge icons but just have the ‘Driving’ state use the car or even the ‘Away’ icon.
Maybe you can use a conditional card
type: conditional
conditions:
- entity: sensor.hacs
state_not: '0'
card:
type: custom:mushroom-template-card
primary: HACS
secondary: |-
{% if states('sensor.hacs') == "0" %}
Up-to-date
{% else %}
{% for item in state_attr('sensor.hacs', 'repositories') -%}
{%- if loop.first %}{{states('sensor.hacs')}} update(s): {% elif loop.last %} , {% else %}, {% endif -%}
'{{ item.display_name | lower }}'
{%- endfor %}
{% endif %}
multiline_secondary: true
icon: mdi:store
icon_color: orange
fill_container: false
tap_action:
action: navigate
navigation_path: ../hacs/entry
Hi. Sure. It is a lot of code. I can not paste it here. I am getting error. Send me priv message with your email. I will send you code and necessary pictures and fonts. If anyone else is interested send me priv message.
Hi,
I see this in the log…any idea what this is ?
Logger: frontend.js.latest.202212070
Source: components/system_log/init.py:256
First occurred: 15:22:05 (1 occurrences)
Last logged: 15:22:05
Just designed these light cards in case anyone may be interested. I’m using the Tile card, but you can easily move the card mod section over to a Mushroom Light or Template Card. I wanted to be able to use the same code with lights that support brightness and those that don’t since I use one Decluttering Template and so I accounted for all that with templates. Just fill in your entity name and it should work for you.
type: tile
entity: light.table_lamp
icon_tap_action:
action: toggle
color: orange
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: ' '
size: fullscreen
content:
type: custom:light-popup-card
entity: light.table_lamp
settings: true
settingsCard:
type: custom:more-info-card
cardOptions:
entity: light.table_lamp
card_mod:
style: >
{% if states('light.table_lamp') == "on" and state_attr('light.table_lamp',
'brightness') != None %}
{% set temp = (state_attr('light.table_lamp', 'brightness') / 255 * 100) | round(0) %}
ha-card {
background-image: linear-gradient(to right, rgb(250, 225, 140) {{temp}}%, rgb(252, 239, 205) {{temp}}%);
{{ '--primary-text-color: black;' if is_state('light.table_lamp', 'on') }}
--secondary-text-color: gray;
}
{% else %}
ha-card {
{{ 'background: rgb(250, 225, 140);' if is_state('light.table_lamp', 'on') }}
{{ '--primary-text-color: black;' if is_state('light.table_lamp', 'on') }}
--secondary-text-color: gray;
}
{% endif %}
@rhysb Any chance of some help pls 
I want to increase the Icons size and then move it to the left, but want border of the card to clip the icon if that makes sense
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Dishwasher
secondary: >-
{{ states('sensor.dishwasher_plug_overall_kwh')}} kWh / ${{
(states('sensor.dishwasher_plug_overall_kwh') | float * 0.21) | round(2)
}}
icon: mdi:dishwasher
entity: sensor.dishwasher_plug_overall_kwh
tap_action:
action: more-info
layout: vertical
icon_color: blue
fill_container: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.dishwasher_hourly_kwh
icon: mdi:meter-electric
icon_color: lime
double_tap_action:
action: more-info
tap_action:
action: more-info
hold_action:
action: more-info
- type: entity
entity: sensor.dishwasher_daily_kwh
icon: mdi:meter-electric
icon_color: light-green
double_tap_action:
action: more-info
tap_action:
action: more-info
hold_action:
action: more-info
- type: entity
entity: sensor.dishwasher_quarterly_kwh
icon_color: green
double_tap_action:
action: more-info
tap_action:
action: more-info
hold_action:
action: more-info
- type: entity
entity: sensor.dishwasher_quarterly_kwh
icon_color: green
double_tap_action:
action: more-info
tap_action:
action: more-info
hold_action:
action: more-info
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
i have had that error message for ages, couldnt find any solution
Try like this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Dishwasher
secondary: >-
{{ states(entity)}} kWh / ${{ (states(entity) | float * 0.21) | round(2)
}}
icon: mdi:dishwasher
entity: sensor.dishwasher_plug_overall_kwh
tap_action:
action: more-info
layout: horizontal
icon_color: blue
fill_container: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
}
.: |
mushroom-shape-icon {
position: absolute;
--icon-size: 90px;
top: -45px;
left: -25px;
}
mushroom-state-item {
text-align: center;
transform: translateX(0%);
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.dishwasher_hourly_kwh
icon: mdi:meter-electric
icon_color: lime
double_tap_action:
action: more-info
tap_action:
action: more-info
hold_action:
action: more-info
- type: entity
entity: sensor.dishwasher_daily_kwh
icon: mdi:meter-electric
icon_color: light-green
double_tap_action:
action: more-info
tap_action:
action: more-info
hold_action:
action: more-info
- type: entity
entity: sensor.dishwasher_quarterly_kwh
icon_color: green
double_tap_action:
action: more-info
tap_action:
action: more-info
hold_action:
action: more-info
- type: entity
entity: sensor.dishwasher_quarterly_kwh
icon_color: green
double_tap_action:
action: more-info
tap_action:
action: more-info
hold_action:
action: more-info
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
Thank you!
A few last requests if i can please
Card height?
And how do i cut the icon so its not in the bottom chip row
With clip-path: inset(0 0 0 0); like this:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
clip-path: inset(0 0 0 0);
}
.: |
mushroom-shape-icon {
position: absolute;
--icon-size: 90px;
top: -45px;
left: -25px;
}
mushroom-state-item {
text-align: center;
transform: translateX(0%);
}
ha-card {
clip-path: inset(0 0 0 0);
}
Great, thank you, gives me something to play with!
Cheers, one last one sorry, how do i increase overall carrd height?
Like this:
ha-card {
clip-path: inset(0 0 0 0);
height: 90px !important;
}
Any way to put that same Christmas tree logic into a chip? I tried my hand at it, and while the animations do all work still, after throwing in the width and top, it doesn’t line up as nicely as your icons. Can this even be done with a chip? TIA
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:pine-tree
icon_color: green
- type: template
icon: mdi:star-four-points
icon_color: yellow
- type: template
icon: mdi:grain
icon_color: red
- type: template
icon: mdi:gift
icon_color: red
card_mod:
style:
mushroom-template-chip:nth-child(2)$: |
ha-icon {
animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
mushroom-template-chip:nth-child(3)$: |
ha-icon {
animation: flash 2s steps(1) infinite, lights 2s infinite;
clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
}
@keyframes flash {
50% { transform: rotateY(180deg); }
}
@keyframes lights {
0%, 100% {--icon-color: rgb(var(--rgb-red)); }
6.25% { --icon-color: rgb(var(--rgb-deep-orange)); }
12.5% { --icon-color: rgb(var(--rgb-orange)); }
18.75% { --icon-color: rgb(var(--rgb-amber)); }
25% { --icon-color: rgb(var(--rgb-yellow)); }
31.25% { --icon-color: rgb(var(--rgb-lime)); }
37.5% { --icon-color: rgb(var(--rgb-light-green)); }
43.75% { --icon-color: rgb(var(--rgb-green)); }
50% { --icon-color: rgb(var(--rgb-teal)); }
56.25% { --icon-color: rgb(var(--rgb-cyan)); }
62.5% { --icon-color: rgb(var(--rgb-light-blue)); }
68.75% { --icon-color: rgb(var(--rgb-blue)); }
75% { --icon-color: rgb(var(--rgb-indigo)); }
81.25% { --icon-color: rgb(var(--rgb-deep-purple)); }
87.5% { --icon-color: rgb(var(--rgb-purple)); }
93.75% { --icon-color: rgb(var(--rgb-pink)); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -132px;
}
mushroom-template-chip:nth-child(4)$: |
ha-icon {
animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
.shape {
--shape-color: none;
--icon-size: 18px;
top: 18px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: 198px;
}
card_mod:
style: |
ha-card {
height: 66px;
}
Legend! Happy as now!
Just added a bit more polish on my Mushroom Media Player (I can’t help myself). Now with all-new rounded album art corners.
Update is in original post here
Hey Rhys, Going to start out by saying that I really love your stuff!
I set out to animate a chip card using the “boing” feature you made.
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:cloud-download-outline
icon_color: green
content: |2-
{{states('sensor.speedtest_download') }} Mbit/s
Down
entity: sensor.speedtest_download
tap_action:
action: more-info
card_mod:
style: |
.content {
animation: boing 3s ease infinite;
transform-origin: 50% 90%;
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
The whole chip bounces. Is there a way to make the icon only bounce and not the entity (text and values)? Or is that not possible on chips?
Maybe you have a better option for displaying download/upload/ping for my internet connection.
It looks amazing, thank you for all the work you do. and sorry that I ask for more, can you add a way to add cover art image from a local file if the media playing dose not have. Thank you again.
Hi!
im casting to a google nest, how do i change the width so it fits?
is it caused by the theme?