@rhysb I’m trying to implement your Trash animation into a chip similar to your examples above, but for the life of me I just can’t figure it out. Could you post an example of how I’d add the Trash animation as a chip please.
Try like this:
{{ '--icon-animation: vroom 2s ease-in-out infinite;' if is_state(config.entity, 'on') }}
Sure, here you go:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:trash-can
icon_color: green
- type: template
icon: mdi:trash-can
icon_color: green
tap_action:
action: none
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
clip-path: inset(26% 0 0 0);
}
mushroom-template-chip:nth-child(2)$: |
mushroom-chip {
cursor: default !important;
}
ha-icon {
position: absolute;
left: -35px;
animation: lid 1s ease infinite;
clip-path: inset(0 0 75% 0);
transform-origin: 50% 25%
}
@keyframes lid {
0%, 50%, 80%, 100% { transform: translateY(0); }
10% { transform: translateY(-5px) rotate(-37deg); }
20% { transform: translateY(-5px) rotate(31deg); }
30% { transform: translateY(-5px) rotate(-25deg); }
40% { transform: translateY(-5px) rotate(19deg); }
60% { transform: translateY(-3px); }
}
.: |
mushroom-template-chip:not(:first-child) {
--chip-background: none;
--chip-box-shadow: none;
--chip-border-width: 0;
}
3 Likes
Add it to the stack-in-card, like this:
type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Kids Room
secondary: >
{{
states('sensor.kids_room_temperature')|float|round(0)
- 1 }} {{ state_attr('sensor.kids_room_temperature',
'unit_of_measurement') }}
icon: mdi:teddy-bear
icon_color: purple
card_mod:
style: |
ha-card {
--ha-card-background: none;
--ha-card-border-width: 0
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.kids_room_lights
icon: mdi:ceiling-light-multiple
icon_color: |-
{% if states(entity) == 'on' %}
amber
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background:
{% if states('light.kids_room_ceiling_lights') == 'on' %}
rgba(var(--rgb-amber), 0.2);
{% else %}
rgba(var(--rgb-disabled), 0.15);
{% endif %}
}
alignment: end
card_mod:
style: |
ha-card {
margin: 5px 24px 5px 5px;
--chip-box-shadow: none;
--chip-border-radius: 25px;
--chip-height: 42px;
--chip-padding: 10px;
height: 55px
}
card_mod:
style: |
ha-card {
--ha-card-background: url('/local/mushroom.png') center / cover;
}
1 Like
Would you have an example perhaps ?
@rhysb Thanks, unfortunately this leaves a blank chip after the trash can chip. If you add another chip or if the trash can chip is the last chip on the card (alignment: end) then there’s a blank chip also. Is there any way to get around that?
Hey,
i have just switched from Dwains Dashboard to Mushroom Lovelace cards.
The only feature I am really missing is that i can toggle lights by clicking on the icon and view the more-info dialogue by clicking on the Name.
Is there any way i can get this on my Mushroom Cards too?
That’s it great. Thanks
1 Like
Hello.
Would it be possible to add the power button like on the mushroom-media-player-card to the mushroom-entity-card? I have Hass Agent on my PC and it would be nice to add buttons like power off, restart and volume to the card.
Thanks in advance.
Hello Everyone. I`m having issue with some conditions ( think).
I`ve created heating card which also includes my AC. It looks like this
With red circle is heating thermostat, and with blue circle is AC. problem is with upper-left status (also red circle).
When im heating, icon and status are changing for heating values which is correct, but my goal is also have that upper-left corner icon and status changed when im using AC (i want then icon changing on blue and also changing icon).
Anyone have idea how to do this?
I`m pasting my code below.
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
style: |
ha-card {
padding-bottom: 1px !important;
}
primary: Studio
secondary: >-
{% set mode = states('climate.studio_kaloryfer') %} {% if mode
=='off' %} Status: off {% elif mode == 'heat' %} Status:
Grzanie {% else %} mdi:home-thermometer {% endif %}
icon: |-
{% set mode = states('climate.studio_kaloryfer') %}
{% if mode == 'off' %}
mdi:power
{% elif mode == 'heat' %}
mdi:fire
{% else %}
mdi:home-thermometer
{% endif %}
icon_color: >-
{% set status = state_attr('climate.studio_kaloryfer','hvac_action')
%}
{% if status == 'off' %}
grey
{% elif status == 'heating' %}
red
{% endif %}
tap_action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{{ '--shape-animation: ping 2s infinite;' if
is_state('climate.studio_kaloryfer', 'heat') }}
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-red), 0.7);
}
100% {
box-shadow: 0 0 5px 15px transparent;
}
}
- type: vertical-stack
cards:
- type: custom:simple-thermostat
style: |
ha-card {
--st-spacing: px;
}
ha-card .current--value {
color: #ffffff;
}
header {
margin-bottom: 12px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #9e9e9e;
}
entity: climate.studio_kaloryfer
header:
name: false
icon: false
decimals: '1'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '0.5'
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
auto: false
chips: null
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-height: 44px;
--chip-spacing: 10px;
padding: 3px 10px;
margin-left: 10px;
margin-right: 10px;
}
ha-card .mode-item {
--st-spacing: 10px;
border-radius: 10px;
}
alignment: justify
chips:
- type: template
content: 'Na zewnątrz: {{state_attr(entity, ''temperature'')}} °C'
entity: sensor.temperatura_na_zewnatrz_temperature
icon: mdi:home-thermometer
tap_action:
action: more-info
icon_color: blue
- type: template
content: 'W studiu: {{state_attr(entity, ''temperature'')}} °C'
entity: sensor.studio_czujnik_temperatury_temperature
icon: mdi:thermometer
icon_color: green
tap_action:
action: more-info
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 0px;
--st-mode-background: #262626;
margin-left: 12px;
margin-right: 12px;
}
ha-card .mode-item.active.off {
background: #262626;
color: #9e9e9e;
}
ha-card .mode-item.active.cool {
background: #1d3447;
color: #2196f3;
}
ha-card .mode-item.active.heat {
background: #472421;
color: #f44336;
}
ha-card .mode-item.active.heat_cool {
background: #493516;
color: #ff9800;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 10px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.studio_kaloryfer
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off':
name: Power
heat:
name: Heat
auto: false
- type: grid
square: false
columns: 2
cards:
- type: vertical-stack
cards:
- type: custom:simple-thermostat
style: |
ha-card {
--st-spacing: px;
--st-default-spacing: 1.3px;
}
ha-card .current--value {
color: #ffffff;
}
header {
margin-bottom: 8px !important;
padding-bottom: px !important;
}
ha-card .thermostat-trigger {
color: #9e9e9e;
}
entity: climate.midea_ac
header:
name: false
icon: false
decimals: '1'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '0.5'
control:
hvac:
'off': false
heat_cool: false
cool: false
heat: false
fan_only: false
dry: false
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 1.3px;
--st-mode-background: #262626;
margin-right: 12px;
}
ha-card .mode-item.active.off {
background: #262626;
color: #9e9e9e;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 6px;
border-radius: 8px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.midea_ac
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off': true
heat: false
cool: true
heat_cool: false
fan_only: false
dry: false
Thnak You in advance!
this is awesome, thx for the code.
I have add some chips to it for navigation and popup for my mobile view
It is still in progress but I look forward to share it with you.
Here some screens
Cheers
27 Likes
Hi, it´s me again,
I am very frustrated and I wanted to understand, why this code from the developement section “template” is not working in the chips template:
Wochenende:{{ ' ' }} {{states
("input_datetime.on_time_kellerlicht_werktags")[:-3]}} Uhr {{states
("input_datetime.off_time_kellerlicht_werktags")[:-3]}} Uhr
The spaces between the brackets are ignored. {{ ’ ’ }}. In the template, it works like it should. How can this be fixed?
Hello,
I’ve just updated HA for the first time since last summer, and I notice that all of my cards now have a small white shadow going around them by default. Which I dont neceassarily mind, except it makes the stacked cards look horrible.
I’m sure this is on this thread somewhere when whichever update caused this, but can someone tell me how to remove this from my cards? Either all at once, or each one specifcally
Thanks
I apologize, I just fixed it by a long overdue update for Mushroom and switching theme in my profile settings. Going to leave this here rather than delete, in case anyone else is late to the party like me. lol
1 Like
I believe you can do this if you use a vertical stack card, which you can then define the tap actions to be different for the left vs right side
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px;
}
Yes you can do it. A lot of examples here.
Digging more into your sensors you’re using in this card I’m wondering what input_boolean.thermostat_dropdown does in this card and what it’s definition is. Can you share more details?
Poking a bit, I learned it was just a toggle helper simply defined like this:
1 Like
If you have use mushroom template card with stack-in-card, you can try it. Удачи 
card_mod:
style: |
ha-card {
width: 66px;
margin-left: 68%;
top: -215px;
background: none;
--icon-border-radius: 120px;