I have the same problem, did you get it to show the artist?
Not yet. This should be the minimum that has to be shown. Strange itās not there. Hope someone can help.
I have searched this thread and found the answer after a little bit of tinkering:
The setting that worked is this in line 19:
.: |
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.wohnzimmer_pi
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary:before {
content: "{{ (state_attr(config.entity, "media_artist")) }} - ";
}
.: |
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;
}
mushroom-state-info$: |
.primary:before {
content: "{{ (state_attr(config.entity, "media_artist")) }} - ";
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/images/idle.png') center no-repeat;
{% if not is_state(config.entity, 'idle') %}
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: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 60px
margin: '-14px 0px -8px -4px;'
cards:
- type: custom:mushroom-media-player-card
entity: media_player.wohnzimmer_mediaplayer_plex
volume_controls:
- volume_set
- volume_buttons
media_controls: []
show_volume_level: true
use_media_info: false
icon_type: none
primary_info: none
secondary_info: none
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
box-shadow: none;
margin-right: -8px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.multiroom_status
state: 'on'
chip:
type: action
icon: mdi:music-box
tap_action:
action: call-service
service: script.multiroom_off
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-disabled), 0.2);
margin-top: 12px;
--chip-box-shadow: none;
--chip-border-radius: var(--control-border-radius);
--chip-border-width: 0;
--chip-height: 42px;
}
- type: conditional
conditions:
- entity: input_boolean.multiroom_status
state: 'off'
chip:
type: action
icon: mdi:music-box-multiple
tap_action:
action: call-service
service: script.multiroom_on
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-disabled), 0.2);
margin-top: 12px;
--chip-box-shadow: none;
--chip-border-radius: var(--control-border-radius);
--chip-border-width: 0;
--chip-height: 42px;
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 60px
margin: '-14px 0px -8px -4px;'
cards:
- type: conditional
conditions:
- entity: media_player.squeezelite_ha_addon
state_not: 'off'
- entity: media_player.squeezelite_ha_addon
state_not: idle
card:
type: custom:mushroom-media-player-card
entity: media_player.squeezelite_ha_addon
volume_controls:
- volume_set
media_controls: []
show_volume_level: true
use_media_info: false
icon_type: none
primary_info: none
secondary_info: none
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
box-shadow: none;
margin-right: -8px !important;
}
- type: conditional
conditions:
- entity: media_player.squeezelite_ha_addon
state_not: 'off'
- entity: media_player.squeezelite_ha_addon
state_not: idle
card:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:knife
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-disabled), 0.2);
margin-top: 12px;
--chip-box-shadow: none;
--chip-border-radius: var(--control-border-radius);
--chip-border-width: 0;
--chip-height: 42px;
}
- type: conditional
conditions:
- entity: media_player.wohnzimmer_pi
state_not: 'off'
- entity: media_player.wohnzimmer_pi
state_not: idle
card:
entity: media_player.wohnzimmer_pi
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(--rgb-orange-color), 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(--rgb-orange-color));
--mmp-border-radius: 12px !important;
--ha-card-border-width: 0;
}
- type: custom:stack-in-card
mode: horizontal
margin: false
cards:
- type: custom:mushroom-entity-card
entity: script.playplaylist_wohnzimmer
name: Metal
icon: mdi:playlist-music
secondary_info: none
tap_action:
action: toggle
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/images/idle.png') center no-repeat;
{% if not is_state('media_player.currently_playing', 'idle') %}
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);
}
Is it possible to display conditional chips based on numerical conditions? The following code unfortunately does not work:
- type: conditional
conditions:
- entity: sensor.humidity_zimmer_hannah
condition: numeric_state
above: 70
chip:
type: entity
entity: sensor.humidity_zimmer_hannah
icon_color: red
tap_action:
action: none
content_info: none
icon: mdi:water-percent
Have a look at this card?
7 Likes
Is there a way to add secondary data to a mushroom fan card?
I have two āModern Formsā brand fans, and the integration will tell me which direction the fans are running, and Iād like to change their direction based on environmental conditions, so Iād like to have the fan direction displayed on the card.
I tried building my own fan card from scratch, but sadly mushroom cards dont let you easily take that nice spinning fan icon and use it in a mushroom template card, or use the fan/dimmer horizontal slider. Is there a way to do this, or am I out of luck unless mushroom cards get an update letting folks use those elements in template cards?
The layout card (GitHub - thomasloven/lovelace-layout-card: š¹ Get more control over the placement of lovelace cards.) will give you the flexibility you want for this.
1 Like
You could try this:
{{ as_timestamp(states.binary_sensor.voordeur.last_changed) | timestamp_custom('%H %M',True) }}
Found at: Last_updated State and last-changed in Lovelave - #18 by weado
1 Like
Thanks for your help.
I got it working now without the āexpander cardā.
now just use the mushroom cards.
1 Like
That worked. Can someone explain why this is not a standard option?
I made a couple remotes mostly using mushroom, stack-in, stack, and grid cards.
Iād like to make two more improvements if possible, so Iām seeking suggestions:
- The navigation area with the arrows and select button would be better as a track pad style, but I cannot find a good card for that.
- The volume works well for tapping, but Iād prefer a large slider style that would look and work like the mushroom light card dimmer control. I know I can customize one of the media player cards (core, mini, or mushroom), but (1) theyāre all horizontal and (2) theyāre all very thin and hard to see at a glance.
Any ideas?
3 Likes
Hi,
nice card!
Can you share te code?
1 Like
so, Iām almost there with my car charging card.
One thing would freak me out - if the icon from the template card would sit in the left corner like in the picture below AND if the ping animation would work - as shown here:
Mushroom Cards - Build a beautiful dashboard easily š - #2925 by rhysb?
I have already spent hours combining the various CSS ācommandsā - I just canāt get it combined.
No chance, maybe @rhysb still has an idea ? 
2 Likes
I made this thermostat card with some controls. How can I make it glow around the border based on the thermostat status?
code:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-climate-card
entity: climate.room_climate_office
name: Office
icon: mdi:briefcase
fill_container: false
show_temperature_control: true
layout: horizontal
collapsible_controls: false
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: light.office_group_1
icon: mdi:ceiling-light
icon_color: |
{% if is_state('light.office_group_1', 'on') %}
yellow
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
primary: ''
layout: vertical
secondary: Lights1
badge_color: ''
- type: custom:mushroom-template-card
entity: light.office_group_2
icon: mdi:ceiling-light
icon_color: |
{% if is_state('light.office_group_2', 'on') %}
yellow
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
primary: ''
layout: vertical
secondary: Lights2
- type: custom:mushroom-template-card
primary: ''
secondary: >-
{% if is_state_attr('climate.room_climate_office', 'preset_mode',
'boost') %}
Boost ON
{% else %}
Boost OFF
{% endif %}
icon: mdi:radiator
layout: vertical
tap_action:
action: call-service
service: script.climate_boost_toggle
data:
climate_entity: climate.room_climate_office
target: {}
icon_color: >-
{% if is_state_attr('climate.room_climate_office', 'preset_mode',
'boost') %}
red
{% else %}
disabled
{% endif %}
- type: custom:mushroom-template-card
primary: ''
secondary: |-
T: {{states('sensor.temperature_office')}}Ā°C
H: {{states('sensor.humidity_office')}}%
V: {{states('sensor.office_thermostat_valvetappet')}}%
icon: ''
layout: vertical
icon_color: ''
multiline_secondary: true
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
1 Like
First of all thank you very much for sharing this code. I used it and it looks great!
I have an issue when i use 1 decimal for setting the temperature. The minus sign gets under the temperature and the layout is ruined. i tried altering the lettertype size but css not really my thing. Any suggestions would really be appreciated.
I tried this but nothing changed
cards:
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-xl: 16px;
--st-font-size-m: 14px;
--st-font-size-title: 16px;
--st-font-size-sensors: 18px;
--st-spacing: 2px;
}
ha-card {
--st-spacing: 0px;
}
ha-card .current--value {
color: #ffffff;
}
header {
margin-bottom: 10px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #6f6f6f;
}
Full code:
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
style: |
ha-card {
padding-bottom: 14px !important;
}
primary: Office
secondary: |
{{ state_attr('climate.office_thermostaat', 'hvac_action') }}
icon: |-
{% set mode = states('climate.office_thermostaat') %}
{% if mode == 'off' %}
mdi:power
{% elif mode == 'cool' %}
mdi:snowflake
{% elif mode == 'heat' %}
mdi:fire
{% elif mode == 'heat_cool' %}
mdi:autorenew
{% else %}
mdi:home-thermometer
{% endif %}
icon_color: >-
{% set status = state_attr('climate.office_thermostaat','hvac_action')
%}
{% if status == 'off' %}
grey
{% elif status == 'cooling' %}
blue
{% elif status == 'heating' %}
red
{% else %}
grey
{% endif %}
tap_action: none
- type: vertical-stack
cards:
- type: custom:simple-thermostat
style: |
ha-card {
--st-spacing: 0px;
}
ha-card .current--value {
color: #ffffff;
}
header {
margin-bottom: 10px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #6f6f6f;
}
entity: climate.office_thermostaat
header:
name: false
icon: false
decimals: '0'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '1'
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 0px;
--st-mode-background: #2d2d2d;
margin-left: 12px;
margin-right: 12px;
}
ha-card .mode-item.active.off {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item.active.cool {
background: #1d3447;
color: #2196f3;
}
ha-card .mode-item.active.heat {
background: #472421;
color: #f44336;
}
ha-card .mode-item.active.heat_cool {
background: #493516;
color: #ff9800;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 10px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.office_thermostaat
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off':
name: Power
heat:
name: Heat
cool:
name: Cool
heat_cool:
name: Auto
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em
}
alignment: justify
chips:
- type: template
content: '{{state_attr(entity, ''current_temperature'')}} Ā°C'
entity: climate.office_thermostaat
icon: mdi:home-thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='cool' %}
blue
{% elif state=='heat' %}
red
{% else %}
grey
{% endif %}
style: |
ha-card {
margin-left: 6px;
}
- type: template
entity: climate.office_thermostaat
content: |
{{ state_attr(entity, 'fan_mode') }}
icon: mdi:fan
icon_color: green
tap_action: none
- type: template
double_tap_action:
action: none
content: '{{ states(entity) }}% '
entity: sensor.lumi_lumi_sens_humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
- type: template
icon: |-
{% if is_state(entity, 'off') %}
mdi:chevron-down
{% elif is_state(entity, 'on') %}
mdi:chevron-up
{% endif %}
tap_action:
action: toggle
entity: input_boolean.thermostat_dropdown_office
icon_color: disabled
style: |
ha-card {
--chip-icon-size: 1em
}
- type: conditional
conditions:
- entity: input_boolean.thermostat_dropdown_office
state: 'on'
card:
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: sensor.19791209321807_outdoor_temperature
primary_info: state
secondary_info: name
name: Out
icon_color: blue
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 1.6px;
--st-mode-background: #2d2d2d;
margin-right: 12px;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 6px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.werkkamer_airco
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
fan_only: false
dry: false
auto: false
fan:
LOW_MID: false
NATURE: false
MID_HIGH: false
MID:
icon: mdi:fan-speed-2
name: false
HIGH:
icon: mdi:fan-speed-3
name: false
Auto: false
LOW:
name: 'On'
icon: mdi:fan-speed-1
- type: custom:mini-graph-card
entities:
- entity: sensor.lumi_lumi_sens_temperature
name: Inside Temperature
color: '#4caf50'
- entity: sensor.19791209321807_outdoor_temperature
name: Outside Temperature
color: '#2196f3'
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
Screenshot_2022-12-28-17-30-46-51_40deb401b9ffe8e1df2f1cc5ba480b12|320x500
2 Likes
You did a great job here. Do you mind sending us the whole dashboard source config so we can reuse?
Hi,
In the picture from 7ahang that @piitaya lists as an inspiration, there is a ādevice countā under the āliving roomā title, and Iāve been wanting to make a similar count to use in my āroom cardsā.
Iāve tried to search and look through this whole thread (and others) but I havenāt found a way to do it yet.
Does anyone know if there is an easy way to do that?
I have a regular āareaā for all the devices, so I was hoping to just do some template area count.
Hi, a css style question. I would like to center bottom button but my css skills are failing me, anyone have a take? They are horizontally stacked, mushroom template cards (I have card mod etc installed). Been searching the forum and perhaps css god @rhysb could help?
Thanks in advance.
How can I make this only animate when its on?
features:
- type: light-brightness
type: tile
entity: light.master_bedroom_main_lights
icon: mdi:lightbulb-on
card_mod:
style:
ha-tile-icon$: |
ha-icon {
animation: illumination 1s infinite;
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}