removing the icon with card mod is very easy.
type: custom:mushroom-cover-card
entity: cover.office_blinds
card_mod:
style: |
mushroom-shape-icon {
display: none;
}
Cant add controls to the template card. you could add buttons and such with chips, but they would have to call scripts that do what you want.
Finally! Been pulling my hair out on that one! Thank you! I was missing the “mushroom-shape-icon” portion of the code.
You can also do this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: cover.office_blinds
primary: Office
secondary: '{{state_attr(''cover.office_blinds'',''current_position'')}}%'
icon: mdi:blinds
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: custom:mushroom-cover-card
entity: cover.office_blinds
show_buttons_control: true
card_mod:
style: |
mushroom-state-item {
display: none;
}
ha-card {
border: none;
box-shadow: none;
}
now the top section is fully templateable, but you still have the buttons available.
With the code provided shows just fine for me it seems.
can you provide a screenshot of what it looks like for you?
If I try to rewind the track forward and backward, then I can do it, but blindly
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;
}
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%;
}
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:
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).
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