Wow! Thank you, I will try this. I have searched the forum and came up with 50+ results, wasnāt super helpful. I would have worked my way through the results but knowing what to search for can be more helpful than knowing how to search.
Thanks again!
** to update this, this code does what I needed **
With reference to @rhysb excellent person card, how would I change the colors?
type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.rhys
content_info: none
use_entity_picture: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Rhys
content:
type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: person.rhys
layout: horizontal
icon_type: entity-picture
primary_info: state
secondary_info: last-changed
tap_action:
action: none
hold_action:
action: none
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
/* Style shadow ring around person avatar */
box-shadow: 0px 0px 4px 2px var(--state-person);
margin-right: var(--mush-title-spacing, 12px);
}
.: |
ha-card {
/* Remove default card styling */
--ha-card-background: none;
box-shadow: none;
--ha-card-border-width: 0;
/* Increase icon size */
--icon-size: 72px;
/* Center card */
margin: auto;
width: fit-content;
/* Add padding to bottom of card */
padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;
/* Make card non-responsive to select and pointer */
user-select: none;
pointer-events: none;
transition: all 0s;
}
:host {
/* Define Person State colors. Can be added to theme */
--state-person-home: var(--green-color);
--state-person-not-home: var(--red-color);
--state-person-zone: var(--blue-color);
--state-person-unknown: var(--grey-color);
/* Set Person State color */
--state-person:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
var(--state-person-{{ states(config.entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
And this is the pertinent section
/* Define Person State colors. Can be added to theme */
--state-person-home: var(--green-color);
--state-person-not-home: var(--red-color);
--state-person-zone: var(--blue-color);
--state-person-unknown: var(--grey-color);
Struggling to identify the new format for colors.
the header of the Raport looks nice. Can you share the code?
Need a little help here please.
I would like the icon to flash on anything other than the disarmed state, can this be done?
type: custom:mushroom-template-card
primary: Alarm
secondary: '{{ states("alarm_control_panel.alarmo") | replace("disarmed", "Disarmed") }}'
icon: mdi:security
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: pulse 2s ease-in-out infinite;
}
icon_color: |-
{% if is_state("alarm_control_panel.alarmo", "disarmed") %}
green
{% else %}
red
{% endif %}
entity: alarm_control_panel.alarmo
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: template
icon: mdi:car-lifted-pickup
icon_color: grey
content: Raptor
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
- type: spacer
- type: entity
entity: device_tracker.fordpass_tracker
content_info: none
use_entity_picture: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Ford Raptor
content:
type: vertical-stack
cards:
- type: map
entities:
- entity: device_tracker.fordpass_tracker
dark_mode: true
hours_to_show: 24
aspect_ratio: '1:1'
card_mod:
style:
ha-map $ ha-entity-marker $: |
.marker {
/* Style person marker & adjust position to avoid blocking waypoints */
border: 3px solid var(--state-person) !important;
border-radius: 50% 50% 50% 0px !important;
transform: rotate(-45deg) translate(50%, -50%);
overflow: visible !important;
background: var(--state-person) !important;
}
.entity-picture {
/* Correct orientation of person avatar */
transform: rotate(45deg);
border-radius: 50%;
}
ha-map $: |
path:first-child {
/* Style accuracy radius */
stroke: var(--state-person);
fill: color-mix(in srgb, var(--state-person) 50%, transparent);
stroke-width: 0px;
}
path:nth-child(even) {
/* Styling for waypoints */
stroke: var(--blue-color);
fill: var(--blue-color);
stroke-width: 4px;
}
path:nth-child(odd):not(:first-child) {
/* Styling for lines */
stroke: var(--blue-color);
stroke-width: 4px;
}
.leaflet-control-attribution {
/* Style attribution text */
#display: none;
background: rgba(var(--rgb-card-background-color), 0.4) !important;
font-size: 10px;
}
.leaflet-container a {
/* Set color of zoom icons & attribution text */
color: var(--secondary-text-color);
}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
/* Style zoom buttons like Chips */
border-radius: var(--mush-chip-border-radius, 19px) !important;
padding: 3px;
background: rgb(var(--rgb-secondary-text-color), 0.2) !important;
margin: 8px 8px 0px;
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
.leaflet-top {
/* Move zoom buttons to bottom of map */
bottom: 0px !important;
}
.leaflet-control-zoom {
/* Allow buttons to be moved */
position: absolute !important;
/* Remove extra margin */
margin: 0px !important;
/* Remove zoom control border */
border: none !important;
}
.: |
ha-card {
/* Remove default card styling without affecting child elements */
box-shadow: none;
border-width: 0;
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
transition: all 0s;
}
:host {
/* Define Person State colors. Can be added to theme */
--state-person-home: var(--green-color);
--state-person-not-home: var(--red-color);
--state-person-zone: var(--blue-color);
--state-person-unknown: var(--grey-color);
/* Set person state color */
--state-person:
{% if is_state(config.entities[0].entity, ['home', 'not_home', 'unknown']) %}
var(--state-person-{{ states(config.entities[0].entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
}
ha-icon-button {
/* Position center button */
bottom: 8px;
left: 8px !important;
top: auto !important;
/* Style center button to match Chip */
color: var(--deep-orange-color) !important;
background: color-mix(in srgb, var(--deep-orange-color) 20%, transparent);
border-radius: var(--mush-chip-border-radius, 19px);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
card_mod:
style:
ha-header-bar$: |
.mdc-top-app-bar__section--align-start {
justify-content: end !important;
}
.mdc-top-app-bar__section {
padding: 0px !important;
}
.mdc-top-app-bar__title {
display: none;
}
.mdc-top-app-bar__row {
height: 36px !important;
}
.mdc-top-app-bar {
padding: 8px;
}
ha-dialog$: |
div.mdc-dialog__scrim {
-webkit-backdrop-filter: blur(6px) !important;
}
.: |
ha-dialog {
--vertical-align-dialog: center !important;
}
ha-icon-button {
background: color-mix(in srgb, var(--grey-color) 20%, transparent);
border-radius: var(--mush-chip-border-radius, 19px);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
ha-header-bar {
margin-bottom: -64px;
width: 36px;
margin-left: auto !important;
}
:host {
/* Remove border from poup */
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--popup-min-width: 450px;
--mdc-icon-button-size: 36px;
--mdc-icon-size: 18px;
}
.content {
/* Remove extra bottom border */
margin: -24px -24px -34px !important;
}
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: spacer
- type: entity
entity: sensor.fordpass_lastrefresh
content_info: last-updated
- type: template
tap_action:
action: call-service
service: fordpass.refresh_status
service_data: {}
target: {}
icon: mdi:refresh
alignment: end
card_mod:
style:
mushroom-template-chip:
$: |
mushroom-chip {
/* Set default cursor for all Chips except back */
cursor: default !important;
}
.: |
ha-card {
/* Correct chips height when none active */
height: var(--chip-height);
/* Fix inconsistent right margin spacing */
margin-right: calc(-1 * var(--chip-spacing));
/* Disable transition animation */
transition: all 0s;
}
/* Fix Chip positioning */
.chip-container * {
/* Apply consistent margin to Chips */
margin: 0px calc(var(--chip-spacing)) 0px 0px;
display: flex;
}
mushroom-conditional-chip {
/* Don't apply margins to conditional Chip */
margin: 0px !important;
}
- type: custom:mushroom-title-card
title: Raptor
alignment: center
card_mod:
style: |
:host {
/* Stick header to top of page */
position: sticky;
/* Offset header below HA header */
top: var(--header-height);
/* Bring header to the front */
z-index: 1;
/* Reduce padding on title */
--mush-title-padding: 56px 0px 12px;
}
ha-card {
/* Blend card background with header and adjust transparency. Set to 'none' for fully transparent */
background: rgba(var(--rgb-card-background-color), 0.2);
/* Blur cards behind header */
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
/* Add padding around chips */
padding: var(--mush-chip-spacing, 8px);
/* Square top corners and round bottom */
border-radius: 0 0 var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
/* Adjust for gap at top of header and spacing below */
margin: -8px 0px 6px;
/* Add shadow below header */
box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.16);
/* Disable transition animation */
transition: all 0s;
}
/* Pseudo element to overlay image on header. Remove if image is not
required */
ha-card:before {
content: "";
/* Position & size header background */
position: absolute;
width: 100%;
height: 100%;
left: 0px;
/* Background image of header */
background: url('/local/raptor.jpg') top center / 100%;
/* Set transparency of header */
opacity: 0.4;
/* Move background behind title */
z-index: -1;
/* Match top magin to underlying card */
margin-top: -8px;
}
@rhysb created it, I just changed it to suite my need.
I asked this question over in the card-mod thread, hoping someone here can help me.
Iām using card-mod to dynamically change the icon in a mushroom light card based on a motion sensor, the only issue is that it changes both the icon I want to change, as well as the colour/temperature icon (iām trying to combine the top row cards in to the card below).
This is how Iām changing the icon and colour. I believe that the use of host: is capturing all icons in the card. Is there a way I can change only the left icon using CSS?
style: |
:host {
--card-mod-icon:
{% if states('binary_sensor.range_motion_occupancy') == 'on' %} mdi:motion-sensor
{% else %} mdi:motion-sensor-off
{% endif %};
--card-mod-icon-color:
{% if states('binary_sensor.range_motion_occupancy') == 'on' %} orange
{% else %} lightgrey
{% endif %};
}
Can u share ur codeļ¼thank you.
Can you share your code please?
When using the climate card, the german translation is wrong for the dry-mode.
It says: āTrockenā, it should āTrocknenā or even better āEntfeuchtenā.
The HA-Climate-Card says āTrocknenā.
Where can i find these translations?
I love the floating mini media player and the show/hide volume controls. But is it possible to have a different entity for the volume?
My media player is an nvidia shield, but my volume control comes from sonos
So this has been driving me mad 
Iāve installed mushroom and itās working as expected but cannot for the life of me get a simple switch to function to switch a light on or off. The entity is updating fine as it changes state but clicking the card does nothing.
I feel like there is something stupid Iām doing here but unsure what?
Iāve trimmed the yaml to the bare minimum:
type: custom:mushroom-entity-card
entity: switch.shelly1_485519031a41
tap_action:
action: toggle
icon_color: accent
primary_info: name
secondary_info: state
hold_action:
action: none
double_tap_action:
action: none
If itās in a broser_mod popup, then I have issues with that too since I last updated
Nope. Straight through a standard web browser. I tried Edge and Chriome plus the same problem on tablet and mobile.
Thinking it was the button actions missing I added the alarm control panel card and that functioned fine, the buttons on the card carried out the appropriate action.
Pasted your code into my yaml and changed the switch name, all works fine.
Problem must be elsewhere.
Can you post the yaml for the entire card? My first suggestion would be to put the card_mod under the specific card you are trying to style instead of the combined card.
But until i see full yaml i wont be able to help.
Hereās the full code for the card.
Iām using the card mod just in the mushroom light card.
type: custom:mushroom-light-card
entity: light.range
name: Range
icon: mdi:led-strip-variant
fill_container: true
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: false
collapsible_controls: false
layout: horizontal
primary_info: name
card_mod:
style: |
:host {
--card-mod-icon:
{% if states('binary_sensor.range_motion_occupancy') == 'on' %} mdi:motion-sensor
{% else %} mdi:motion-sensor-off
{% endif %};
--card-mod-icon-color:
{% if states('binary_sensor.range_motion_occupancy') == 'on' %} orange
{% else %} lightgrey
{% endif %};
}
i think this works?
type: custom:mushroom-light-card
entity: light.range
name: Range
icon: mdi:led-strip-variant
fill_container: true
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: false
collapsible_controls: false
layout: horizontal
primary_info: name
card_mod:
style: |
ha-state-icon {
--card-mod-icon:
{% if states('binary_sensor.range_motion_occupancy') == 'on' %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %};
--card-mod-icon-color:
{% if states('binary_sensor.range_motion_occupancy') == 'on' %}
orange
{% else %}
lightgrey
{% endif %};
}
This works because the second āiconā is considered a button so is not covered under ha-state-icon.
ha-state-icon:
ha-icon (under button).
But yes. using host would just change all icons in the card.
So for reference for anyone else in the future. if you wanted to style the icon of the button ONLY. then it would be like this:
card_mod:
style:
mushroom-button$:
button: |
ha-icon {
--card-mod-icon:
{% if states('binary_sensor.range_motion_occupancy') == 'on' %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %};
--card-mod-icon-color:
{% if states('binary_sensor.range_motion_occupancy') == 'on' %}
orange
{% else %}
lightgrey
{% endif %};
}
This was a good challenge btw 
This of course worked, amazing! Thankyou.
How did you interrogate the elements? are those screenshots from a browser console?
Hi All,
Is it correct that the mushroom cards not using the icon-color set when using customise in HA?
---
###########################################################################################
# CUSTOMIZE_GLOBAL
# https://www.home-assistant.io/docs/configuration/customizing-devices
###########################################################################################
"switch.*":
templates:
icon_color: if (state === 'on') return '#1E90FF'; return 'black';
Using normal entity card the icon is black when off and blue when on.
in mushroom-entity-card the icon is light grey when off and also blue when on.
If this is a normal behaviour then I donāt need to search where this go wrongā¦
pretty all ill use if its icon color or changed for an icon
{% set state = states(entity) %} {% if state == 'on' %}
#ADFF2F
{% elif state == 'off' %}
#9E9E9E
{% endif %}