Go to Settings->People, select the person and add a picture.
Edit the Mushroom Person Card and change the Icon Type to Entity Picture.
Add !important, like this:
height: 100px !important;
A better option would be to change the padding. You can add mush-spacing: 4px to your theme file and it will change it for all Mushroom Cards.
Could You do me a favour and could You share with configuration.yaml for open windows goup? Ive tried copied from battery config but its not working:/
Thank You in advance!
Hello bro, I would like to add a photo instead of an icon in this.
type: custom:mushroom-chips-card
chips:
- type: template
entity: input_number.lounge_pc_volume
icon: mdi:volume-high
icon_color: blue
content: >-
{{ (states(entity) | float * 100) | round(0) }}%
Volume
card_mod:
style: |
ha-card:before {
content: "";
position: absolute;
height: var(--chip-height);
width: var(--chip-height);
border-radius: 50%;
background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-cyan)) {{ (states(config.entity) |float * 100) | round(0) }}% 0%, var(--card-background-color) 0% 100%);
}
::slotted(ha-icon) {
margin-right: 0.4em !important;
}
Ah, my bad 
.
You can replace the icon with a picture like this.
Mushroom Chip Progress Bar with Picture:
type: custom:mushroom-chips-card
chips:
- type: template
entity: input_number.lounge_pc_volume
icon: none
content: '{{ (states(entity) | float * 100) | round(0) }}% Volume'
card_mod:
style: |
ha-card:before {
content: "";
position: absolute;
height: var(--chip-height);
width: var(--chip-height);
border-radius: 50%;
background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-orange)) {{ (states(config.entity) | float * 100) | round(0) }}% 0%, var(--card-background-color) 0% 100%);
}
::slotted(ha-icon) {
background: url( '/local/ls50.png' ) no-repeat center center;
background-size: 0.7em;
height: var(--chip-height);
width: var(--chip-height);
border-radius: 50%;
z-index: 1;
}
.content {
--chip-padding: 0 0.25em 0 0;
}
7 Likes
Yes, sure. It looks like this:
all_windows:
name: All Windows
entities:
- binary_sensor.rhys_office_left_window_contact
- binary_sensor.rhys_office_right_window_contact
- binary_sensor.michaelas_bedroom_left_window_contact
- binary_sensor.michaelas_bedroom_top_right_window_contact
- binary_sensor.michaelas_bedroom_bottom_right_window_contact
- binary_sensor.elijahs_bedroom_left_window_contact
- binary_sensor.elijahs_bedroom_right_window_contact
- binary_sensor.family_room_left_window_contact
- binary_sensor.family_room_right_window_contact
- binary_sensor.dining_room_left_window_contact
- binary_sensor.dining_room_right_window_contact
- binary_sensor.lounge_top_left_window_contact
- binary_sensor.lounge_top_right_window_contact
- binary_sensor.lounge_bottom_left_window_contact
- binary_sensor.lounge_bottom_right_window_contact
- binary_sensor.garage_left_window_contact
- binary_sensor.garage_right_window_contact
- binary_sensor.kitchen_window_contact
- binary_sensor.toilet_window_contact
- binary_sensor.master_bedroom_left_window_contact
- binary_sensor.master_bedroom_top_left_window_contact
- binary_sensor.master_bedroom_top_right_window_contact
- binary_sensor.sarahs_office_left_window_contact
- binary_sensor.sarahs_office_right_window_contact
- binary_sensor.sarahs_office_top_left_window_contact
- binary_sensor.ensuite_window_contact
- binary_sensor.bathroom_left_window_contact
- binary_sensor.bathroom_right_window_contact
1 Like
Damn! i wrote bad question:D i`m sorry:)
What i mean, are You able to send me configuration for sensor which You created for all windows group? In past You sent that sensor config for devices with batteries, here:
sensor:
- platform: template
sensors:
devices_with_low_battery:
friendly_name: 'Devices with Low Battery'
unit_of_measurement: devices
value_template: >-
{% set ignore_entities = [] %}
{{ states.sensor
| selectattr('attributes.device_class', 'eq', 'battery')
| rejectattr('entity_id', 'in', ignore_entities)
| map(attribute='state')
| reject('in', ['unknown', 'unavailable'])
| map('int', -1) | select('le', 30)
| select('ge', 0)
| list | count
}}
icon_template: >-
{% if is_state('sensor.devices_with_low_battery', '0') %}
mdi:battery-check
{% else %}
mdi:battery-alert
{% endif %}
Thank You!
1 Like
A separate sensor template is not required. Just template it in the Chip like this:
content: >-
{{ expand(states.group.all_windows) | selectattr( 'state', 'eq', 'on') | list | count }}
Have a look here:
2 Likes
Ohh, gotcha. Thank You, gonan combine it;)
1 Like
For your first question, have a look here:
You are the master ! Respectfully kneeling…
1 Like
Many thanks.
Sure, here is a variation with volume button.
Mushroom Media Player with Volume:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- next
- play_pause_stop
- previous
- shuffle
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(--album-art-color), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--album-art-color), 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(--album-art-color);
}
.actions {
--rgb-primary-text-color: var(--album-art-color);
--primary-text-color: rgb(var(--album-art-color));
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'idle') and not is_state(config.entity, 'off') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
margin: 4px 4px 16px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
- type: conditional
conditions:
- entity: media_player.currently_playing
state_not: 'off'
- entity: media_player.currently_playing
state_not: idle
card:
type: custom:mushroom-template-card
entity: input_boolean.volume_visible
icon: mdi:volume-high
layout: horizontal
card_mod:
style: |
ha-card {
height: var(--control-height) !important;
width: calc((100% / 3) - var(--spacing));
border-radius: var(--control-border-radius) !important;
background: rgba(var(--album-art-color), 0.05) !important;
margin-left: auto;
margin-right: auto;
--ha-card-border-width: 0;
}
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;
--icon-color: rgb(var(--album-art-color)) !important;
}
- type: conditional
conditions:
- entity: input_boolean.volume_visible
state_not: 'off'
- entity: media_player.currently_playing
state_not: 'off'
- entity: media_player.currently_playing
state_not: idle
card:
type: custom:mushroom-media-player-card
entity: media_player.currently_playing
secondary_info: none
primary_info: none
icon_type: none
show_volume_level: false
use_media_info: false
fill_container: false
volume_controls:
- volume_set
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
--rgb-state-media-player: var(--album-art-color);
padding-bottom: 0px !important;
background: none;
}
- type: conditional
conditions:
- entity: media_player.currently_playing
state_not: 'off'
- entity: media_player.currently_playing
state_not: idle
card:
entity: media_player.currently_playing
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 {
{% if is_state(config.entity, 'playing') %}
--paper-progress-container-color: rgba(var(--album-art-color), 0.2) !important;
{% endif %}
}
.: |
ha-card {
margin: 12px 12px 12px;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--album-art-color));
--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);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state('media_player.currently_playing', 'idle') and not is_state('media_player.currently_playing', 'off') %}
background: url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
{% endif %}
filter: blur(150px) saturate(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
:host {
--album-art-color:
{% if not is_state('media_player.currently_playing', 'idle') and not is_state('media_player.currently_playing', 'off') %}
{{ states('sensor.muted_color') }}
{% else %}
var(--rgb-indigo-color)
{% endif %};
}
11 Likes
Hi, Maybe I did something completely wrong here. Should I be using the cofiguration file?
And not trying to edit the code here?
How should I define the card I want in the configuration file and how then can I call it?
You have spelt ‘height’ incorrectly.
1 Like
thank you very much 
1 Like
These seem like shadow to me, not borders… 
But even still;
For removing borders you can do either of the following:
border: none;
# or
border-width: 0;
if it’s actually shadow you can do:
box-shadow: none;
# or
box-shadow: 0 0 0 0;
You might have to add a
!important
# for example:
box-shadow: none !important;
To the end of them.
So for example, with your code:
Did you figure out how to do this using stack-in-card?
Excuse me if this has been answered somewhere already (I’ve been searching for two days without luck) but is there any way to change the icon color on a mushroom entity card based on state? I’ve actually been able to get it to once, but not in conjunction with the animation I’d also like:
type: custom:mushroom-entity-card
name: Front Yard
icon: mdi:sprinkler-variant
fill_container: false
tap_action:
action: toggle
layout: vertical
secondary_info: none
entity: switch.closet
icon_color: '{{ ''yellow'' if(is_state(switch.closet, ''on'')) else ''red'' }}'
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: spray 4s ease-in infinite;' if(is_state('switch.closet', 'on')) }}
}
@keyframes spray {
0%, 50%, 100% { clip-path: polygon(0 0, 60% 0, 61% 100%, 0% 100%); }
25%, 75% { clip-path: polygon(41% 1%, 100% 0, 100% 100%, 39% 100%); }
}
thank you, bro!
1 Like