I have the same problem. I think its source comes from the custom card mini-media-player. The progress bar is taken from it
I am trying to add a numeric badge to a template card based on the code previously given in this thread. Unfortunately the badge is on the middle right side instead of the top right. Can anyone tell me what I am doing wrong? Below is my code and output, I am using lovelace_gen which accounts for some of the weird code.
type: custom:mushroom-template-card
primary: {{name}}
icon_color: amber
badge_icon: none
badge_color: transparent
layout: vertical
icon: {{icon}}
card_mod:
style: |
mushroom-badge-icon:after {
{% raw %}
content: "{{ states |selectattr('entity_id', 'in', {% endraw %}{{entities}}{% raw %}) | list | selectattr('state', 'eq', 'on') | list | count}}";"
{% endraw %}
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: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
1 Like
Like this?
type: custom:mushroom-template-card
entity: light.lounge_main_light
badge_icon: m
badge_color: amber
icon: |-
{% if expand(states.light)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Lounge'))
|rejectattr('entity_id', 'search', 'master')
|map(attribute='entity_id')
|list | count > 1
%}
mdi:lightbulb-multiple
{% else %}
mdi:lightbulb
{% endif %}
icon_color: |-
{% if expand(states.light)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Lounge'))
|rejectattr('entity_id', 'search', 'master')
|map(attribute='entity_id')
|list | count > 0
%}
amber
{% else %}
disabled
{% endif %}
card_mod:
style: |
mushroom-badge-icon::after {
content: '{{ expand(states.light) |selectattr('state', 'eq', 'on') |selectattr('entity_id', 'in', area_entities('Lounge')) |rejectattr('entity_id', 'search', 'master') |map(attribute='entity_id') |list | count }}';
position: absolute;
top: -11%;
right: 3px;
}
Can also build the badge from scratch, like this:
type: custom:mushroom-template-card
entity: light.lounge_main_light
icon: |-
{% if expand(states.light)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Lounge'))
|rejectattr('entity_id', 'search', 'master')
|map(attribute='entity_id')
|list | count > 1
%}
mdi:lightbulb-multiple
{% else %}
mdi:lightbulb
{% endif %}
icon_color: |-
{% if expand(states.light)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Lounge'))
|rejectattr('entity_id', 'search', 'master')
|map(attribute='entity_id')
|list | count > 0
%}
amber
{% else %}
disabled
{% endif %}
card_mod:
style: |
ha-state-icon::after {
content: '{{ expand(states.light) |selectattr('state', 'eq', 'on') |selectattr('entity_id', 'in', area_entities('Lounge')) |rejectattr('entity_id', 'search', 'master') |map(attribute='entity_id') |list | count }}';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 9px;
font-weight: 700;
{% if expand(states.light)
|selectattr('state', 'eq', 'on')
|selectattr('entity_id', 'in', area_entities('Lounge'))
|rejectattr('entity_id', 'search', 'master')
|map(attribute='entity_id')
|list | count > 0
%}
background-color: rgba(var(--rgb-amber), 0.5);
{% else %}
background-color: rgba(var(--rgb-disabled), 0.5);
{% endif %}
border-radius: 50%;
}
1 Like
And yes and no. I do not know how these objects were listed so that the number of switches turned on is counted. Everywhere the enumeration goes through the group. That’s why I’m clarifying how to combine these switches into a group
I’ll try my luck in this thread…
If anyone doesn’t know how to animate a chip card
Found your problem. But please for the future dont cross-post. I would have got back to you in the other thread in due course.
The built in animations seem to not work for chips on chrome and mobile app (works on firefox not tested elsewhere).
Add some keyframes and it will work.
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: input_boolean.bedroom_all_lights_dropdown
state: 'off'
chip:
type: template
icon: mdi:test-tube
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
animation: pulsefade 2s ease-in-out infinite;
}
@keyframes pulsefade {
0% {opacity: 100%;}
50% {opacity: 0%;}
100% {opacity: 100%;}
}
@piitaya maybe one for you to look at? Should i raise as a bug on github or is it unintended that it even works on chips in the first place in firefox?
Anyone know how i can get the walkingman icon to flash next to the title text?
Heres my code:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Toalett
secondary: |-
{{ states('sensor.hue_motion_do_temp') }}°C |
{{ states('sensor.aqara_multisensor_gangen_fukt') }} %
icon: mdi:toilet
entity: light.dolys_dz
icon_color: |-
{% if is_state('light.dolys_1', 'on') %}
orange
{% elif is_state('light.dolys_2', 'on') %}
orange
{% endif %}
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: /lovelace-panel/toalett
multiline_secondary: false
layout: horizontal
fill_container: false
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.dolys_dz
icon: |-
{% if is_state(config.entity, 'on') %}
hue:ceiling-light
{% else %}
hue:ceiling-light-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.6em
- type: conditional
conditions:
- entity: binary_sensor.hue_motion_do_motion
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:walk
card_mod:
style: |
ha-card {
--chip-icon-size: 0.6em;
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-top: 10px;
alignment: end
Best you can do is probably something like this:
Difficult to make it dynamic right next the the title and work with different title lengths.
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Toalett
secondary: |-
{{ states('sensor.hue_motion_do_temp') }}°C |
{{ states('sensor.aqara_multisensor_gangen_fukt') }} %
icon: mdi:toilet
entity: light.dolys_dz
icon_color: |-
{% if is_state('light.dolys_1', 'on') %}
orange
{% elif is_state('light.dolys_2', 'on') %}
orange
{% endif %}
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: /lovelace-panel/toalett
multiline_secondary: false
layout: horizontal
fill_container: false
card_mod:
style: |
ha-card {
z-index: 1;
background: transparent !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.dolys_dz
icon: |-
{% if is_state(config.entity, 'on') %}
hue:ceiling-light
{% else %}
hue:ceiling-light-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.6em
- type: conditional
conditions:
- entity: input_boolean.bedroom_fan_dropdown
state: 'off'
chip:
type: template
icon_color: red
icon: mdi:walk
card_mod:
style: |
ha-card {
--chip-icon-size: 0.6em;
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-top: 10px;
right: 10px;
alignment: start
Is there a way to show cover art when using the mushroom media card?
You can use search this topic to try and find something like this:
Appreciate that the topic is large but this is the easiest way to find what you want
1 Like
Thanks! This is helpful, looks like I also had an extra quote at the end of my content line after the semi-colon, which for some reason caused the text to move down a line.
{% raw %}
content: "{{ states |selectattr('entity_id', 'in', {% endraw %}{{entities}}{% raw %}) | list | selectattr('state', 'eq', 'on') | list | count}}";"
{% endraw %}
I’m trying to display a count of active occupancy sensors in the secondary info of a template card. This code works in the dev tools template section but not when i use in the card. If i remove the 3rd line it works and shows count but i need it to filter by device class since not every binary sensor is an occupancy sensor. Any help appreciated
{{ states.binary_sensor
| selectattr('state','eq','on')
| selectattr('attributes.device_class','eq','occupancy')
| list | count }}Preformatted text
I don’t use card mod so I can not help on this point 
Also card mod only works partially with Mushroom, there is no official support (because it’s a very hacky way to inject css into card).
1 Like
Understand. Its just strange as the built in animations tend to work on any type of icon from mushroom.
And its clearly browser dependant so wont be an easy fix either - so can fully appreciate that this is likely one to not need fixing as we can just work around it with card mod instead
Can you show the output you get in the dev tools please?
Edit: nvm think i got it for you. You need to include a device class is defined check:
{{ states.binary_sensor
| selectattr('state', 'eq', 'on')
| selectattr('attributes.device_class','defined')
| selectattr('attributes.device_class', 'eq', 'occupancy')
| list | count
}}
This seems to work for me in the template card.
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: |-
{{ states.binary_sensor
| selectattr('state', 'eq', 'on')
| selectattr('attributes.device_class','defined')
| selectattr('attributes.device_class', 'eq', 'occupancy')
| list | count
}}
icon: mdi:home
Yep, some browsers doesn’t react in the same way for keyframes with shadow dom…
Oh awesome work !
Could you share your code pour the bottom bar ?
Thanks Dimitri. Including the device class defined check fixed it for me
1 Like
I’ve updated my climate cards to better match mushroom styling
This uses the tile card so its really easy to customize.
All you have to do is change climate.study_aircon to your thermostat.
You can also add features like climate control using the UI.
features:
- type: climate-hvac-modes
hvac_modes:
- 'off'
- heat
- cool
type: tile
entity: climate.study_aircon
show_entity_picture: true
vertical: true
icon: none
name: ' '
state_content: state
card_mod:
style:
ha-tile-icon$: |
.shape {
--tile-icon-color: none !important;
}
ha-tile-info$: |
.primary {
font-family: Montserrat;
--primary-text-color: var(--contrast-100);
font-size: 1.5em !important;
font-weight: 600 !important;
line-height: 2em !important;
margin-top: -70px;
text-align: start;
content:"test";
z-index:1;
}
.primary:after {
content:'{{ state_attr('climate.study_aircon','temperature') }}°C';
text-transform: Uppercase;
}
.secondary {
font-size: 1.2em !important;
font-family: Montserrat;
text-transform: Uppercase;
color: {% if is_state('climate.study_aircon', 'off') %}
var(--contrast8) {% else %}
var(--contrast60) {% endif %} !important;
text-align: start;
}
.: |
ha-card {
--ha-card-border-width: 0;
background: {% if is_state('climate.study_aircon', 'cool') %}
linear-gradient(45deg, rgba(0,46,111,1), rgba(159,204,250,1))
{% elif is_state('climate.study_aircon', 'heat') %}
linear-gradient(45deg, rgba(153,25,35,1), rgba(253,172,90,1))
{% endif %};
padding-bottom:5px;
height: 150px;
width: 150px;
box-shadow: none;
}
26 Likes
Thank you! I sent you a message.
1 Like