Works like a charm! Thanks again for your help!
One last thing though, if you mind.
Do you know why i lose my visual editor when adding card mod background color to chips, but not when i do it to cards?
This is the code i have for my chips, which make me lose the visual editor.
card_mod:
style: |
ha-card {
--chip-background: rgba(150,150,150,0.1);
}
Try applying the card_mod to chips instead of the chip. This should not break the visual editor.
Trying to create a popup using a chip card… is this even possible? I’ve not had any success so far…
here’s what I’m working with:
- type: custom:mushroom-chips-card
chips:
- type: template
content: >-
Battery health is {{ states('sensor.sm_f926u1_battery_health')}}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Popup example
card:
type: entities
entities:
- sensor.mapinfo
- light.bathroom
Any suggestions ideas would be appreciated as to what I’m doing incorrectly here 
Thank you!
This should do the trick:
type: custom:mushroom-chips-card
chips:
- type: template
content: Battery health is {{ states('sensor.sm_f926u1_battery_health')}}
tap_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID: this
title: Popup example
card:
type: entities
entities:
- sensor.mapinfo
- light.bathroom
this code works for me
- type: template
icon: mdi:flower
icon_color: |
{% if is_state('plant.flower1', 'ok') %}
green
{% else %}
red
{% endif %}
entity: plant.flower1
content: null
tap_action:
action: call-service
service: browser_mod.popup
data:
title: Włączone
card:
type: custom:flower-card
entity: plant.flower1
show_bars:
- moisture
- conductivity
- temperature
- illuminance
- dli
- humidity
Tried that it does nothing just sits there and no response at all. It’s strange!
Strange it doesn’t popup in the main view… it’s popping up in the settings page hahahahahahha
You have browser-mod installed, right? 
Yes I do
Just checking 
hahahhahahaha I know most times it’s something just simple like that.
Have you turned it off and on again? 
Worth a try I guess 
How can i make background image greyscale if no lights or movement detected?
card_mod:
style: |
ha-card {
height: 100px;
background: url('/local/office-background.jpg') center;
background-size: cover;
background-blend-mode: overlay;
}
This format is better if the deviceID is likely to change.
This allows a pop-up to happen regardless of deviceID it will target whatever the ID is when the pop-up is done rather than having a deviceID in memory that may not be the same if the device changes from wifi to data for example. This allows the deviceID to be loaded each time and won’t break when the deviceID changes. The pop-up only happens on the device that called for it as well. Because of fire-dom-event.
type: custom:mushroom-template-card
entity: light.daniels_bedroom_lights_main
primary: Daniels 🛏️
secondary: '{{ states(''light.daniels_bedroom_lights_main'') | title }}'
picture: >-
{% set status = states('light.daniels_bedroom_lights_main') %} {% if
status == 'on' %} local/icons/custom_icons/light-bulb.png {% elif status
== 'off' %} local/icons/custom_icons/light-bulb-off.png {% endif %}
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Daniels Bedroom
card:
type: entities
entities:
here you are:
type: vertical-stack
cards:
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
cards:
- type: custom:mushroom-template-card
primary: SYSTEM - {{(states('sensor.rpi_uptime'))}}
secondary: Home Assistant - {{(states('sensor.ha_uptime'))}}
icon: mdi:home-assistant
icon_color: '#41bdf5'
layout: horizontal
tap_action:
action: navigate
navigation_path: /config/logs
card_mod:
style: |
:host {
--mush-icon-size: 60px;
--mush-card-primary-font-size: 14px;
--mush-card-secondary-font-size: 12px;
}
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 1fr 1fr 1fr 1fr
cards:
- type: custom:mushroom-template-card
entity: update.home_assistant_core_update
primary: CORE
secondary: |
{% if is_state('update.home_assistant_core_update', 'off') %}
Brak
{% else %}
{{ state_attr('update.home_assistant_core_update', 'latest_version') }}
{% endif %}
layout: vertical
fill_container: false
icon: mdi:home-assistant
icon_color: '#41bdf5'
secondary_info: state
multiline_secondary: true
card_mod:
style: |
:host {
margin-top: -10px;
--mush-icon-size: 60px;
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 10px;
}
mushroom-shape-icon {
--shape-color: none !important;
{% if is_state('update.home_assistant_core_update', 'on') %}
animation: blink 1s linear infinite;
{% endif %}
}
@keyframes blink {
30% {opacity: 0;}
}
ha-card {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
- type: custom:mushroom-template-card
primary: Supervisor
secondary: |
{% if is_state('update.home_assistant_supervisor_update', 'off') %}
Brak
{% else %}
{{ state_attr('update.home_assistant_supervisor_update', 'latest_version') }}
{% endif %}
layout: vertical
fill_container: false
icon: mdi:home-assistant
icon_color: '#41bdf5'
secondary_info: state
multiline_secondary: true
card_mod:
style: |
:host {
margin-top: -10px;
--mush-icon-size: 60px;
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 10px;
}
mushroom-shape-icon {
--shape-color: none !important;
{% if is_state('update.home_assistant_supervisor_update', 'on') %}
animation: blink 1s linear infinite;
{% endif %}
}
@keyframes blink {
30% {opacity: 0;}
}
ha-card {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
- type: custom:mushroom-template-card
entity: update.home_assistant_core_update
primary: HA OS
secondary: >
{% if is_state('update.home_assistant_operating_system_update', 'off')
%}
Brak
{% else %}
{{ state_attr('update.home_assistant_operating_system_update', 'latest_version') }}
{% endif %}
layout: vertical
fill_container: false
icon: mdi:home-assistant
icon_color: '#41bdf5'
secondary_info: state
multiline_secondary: true
card_mod:
style: |
:host {
margin-top: -10px;
--mush-icon-size: 60px;
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 10px;
}
mushroom-shape-icon {
--shape-color: none !important;
{% if is_state('update.home_assistant_operating_system_update', 'on') %}
animation: blink 1s linear infinite;
{% endif %}
}
@keyframes blink {
30% {opacity: 0;}
}
ha-card {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
- type: custom:mushroom-update-card
entity: update.zigbee2mqtt_update
name: Zigbee2MQTT
secondary: |
{% if is_state('update.zigbee2mqtt_update', 'off') %}
Brak
{% else %}
{{ state_attr('update.zigbee2mqtt_update', 'latest_version') }}
{% endif %}
layout: vertical
use_entity_picture: true
icon: mdi:home-assistant
icon_color: '#41bdf5'
secondary_info: state
multiline_secondary: true
card_mod:
style: |
:host {
--mush-icon-size: 40px;
--mush-card-primary-font-size: 11px;
--mush-card-secondary-font-size: 9px;
}
mushroom-shape-icon {
{% if is_state('update.zigbee2mqtt_update', 'on') %}
animation: blink 1s linear infinite;
{% endif %}
}
@keyframes blink {
30% {opacity: 0;}
}
ha-card {
height: 120px;
}
card_mod:
style: |
ha-card {
height: 150px;
}
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 1fr 2fr
grid-template-rows: auto
margin: 0px
padding: 0px
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: sensor.rpi_cpu_temp
icon_color: '#0084ff'
hold_action:
action: none
primary_info: name
secondary_info: state
name: CPU
card_mod:
style: |
ha-card {
margin-top: -10px;
margin-right: -8px;
}
- type: custom:mushroom-entity-card
entity: sensor.memory_use_percent
icon_color: '#39539E'
icon: mdi:memory
hold_action:
action: none
primary_info: name
secondary_info: state
name: RAM
card_mod:
style: |
ha-card {
margin-top: -10px;
margin-right: -8px;
}
- type: custom:mushroom-entity-card
entity: sensor.disk_use_percent
icon_color: '#0077B5'
icon: mdi:harddisk
hold_action:
action: none
primary_info: name
secondary_info: state
name: HDD
card_mod:
style: |
ha-card {
margin-top: -10px;
margin-right: -8px;
}
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
experimental:
color_threshold: true
chart_type: radialBar
show:
loading: false
apex_config:
chart:
height: 270px
plotOptions:
radialBar:
offsetY: -25
startAngle: -135
endAngle: 135
hollow:
size: 45%
dataLabels:
name:
show: false
value:
show: false
legend:
show: false
stroke:
dashArray: 0
lineCap: flat
series:
- entity: sensor.rpi_cpu_temp
type: column
name: CPU Temp
color_threshold:
- value: 0
color: '#0084ff'
- value: 55
color: orange
- value: 60
color: red
- entity: sensor.memory_use_percent
type: column
name: RAM
color_threshold:
- value: 0
color: '#39539E'
- value: 65
color: orange
- value: 85
color: red
- entity: sensor.disk_use_percent
type: column
name: HDD
color: '#0077B5'
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: sensor.rpi_power_status
primary: RPI
icon_color: deep-purple
icon: mdi:raspberry-pi
layout: vertical
card_mod:
style: |
:host {
--mush-card-primary-font-size: 13px;
--mush-icon-border-radius: 50%;
--mush-icon-size: 72px;
}
ha-card {
background: transparent;
margin-top: -112px;
width: 120px;
margin-left: auto;
margin-right: auto;
}
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 1fr 1fr 1fr
grid-template-rows: auto
margin: 0px
padding: 0px
cards:
- type: custom:mushroom-template-card
icon: mdi:home-import-outline
layout: vertical
primary: HA Restart
icon_color: purple
tap_action:
action: call-service
confirmation:
text: Czy na pewno restartujemy Home Assistant ?
service: homeassistant.restart
card_mod:
style: |
:host {
--mush-icon-size: 45px;
--mush-card-primary-font-size: 12px;
}
ha-card {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
- type: custom:mushroom-template-card
icon: mdi:raspberry-pi
layout: vertical
primary: RPI Restart
icon_color: purple
tap_action:
action: call-service
confirmation:
text: Czy na pewno restartujemy RASPBERRY?
service: hassio.host_reboot
card_mod:
style: |
:host {
--mush-icon-size: 45px;
--mush-card-primary-font-size: 12px;
}
ha-card {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
- type: custom:mushroom-template-card
icon: mdi:robot-excited
layout: vertical
primary: Automation
icon_color: purple
tap_action:
action: call-service
confirmation:
text: Czy na pewno przeładowujemy Automatyzacje ?
service: automation.reload
card_mod:
style: |
:host {
--mush-icon-size: 45px;
--mush-card-primary-font-size: 12px;
}
ha-card {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 1fr 2fr
grid-template-rows: auto
margin: 0px
padding: 0px
cards:
- type: custom:mushroom-template-card
icon: mdi:cog-refresh-outline
layout: vertical
primary: Konfiguracja
icon_color: purple
tap_action:
action: call-service
service: script.check_config
card_mod:
style: |
:host {
--mush-icon-size: 45px;
--mush-card-primary-font-size: 12px;
}
ha-card {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
- type: entities
entities:
- sensor.config_result
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 1fr
grid-template-rows: auto
cards:
- type: conditional
conditions:
- entity: sensor.config_result
state: invalid
card:
type: custom:card-templater
card:
type: markdown
title: Błąd
content_template: '{{ states.sensor.config_result.attributes.detail }}'
entities:
- sensor.config_result
Can someone please tell me how to remove or change the plus icons of a grocery list? I don’t know what to call it, I’ve tried right clicking and inspecting. I have card mod. Im using the OurGroceries Card, and trying to make i look as close to mushroom card as possible.
Is there a way to include either album art from a media player to set that as the card background on media player card, and/or have primary info display the media player name always with the secondary info showing the app name and state. If i group together various devices and they are actively playing I cannot tell which room they are in?
cards:
- type: custom:mushroom-media-player-card
entity: media_player.lounge_shield
name: Lounge TV
icon: mdi:play
use_media_info: true
fill_container: true
use_media_atrwork: true
show_volume_level: false
media_controls:
- previous
- play_pause_stop
- next
- on_off
- shuffle
- repeat
volume_controls:
- volume_set
collapsible_controls: true
tap_action:
action: none
- type: conditional
conditions:
- entity: media_player.lounge_shield
state_not: 'off'
- entity: media_player.lounge_shield
state_not: idle
card:
entity: media_player.lounge_shield
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(63, 81, 181, 0.2) !important;' if is_state(config.entity, 'playing') }}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 42px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(63, 81, 181);
--ha-card-border-radius: 12px;
}
thanks for sharing the config of this nice and handy card but I have 1 more question could you share the script of config check and the sensor config result?
It’s wired. Inspired in your code I try to make blink a template card. It blinks on the browser but not in the mobile phone app.
type: custom:mushroom-template-card
icon: mdi:shield
icon_color: red
card_mod: null
style: |-
ha-card {
box-shadow: 0px 0px;
}
mushroom-shape-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
What can I do?