Wasnt wrong necessarily. Used to work the way you had it. But it seems that you cant refer to ha-state-icon under mushroom-shape-icon$ anymore.
So Iām going to ask a question that has probably been asked umpteen times already, but I simply couldnāt find anything in this thread.
After the latest update to HA all animations are not working.
Is it a case of waiting for an update to Mushroom? Thereās been 2 so far that havenāt fixed the issue, or do I need to update the yaml for the animations? If so is there any information on what needs updated/removed/added?
There are many discussions in this thread and in GitHub to explain how to fix the custom animations. Itās also noticed in the release note that itās a breaking change and you need to do the changes : Release v3.0.0 Ā· piitaya/lovelace-mushroom Ā· GitHub
Mushroom only supports fan animation and vacuum animation by default and they have been fixed.
As I said, Mushroom doesnāt support officially card mod. I do my best to avoid breaking changes but if you are using card mod you can have issues in the future and you will have to fix them.
5 Likes
Does anyone know how to change the primary and secondary text color and font size for the mushroom template card using card mod?
I have searched but this post exceeds the length of my patience.
You do know, that you can search āthis thread onlyā via the search? 
Iām sorry, canāt help with your real problem, but maybe the search helps. 
1 Like
@pcwii what @paddy0174 said. It took me 5 mins of searching to find this:
card_mod:
style: |
ha-card {
--secondary-text-color: rgb(var(--rgb-green));
--card-secondary-font-size: 40px;
--card-primary-font-size: 10px;
--primary-text-color: rgb(var(--rgb-red));
}
3 Likes
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 **
1 Like
With reference to @rhysb excellent person card, how would I change the colors?
This is the relevant code from the post above, as you can see, it's blue, when I've defined it to be green
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.
1 Like
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.