Great! 
This works exactly as I imagined. Many thanks for the quick support. 
Hopefully, it will also help me with future implementations.
I’ll take another look at Min/Max.
I created a sensor to count the lights on, and it works well by querying it on the home assistant.
- platform: template
sensors:
luci_accese_counter:
friendly_name: "Numero Luci Accese"
value_template: "{{ states.light | selectattr('state','eq','on') | list | count }}"
I would like to make a mushroom card with the badge that tells me the number of lights turned on, was I thinking of using the correct template? It doesn’t work, I tried like this, where am I wrong?
type: custom:mushroom-template-card
primary: 'Luci accese'
secondary: ''
icon: mdi:lightbulb-question-outline
badge_color: ''
badge_icon: '{{ states.sensor.luci_accese_counter.state }}'
the badge appears, but not the number of lights
1 Like
Hi, you can do it like this:
- type: custom:mushroom-template-card
primary: Lichter
secondary: ''
icon: mdi:lightbulb
layout: vertical
icon_color: orange
badge_icon: none
badge_color: transparent
tap_action:
action: navigate
navigation_path: /lovelace-mushroom/lichter
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ states('sensor.anzahl_lichter_an') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
6 Likes
The best option is create a cover template so you could control as standar cover Template cover - Home Assistant
can you post the code?
please have a look at the line “content”. To test it just put in any number like this “10”:
mushroom-badge-icon:after {
content: "10";
position: absolute;
...
EDIT: just had a look at your code. Please test this with my example:
content: "{{ states('sensor.luci_accese_counter') }}";
type: custom:mushroom-template-card
primary: Luci
secondary: ''
icon: mdi:lightbulb
layout: vertical
icon_color: orange
badge_icon: ''
badge_color: transparent
tap_action:
action: navigate
navigation_path: luci
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ states('sensor.luci_accese_counter') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
I am definitely wrong something
Not even with 10 it works
I found your problem. you have to move the “card_mod:” to the same position as “tap_action:”. Move all following lines accordingly.
You have to exchange:
badge_icon: ''
with
badge_icon: none
I thought you copied that part already from my original post.
You are the best!
It was my mistake, before I had made some tests and I forgot to put None back. Sorry for the mistake.
1 Like
How can i change the spacing in the dropdown card to match that of the first pic? I would also like to keep the title of dropdown in the center.
Code:
type: custom:collapsable-cards
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
fill_container: true
use_light_color: false
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
tap_action:
action: toggle
hold_action:
action: more-info
collapsible_controls: true
icon: mdi:lightbulb-group
double_tap_action:
action: none
name: Living Room
entity: light.living_room_lights
card_mod:
style: |
ha-card {
--control-height: 15px;
--icon-size: 40px;}
ha-card {
{% if is_state(config.entity, 'on') %}
background: rgba(255, 152, 0, 0.1);
{%- else -%}
{%- endif %}
}
- type: custom:mushroom-light-card
fill_container: true
use_light_color: false
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
tap_action:
action: toggle
hold_action:
action: more-info
collapsible_controls: true
icon: mdi:light-recessed
double_tap_action:
action: none
entity: light.kitchen_main_lights
name: Kitchen Main
card_mod:
style: |
ha-card {
--control-height: 15px;
--icon-size: 40px;}
ha-card {
{% if is_state(config.entity, 'on') %}
background: rgba(255, 152, 0, 0.1);
{%- else -%}
{%- endif %}
}
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
fill_container: true
use_light_color: false
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
tap_action:
action: toggle
hold_action:
action: more-info
collapsible_controls: true
icon: mdi:lightbulb-group
double_tap_action:
action: none
entity: light.kitchen_table_lights
name: Kitchen Table
card_mod:
style: |
ha-card {
--control-height: 15px;
--icon-size: 40px;}
ha-card {
{% if is_state(config.entity, 'on') %}
background: rgba(255, 152, 0, 0.1);
{%- else -%}
{%- endif %}
}
- type: custom:mushroom-light-card
icon: mdi:track-light
show_color_control: false
collapsible_controls: true
show_brightness_control: true
fill_container: true
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
name: Kitchen Sink
entity: light.kitchen_sink
card_mod:
style: |
ha-card {
--control-height: 15px;
--icon-size: 40px;
}
ha-card {
{% if is_state(config.entity, 'on') %}
background: rgba(255, 152, 0, 0.1);
{%- else -%}
{%- endif %}
}
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.dining_room_lights
name: Dining Room
card_mod:
style: |
ha-card {
--control-height: 15px;
--icon-size: 40px;
}
ha-card {
{% if is_state(config.entity, 'on') %}
background: rgba(255, 152, 0, 0.1);
{%- else -%}
{%- endif %}
}
icon: mdi:lightbulb-group
fill_container: true
show_brightness_control: true
tap_action:
action: toggle
hold_action:
action: more-info
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.garage_lights
name: Garage
icon: mdi:lightbulb-fluorescent-tube-outline
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
collapsible_controls: true
fill_container: true
card_mod:
style: |
ha-card {
{% if is_state(config.entity, 'on') %}
background: rgba(255, 152, 0, 0.1);
{%- else -%}
{%- endif %}
}
A few things…
the issue is not with Mushroom, it is with custom:collapsable-cards. When I put the cards in a vertical-stack this is what it produced.
Secondly, your card_mod code is inccorrect. You should not have two instances of ha-card
enter it this way
card_mod:
style: |
ha-card {
--control-height: 15px;
--icon-size: 40px;
{% if is_state(config.entity, 'on') %}
background: rgba(255, 152, 0, 0.1);
{%- endif %}
}
I don’t believe custom:collapsable-cards is maintained. Fold-Entity-Row may be an option.
Is anyone able to help me with this, it used to work great but an update around 1-2 months ago cut off the text at the top and bottom:
The YAML:
type: custom:mushroom-template-card
primary: Bathroom Busy
icon: mdi:toilet
fill_container: false
badge_color: ''
icon_color: red
multiline_secondary: false
tap_action:
action: navigate
navigation_path: /dashboard-bathrom
layout: horizontal
card_mod:
style: |
ha-card {
--card-primary-font-size: 3rem !important;
border: none;
box-shadow: none;
background: rgba(0,0,0,0);
}
Can this be fixed in code? I’ve tried to utilise my minimal CSS knowledge, but didn’t get anywhere. Any pointers would be appreciated!
Allow me to answer myself, after digging through posts here and piecing together some info, I’ve found my solution. Adding the following to the ha-card section:
--card-primary-font-size: 46px !important;
--card-primary-line-height: 46px !important;
Essentially line height needs to match/exceed font size.
1 Like
Dosent work
type: custom:mushroom-template-card
entity: switch.vaskemaskin
icon: mdi:tumble-dryer
icon_color: '{{ ''teal'' if states(''sensor.vaskemaskin_power'') | float > 4 }}'
primary: Vaskemaskin
card_mod:
style:
mushroom-shape-icon$: |
ha-state-icon {
{{ 'animation: shake 400ms ease-in-out infinite, drum 1s infinite;' if states('sensor.vaskemaskin_power') | float > 4 }}
transform-origin: 50% 65%;
}
@keyframes shake {
0%, 100% { transform: rotate(4deg); }
50% { transform: rotate(-4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
Could anyone explain why the animations aren’t functioning on this card? I’ve experimented with a few different cards, and none of them seem to work except this one.
Works
type: custom:mushroom-template-card
entity: switch.inngang_taklampe
icon: mdi:fan-auto
icon_color: |-
{% if is_state('switch.inngang_taklampe', 'on') %}
green
{% else %}
red
{% endif %}
badge_icon: mdi:fan
badge_color: teal
secondary: ''
card_mod:
style: |
{% if is_state('switch.inngang_taklampe', 'on') %}
mushroom-badge-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
{% endif %}
Your IF statement was preventing the animation.
type: custom:mushroom-template-card
entity: switch.vaskemaskin
icon: mdi:tumble-dryer
icon_color: '{{ ''teal'' if states(''sensor.vaskemaskin_power'') | float > 4 }}'
primary: Vaskemaskin
card_mod:
style: |
ha-state-icon {
{% if states('sensor.vaskemaskin_power') | float > 4 %}
animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
transform-origin: 50% 110%;
}
@keyframes shake {
0%, 100% { transform: rotate(4deg); }
50% { transform: rotate(-4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
{% endif %}
Thanks for the help. Just while im at it, how do i get the animations to turn on or off. This dosent seem to work.
type: custom:mushroom-template-card
icon: mdi:sprinkler
icon_color: cyan
primary: Sprinkler
entity: switch.inngang_taklampe
card_mod:
style: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: sprinkle 2s linear infinite;
transform-origin: 29% 88%;
}
@keyframes sprinkle {
0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
6%, 21%, 36%, 51% { transform: rotate(2deg); }
}
You were missing {% endif %} in your IF statement.
type: custom:mushroom-template-card
icon: mdi:sprinkler
icon_color: cyan
primary: Sprinkler
entity: switch.kitchen_lights
card_mod:
style: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: sprinkle 2s linear infinite;
transform-origin: 29% 88%;
}
@keyframes sprinkle {
0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
6%, 21%, 36%, 51% { transform: rotate(2deg); }
}
{% endif %}
1 Like
Thank you. I’ve finally managed to make most of the animations work. 