Hey guys,
Noob here needs some help. So after updating HA to core 2023 11.3, Supervisor 2023 11.2 and Operating System 11.1, the progress bar stopped showing at all in the media player card from @rhysb. Please tell me which way to dig
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.yandex_station_mg0000000000000284160000431a7637
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
{{ 'animation: none;' if not is_state(config.entity, 'playing') }}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
--rgb-state-media-player: var(--rgb-indigo);
--primary-text-color: black;
--secondary-text-color: grey;
}
.actions {
--rgb-primary-text-color: var(--rgb-white);
--primary-text-color: rgb(var(--rgb-black));
}
- type: conditional
conditions:
- entity: media_player.yandex_station_mg0000000000000284160000431a7637
state_not: 'off'
- entity: media_player.yandex_station_mg0000000000000284160000431a7637
state_not: idle
card:
entity: media_player.yandex_station_mg0000000000000284160000431a7637
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{{ '--paper-progress-container-color: rgba(var(--mush-rgb-indigo, 63, 81, 181), 0.2) !important;' if is_state(config.entity, 'playing') }}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--mush-rgb-indigo, 63, 81, 181));
--mmp-border-radius: 12px !important;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card::before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
{% if not is_state('media_player.yandex_station_mg0000000000000284160000431a7637', 'idle') %}
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url( '{{ state_attr('media_player.yandex_station_mg0000000000000284160000431a7637', "entity_picture") }}' ) center no-repeat;
filter: blur(150px) saturate(400%);
background-size: 100% 100%;
{% endif %}
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
--ha-card-border-width: 0;
{% if not is_state('media_player.yandex_station_mg0000000000000284160000431a7637', 'idle') %}
background: url( '{{ state_attr("media_player.yandex_station_mg0000000000000284160000431a7637", "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
{% if state_attr('media_player.yandex_station_mg0000000000000284160000431a7637', 'media_content_type') == 'tvshow' %}
background-size: auto 100%, cover;
{% else %}
background-size: 50% auto, cover;
{% endif %}
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
{% endif %}
}
And another question, but on a different topic. How do I combine the light switches to control them? How do I make a count of the switches turned on?
Hello,
I’m trying to change the icon color on custom:mushroom-lock-card. Red icon when unlocked and green icon when locked.
I understand it might be a simple thing, but I can’t seem to get it right 
Could someone help with hiding the state icon on the Mushroom Cover Card, please? I have card_mod installed. !!! Better yet, I would like to add the cover controls (garage) to the Mushroom Template Card. !!! I can’t find the solution to either of these with a Google search.
You cant on the lock card itself without card mod.
you can only use templates in the mushroom template card.
but with card mod it can be done like this pretty easily:
type: custom:mushroom-lock-card
entity: lock.backdoor_locked_in
card_mod:
style: |
mushroom-shape-icon {
{% if states('lock.backdoor_locked_in') == 'locked' %}
--icon-color: rgba(var(--rgb-green), 1) !important;
--shape-color: rgba(var(--rgb-green), 0.2) !important;
{% else %}
--icon-color: rgba(var(--rgb-red), 1) !important;
--shape-color: rgba(var(--rgb-red), 0.2) !important;
{% endif %}
}
1 Like
Not a question for the mushroom thread is it?
1 Like
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.
1 Like
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;
}
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